第三章:列表、超链接

 张良   2022-11-10 08:14 

1、什么是超链接?


超链接:指从一个网页的文字或图片指向一个目标的连接关系。


2、如何实现超链接?


超链接通过<a>标签实现,<a>标签是一个双标签

a 的英文全称是anchor(锚)

语法格式:

<a href="路径">链接源</a>

路径的分类:

*相对URL

*绝对URL


如何使用超链接?


空链接是指没有目标端点的链接。用#表示。

点击空连接,刷新当前页面,不跳转。

语法格式:

<a href="#">文本/图片</a>


相对URL的链接:多用于站点内页面和页面之间的链接;

写法:相对路径。如:

“../html/default.html”

绝对URL的链接:多用于站点与站点之间的链接;

写法:绝对路径。如:

“https://www.yinmoulun.com”


target属性规定链接目标的打开方式

语法格式:

<a href="路径" target=“属性值”>链接源</a>


target打开方式的属性值:

*_self    默认。原窗口打开

*_blank    新窗口中打开

*_parent    在父框架集中打开

*_top    在整个窗口中打开被链接文档


a标签的属性:

href链接目标:

相对路径:指向另一个站点

绝对路径:指向站点内某文件

锚点路径:指向页面内某位置


target链接目标的打开方式:

_self:默认值,原窗口打开

_blank :新窗口打开

_top

_parent


超链接的默认外观:


*未被访问的链接带有下划线而且是蓝色的

*点击时链接带有下划线而且是红色的

*访问后的链接带有下划线而且是紫色的


什么是HTML列表?


HTML列表是在网页中将相关资料以条目的形式,有序或无序排列形成的表

无序列表-有序列表-自定义列表


无序列表是其各个列表项之间为并列关系,没有先后顺序的列表。


网页中如何实现无序列表?


无序列表英文全称是Unordered Lists,标签为<ul>

列表项英文全称是List item,标签为<li>

基本语法格式:

<ul>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

</ul>

快捷键使用:

ul>li*5    tab键可以直接出现标签结构

ul>li{文字内容}*5 tab键 标签结构+内容可以快速完成


如何使用无序列表?


无序列表的type属性,用于制定列表项目符号类型

基本语法格式:

<ul type="类型值">

    <li>列表项</li>

</ul>

项目符号类型值:

*disc    默认值 实心圆  ●

*square    小方块 ■

*circle    空心圆 ○


无序列表主要用在新闻列表、导航栏。


什么是有序列表?


有些列表是各个列表项按照一定顺序排列的列表。


网页中如何实现有序列表?


有序列表的英文全称是ordered lists,标签是<ol>

基本语法格式:

<ol>

    <li>列表项</li>

    ...

</ol>

有序列表的type属性,用于规定列表项目编号类型。

基本语法格式:

<ol type="类型值">

    <li>列表项</li>

    ...

</ol>

项目编号类型值:

*1 默认值 十进制数字

*a或A 字母顺序的有序列表

*i或I 罗马数字


如何改变有序列表的起始编号?


有序列表的start属性,用于规定列表项目编号的起始值

基本语法格式:

<ol start="起始值">

    <li>列表项</li>

    ...

</ol>

注意:起始值只能是数字。


有序列表用<ol>标签表示,里面嵌套列表项<li>标签


什么是自定义列表?


自定义列表是带有列表项和列表项注释的列表


网页中如何实现自定义列表?


自定义列表的标签是<dl> 英文全称是definition list

列表项标签是<dt> 英文全称是definition term

列表项注释的标签是<dd> 英文全称是definiton description

基本语法格式:

<dl>

    <dt>定义项</dt>

    <dd>描述项注释1</dd>

</dl>

说明:每个自定义列表可以有多个列表项和列表项注释。


*自定义列表:<dl>包含<dt>和<dd>

*<dt>是列表项,<dd>是列表项注释

*<dt>和<dd>并列关系,不能互相嵌套、不能颠倒

*<dt>可以对应多个<dd>


非语义标签:

<div>、<span>标签在语义上不代表任何特定类型的内容,可以被用来对其它标签进行分组。

基本语法格式:

<div>内容</div>

<span>内容</span>


<div>与<span>的区分

*<div>标签

独占一行

可以包含文字内容和任意元素;

*<span>标签

只能包含文字内容和行内元素;

标签前后不会换行;

本文地址:https://www.yinmoulun.com/post/362.html,发布在阴谋论网,欢迎分享!

评论已关闭!