2.5 列表元素

列表是以结构化、易读性的方式提供信息的方法。列表不但使用户可以方便地查找重要的信息，而且使文档结构更加清晰明了。在制作网页时，列表经常用于写提纲和品种说明书。通过列表标签的使用能使这些内容在网页中条理清晰、层次分明、格式美观地表现出来。本节将重点介绍列表元素的使用。列表按形式主要分为：无序列表、有序列表、定义列表以及嵌套列表等。

2.5.1 无序列表

无序列表就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈、方框等一些特殊符号标识。无序列表使列表项的结构更清晰，更合理。

当创建一个无序列表时，主要使用HTML的<ul>标签和<li>标签来标记。其中，<ul>标签标识一个无序列表的开始；<li>标签标识一个无序列表项。无序列表标签的格式如下。

从浏览器上看，无序列表的特点是列表作为一个整体，与上下文本段间各有一行空白；列表项向右缩进并左对齐，每行前面有项目符号。

【例2-12】 使用无序列表显示爱心乐园的文章分类。本例在浏览器中的显示效果如图2-12所示。

2.5.2 有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，因此以编号来标记各列表项。使用<ol>标签可以创建有序列表，列表项的标签仍为<li>。有序列表标签的格式如下。

在浏览器中显示时，有序列表中整个列表与上下文本段之间各有一行空白；列表项向右缩进并左对齐；各列表项前带顺序号。

【例2-13】使用有序列表显示爱心学堂注册步骤。本例在浏览器的显示效果如图2-13所示。

2.5.3 定义列表

定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一系列术语以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签：<dl>标签、<dt>标签和<dd>标签。定义列表标签的格式如下。

在<dl>、<dt>和<dd>3个标签的组合中，<dt>是标题，<dd>是内容，<dl>可以看作承载标题和内容的容器。当出现多组这样的标签组合时，应尽量使用一个<dt>标签搭配一个<dd>标签的方法。如果<dd>标签中内容很多，可以嵌套<p>标签使用。

【例2-14】 使用定义列表显示爱心学堂联系方式。本例在浏览器中的显示效果如图2-14所示。

【说明】在本例中，<dl>列表中每一个列表项的名称不再用<li>标签，而是用<dt>标签进行标记，后面跟着由<dd>标签标记的条目定义或解释。默认情况下，浏览器一般会在左边界显示条目的名称，并在下一行以缩进形式显示其定义或解释。

2.5.4 嵌套列表

嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以层次感。有序列表和无序列表不仅可以自身嵌套，而且可以彼此互相嵌套。嵌套方式可分为：无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、有序列表中嵌套无序列表等方式，读者需要灵活掌握。

【例2-15】制作爱心乐园页面。本例在浏览器中的显示效果如图2-15所示。