2.2 列表元素

把相关内容用列表的形式展示，可以使内容显得更加有条理性。HTML5提供了3种列表模式，即无序列表、有序列表和定义列表。本节主要介绍对应的三种列表元素。

2.2.1 无序列表元素ul

无序列表中每项的前缀都显示一个项目符号（如●、○等符号）。用﹤ul﹥标签定义无序列表，用﹤li﹥定义列表项。﹤ul﹥标签支持全局标准属性和全局事件属性。定义无序列表元素的格式为：

﹤/ul﹥

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

HTML5推荐用CSS样式来定义列表的类型。

【例2-5】 无序列表示例。本例文件2-5.html在浏览器中的显示效果如图2-5所示。

2.2.2 有序列表元素ol

有序列表的前缀通常为序号标志（如数字、字母等），通过带序号的列表可以更清楚地表达信息的顺序。使用﹤ol﹥标签可以建立有序列表，表项的标签仍为﹤li﹥。定义有序列表元素的格式为：

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

HTML5推荐使用样式表CSS改变有序列表中的序号类型。

【例2-6】 有序列表示例。本例文件2-6.html在浏览器中的显示效果如图2-6所示。

2.2.3 定义列表元素dl

定义列表又称为释义列表或字典列表，用﹤dl﹥标签定义。它的内容不仅仅是一列项目，而是项目及其注释的组合。定义列表的内部可以有多个列表项标题，每个列表项标题用﹤dt﹥标签定义，列表项标题内部又可以有多个列表项描述，用﹤dd﹥标签定义。定义列表元素的格式为：

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

【例2-7】 使用列表显示高分电影排行榜。本例文件2-7.html在浏览器中的显示效果如图2-7所示。

在上面的示例中，﹤dl﹥列表中每一项的名称用﹤dt﹥标签，后面跟由﹤dd﹥标签标记的条目定义或解释。默认情况下，浏览器在左边界显示条目的名称，并在下一行缩进显示其定义或解释。

2.2.4 嵌套列表

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

【例2-8】在无序列表中嵌套无序列表、有序列表和定义列表。本例文件2-8.html在浏览器中的显示效果如图2-8所示。