2.4　列表

列表能将网页中的相关信息进行合理布局，将项目有序或无序地整理在一起，如图2-21所示，便于用户的浏览和操作。HTML中共有3种列表，分别是无序列表、有序列表和自定义列表。列表最大的特点就是整齐、整洁、有序。

2.4.1　无序列表

无序列表的各个列表项之间没有顺序及级别之分，是并列的。列表项前不用连续编号而用一个特定符号来标记，默认为在每列表项前加一个黑色小圆点，如例2-17所示。

基本语法格式如下：

列表项li标签的type属性取值与ul标签相同。设置ul标签的type属性会使所有的列表项按统一风格显示，设置其中一个li列表项的type属性值只会影响它自身的显示风格，其他列表则按原样显示。type属性值与编号样式的对应关系如表2-10所示。

【例2-17】　无序列表的应用

在浏览器中的显示效果如图2-22所示。

注意：

（1）<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

（2）<li>与</li>之间相当于一个容器，可以容纳所有元素。

（3）无序列表会带有自己的样式属性，可以不使用此样式，而是使用CSS来处理此类问题。

2.4.2　有序列表

有序列表即有排列顺序的列表，其各个列表项按照一定的顺序排列，如例2-18所示。

基本语法格式如下：

type属性值与编号样式的对应关系如表2-11所示。

【例2-18】　有序列表应用

在浏览器中的显示效果如图2-23所示。

2.4.3　定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。首标签<dl>和尾标签</dl>之间是列表内容，列表项目用标签<dt>引导，列表项目的说明用标签<dd>引导。通常<dt>和<dd>一起出现。一个列表项目可以对应一个说明项，也可以对应多个说明项，如例2-19所示。

定义列表中每个列表项有一个缩进的说明项，与字典的编排格式相同，所以又称为“字典列表”。

基本语法格式如下：

【例2-19】　定义列表的应用

在浏览器中的显示效果如图2-24所示。

2.4.4　综合实战

以“模拟试卷”在线考试试题项目为例，综合实验列表标签，如例2-20所示。

【例2-20】　模拟试卷

上述案例中使用了列表的嵌套，列表的嵌套不仅使网页的内容更加合理美观，而且使其内容看起来更加简洁。列表嵌套分为无序列表嵌套、有序列表嵌套、无序和有序列表的混合嵌套，它们的使用方式相同。

在浏览器中的显示效果如图2-25所示。