第三章：列表、超链接

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>标签

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

标签前后不会换行；