下载掌阅APP，畅读海量书库
立即打开
列表，顾名思义就是按顺序显示内容，使网页更易读，比如某购物商城首页的商品分类条理清晰、井然有序，是列表应用的一个很好的表现形式。文字列表可以有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，浏览者能更加快捷地获得相应信息。简而言之，HTML中的文字列表就相当于文字编辑软件Word中的项目符号和自动编号。HTML提供了三种常用的列表：无序列表、有序列表和定义列表。
无序列表相当于Word中的项目符号，无序列表是项目排列没有先后顺序的列表形式，大部分网页列表都采用无序列表。无序列表通常只以符号或图标作为分项标识。无序列表的列表标记采用<ul></ul>标记，其中每一个列表项使用<li></li>，其基本语法格式如下。
在上面的语法中，<ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。
可以在一个列表中嵌套另外一个或者多个列表，并且一种类型的列表可以与任意类型的列表相互嵌套。列表的表项可以与任何HTML元素（如段落、图片、链接等）交叉定义。
无序列表中type属性的常用值有四个，它们呈现的效果不同，具体见表4-1。
表4-1 type属性值及显示效果
如example3-01.html中设置了不同的type属性值，并使用嵌套的方式显示，如图 4-17所示。
图4-17 无序列表中不同type属性值效果
有序列表类似Word 中的自动编码功能，也就是列表项有先后顺序的列表形式，从上到下可以有各种序列编号，如 1、2、3或a、b、c等。有序列表的使用方法与无序列表的使用方法基本相同，标记符号为<ol></ol>，每一个列表项前使用<li></li>。每个项目都有前后顺序之分，多数用数字表示。其基本语法格式如下。
在上面的语法格式中，<ol></ol>标记用于定义有序列表，<li></li>为具体的列表项。和无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。使用有序列表的好处是列表项的序号由浏览器自动维护，可以随意增删列表项，而不必担心序号发生混乱。
在有序列表中，除了type属性之外，还可以为<ol>定义start属性、reversed属性；为<li>定义value属性，它们决定有序列表的项目符号，其取值和含义见表4-2。
表4-2 <ol>标记属性及值
例如，example3-02.html中对相关属性进行设置后，其效果如下。
图4-18 有序列表设置效果
在HTML中，还可以定义自定义列表。定义列表通常表示名词或者概念的定义，每一个子项由两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。自定义列表的标记是<dl>，其基本语法格式如下。
在上面的语法中，<dl></dl>标记用于指定定义列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中。其中，<dt></dt>标记用于指定术语名词，<dd></dd>标记用于对名词进行解释和描述。一对<dt></dt>可以对应多对<dd></dd>，即可以对一个名词进行多项解释。
例如，example3-03.html中对相关属性进行设置后，其效果如图4-19所示。
图4-19 定义列表设置效果
案例example3-01、example3-02、example3-03的源代码见二维码4-1。
纯文本的网页容易缺乏吸引力，适当插入一些图像能增强网页的表现力，如图4-20所示。
图4-20 网页图像效果
HTML提供了专门用来显示图像的标记<img>，可以利用此标记在网页中插入图像。当浏览器读取到<img>标记时，就会显示此标记所设定的图像。
①JPEG（Joint Photographic Experts Group，联合图像专家组）是特别为照片图像设计的文件格式。
②GIF（图形交换格式）是网页图像中很流行的格式。虽然它仅包括256种色彩，但GIF提供了出色的、几乎没有信息丢失的图像压缩功能，并且GIF可以包含透明区域和动画效果。
③BMP格式的图像，最常见的是网站注册页面或登录页面中的“验证码”，其实它一般是网站程序自动生成的bmp格式小图片。
④PNG（Portable Network Graphic，可移植网络图形）格式，是一种新的、无显示质量损耗的文件格式。
<img>标记定义HTML页面中的图像，标记有两个必需属性：src和alt，图像并不会插入HTML页面中，而是链接到HTML页面上，它的作用是向网页中嵌入一幅图像。其基本语法格式如下。
图像标记常用属性见表4-3。
表4-3 <img>标记属性及值
由于某些原因图像可能无法正常显示，如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时文字提示用户该图片的内容。这就需要使用图像的alt属性。以“熊猫”图像为例，该属性的基本语法格式如下。
上面的案例中，图像正常显示和不能正常显示时的效果分别如图4-21、图4-22所示。
图4-21 图像正常显示时页面的效果
图4-22 图像不能正常显示时页面的效果
图像标记<img >有一个和alt属性十分类似的属性title，title属性用于设置鼠标悬停时图像的提示文字。其基本语法格式如下。
其设置效果如图4-23所示。
通常情况下，如果不给<img>标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片大小。width和height属性分别用来定义图片的宽度和高度，通常只设置其中一个，另一个会按原图等比例缩放。如果同时设置两个属性，且其比例和原图比例不一致，显示的图像就会变形或失真。这两个属性的基本语法格式如下。
图4-23 图像标记title属性设置效果
其设置效果如图4-24所示。
图4-24 width和height属性效果
默认图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能实现的。该属性的基本语法格式如下。
其设置效果如图4-25所示。
图4-25 border属性设置效果
在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。该属性的基本语法格式如下。
设置效果如图4-26所示。
图4-26 vspace和hspace属性设置效果
图文混排是网页中的常见效果，默认情况下图像的底部会相对于文本的第一行文字对齐，代码如下。
效果如图4-27所示。
图4-27 align属性默认效果
在制作网页时经常需要实现图像和文字的环绕效果，例如设置align属性为middle，代码如下。
效果如图4-28所示。
图4-28 align属性设置为middle的效果
实际工作中，通常新建文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
一般用于访问不是同一台服务器上的资源或指带有盘符的路径。例如，“D：\HTML5开发基础\ch05\img\logo.gif”或“http：//www.gsfc.edu.cn”。
指访问同一台服务器上相同文件夹或不同文件夹中的资源。如果访问相同文件夹中的文件，只需要写文件名；如果访问不同文件夹中的资源，URL就以某一级节点为基准，通过文档间的相对关系来进行文件的访问。
相对路径设置分为以下三种：
①图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称，如<img src="logo.gif" />。
②图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，二者之间用“/”隔开，如<img src="img/img01/logo.gif" />。
③图像文件位于HTML文件的上一级文件夹：在文件名之前加入“。。/”，如果是上两级，则需要使用“。。/ 。。/”，以此类推，如<img src="。。/logo.gif" />。
超链接属于网页的一部分，它是让网页和网页相互连接的部件。只有通过超链接把多个网页连接起来，才能构成一个网站。超链接是指从一个网页指向另一个目标的连接关系，目标可以是网页、位置（相同网页的不同位置）、图片等。在网页中用来超链接的对象，可以是文本、图片等，如图4-29所示。
图4-29 学院首页导航部分的超链接情况
设置超链接可以针对一个字、一个词或者一组词，也可以是一幅图像，当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手，单击这些内容能跳转到新的文档或当前文档的某个部分。
在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象，其基本语法格式如下：
在上面的语法格式中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，下面对它们进行具体解释。
用于指定链接页面的打开方式，其取值见表4-4。
表4-4 target取值及描述
续表
（2）href
用于指定链接目标的url地址。当为<a>标记应用href属性时，它就具有了超链接的功能。
href 的值，也就是要跳转的文件类型，可以是如下类型：
• 一个http/https协议的网站；
• 一个站内网页；
• 一个电子邮件地址；
• 一张图片；
• 一个文本文件；
• 一个应用程序。
外部链接（External Links）是指从外部网站指向自己网站的链接，简称外链，通常被称为“反向链接”或“导入链接”，其形式包含纯文本链接、锚文本链接、图片链接。基本语法格式如下。
内部链接（Internal Links）是指同一域名网站下的内容页面之间相互链接。
比如网站频道页、栏目页、文章详情页（或产品详情页）之间的链接，甚至网站内关键词与关键词之间的链接都可以归类为内部链接，这也是内部链接被称为站内链接的原因。对内部链接的优化，其实就是对整个网站的站内链接进行优化。基本语法格式如下。
所谓链接图像，既是链接也是图像。在网页制作的时候，常常会给网页上的某些图片添加一个超链接，当用户单击该图片时浏览器立即转入该超链接所指向的地址。基本语法格式如下。
空链接是未指派的链接。空链接用于向页面上的对象或文本附加行为。
创建空链接的几种方法如下代码所示。
单击E-mail链接后，浏览器会使用系统默认的E-mail程序打开一封新的电子邮件，电子邮件收件地址为链接指向的地址。href属性值为“mailto：E-mail地址”。基本语法格式如下。
单击下载链接弹出下载窗口进行文件下载，当下载文件为浏览器能解析的文件时，如图片、文本文档等，会直接在浏览器中打开，此时如还需下载，则要使用download属性，设置下载文件名即可。download属性是HTML5的新增属性。基本语法格式如下。
HTML中的锚点链接也叫书签链接，常常用于那些内容庞大烦琐的网页，单击命名锚点，其不仅能指向文档，还能指向页面里的特定段落，更能作为“精准链接”的便利工具，让链接对象接近焦点。该链接可以让浏览者方便查看网页内容，类似于阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，元素锚点是最佳的方法。
使用锚点的步骤：
第一步：创建锚点。
• 基本语法格式：
• 语法解释：锚点在光标处建立一个名为“id”属性值所规定的书签。
• 注意：锚点名不能含有空格。
第二步：建立锚点链接。
基本语法格式：
• 链接到同一页面中的锚点。
• 链接到其他页面中的书签。
同一张图片上，不同位置可以链接不同的目标地址，使用的标记不再是<a>标记，而是<map>标记和<area>标记。
①<map>标记：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。其属性见表4-5。
表4-5 <map>标记属性
②<area>标记：永远嵌套在<map>标记内部。<area>标记可定义图像映射中的区域。其基本语法格式如下。
<img src = 图像文件地址 usemap = 映射图像名称>
在该语法格式中又引入了两个标记：<map>标记和<area>标记。<map>标记用于包含多个<area>标记的情况，其中“映射图像名称”就是在<img>标记中定义的名称。
<area>标记的属性有：
• alt属性：定义此区域的替换文本；是必须属性。
• shape属性：用来定义热区形状，它有四个值，见表4-6。
表4-6 shape属性的取值及其定义
·coords属性：用来定义矩形、圆形或多边形区域的坐标。
可以看到<a>标记存在一个默认效果，如图4-30所示，文字是蓝色的，鼠标放在上面会出现一个小手的效果，文字下面还有一条下划线。
图4-30 超链接的默认效果
点击链接时字体变为红色，默认有一条下画线，如图4-31所示。
图4-31 鼠标单击时链接的样式
<a>标记提供了四个伪类选择器来定义超链接在不同状态下的CSS样式。
a：link，定义超链接在正常情况下的样式，默认超链接对象是蓝色，有下画线。
a：visited，定义超链接被访问过后的样式，默认超链接对象是紫色的，有下画线。
a：hover，定义鼠标悬浮在超链接上时的样式，默认超链接对象是蓝色的，有下画线。
a：active，定义鼠标单击链接时的样式，默认超链接对象是红色的，有下画线。
例如，在下面这个案例中，重新定义了超链接在四个状态下的样式。源代码见二维码4-2。
