HTML 列表元素_html列表(list)元素

列表元素

HTML 包含专门用于创建列表的元素，共有 3 种类型的列表，分别是无序列表、有序列表、描述列表。

可以在一个列表中其他另外一个或者多个列表，并且，一种类型的列表可以与任意类型的列表相互嵌套。列表的表项可以与任何HTML元素（如段落、图片、链接等）交叉定义。

所有的列表都是由父元素和子元素构成，父元素用于指定要创建的列表类型，子元素用于指定要创建的列表项。

无序列表

无序列表，是指所有表项之间没有先后顺序的列表。如果列表项的顺序不太重要，就要使用无序列表。

无序列表的父元素为 ul（unorder list）元素，列表项为 li（list item）元素。如：

1. <ul>
2. <li>表项1</li>
3. <li>表项3</li>
4. <li>表项2</li>
5. </ul>

上述代码的运行结果如图 2‑13 所示：

图2-13 无序列表

从上图可以看出，默认情况下，无序列表的项目符号为实心圆。不过，可以使用CSS的list-style-type属性来定义项目符号的样式。

有序列表

有序列表，是指所有表项之间有先后顺序的列表。如果列表项的顺序对于列表来说非常关键，那么这种情况有序列表就是恰当的选择。

使用有序列表的好处是，列表项的序号由浏览器自动维护，可以随意增删列表项，而不必担心序号发生混乱。

有序列表的父元素为 ol（order list）元素，列表项为 li 元素。在 ol 元素中，通过start属性指定列表项的起始编号；通过reversed属性指定列表项的序号是否倒序排列，该属性是布尔类型，如果设置，则会倒序排列。如：

1. <ol start = "3" reversed>
2. <li>表项1</li>
3. <li>表项2</li>
4. <li>表项3</li>
5. </ol>

上述代码的运行结果如图 2‑14 所示：

图2-14 有序列表

从上图可以看出，列表项的序号按3、2、1倒序排列。并且，默认情况下，有序列表的项目符号为数字1、2、3，也可以使用CSS的list-style-type属性定义项目符号的样式。

描述列表

描述列表，是指用于描述成组出现的名称或术语及其值的列表。可以创建由名称和值构成的组合，如术语和定义、元数据和值、问题和答案，以及任何其他的名/值组。

在HTML5中，把这种列表称作描述列表（description list），而在HTML的早期版本值则称为定义列表（definition list）。

描述列表的父元素为 dl元素，而其中的每个名/值组，则包含一个或多个dt（description title）元素，以及一个或多个dd（description description）元素。dt 元素用来定义名称或术语，dd元素用来定义名称或术语的值。如：

1. <dl>
2.   <dt>列表标题1：</dt>
3.       <dd>表项描述1-1</dd>
4.       <dd>表项描述1-2</dd>
5.       <dd>表项描述1-3</dd>
6.   <dt>列表标题2：</dt>
7.       <dd>表项描述2-1</dd>
8.        <dd>表项描述2-2</dd>
9.       <dd>表项描述2-3</dd>
10. </dl>

上述代码的运行结果如图 2‑15 所示：

图2-15 描述列表

从上图可以看出，描述列表是没有项目符号的。虽然它也是列表，但不能使用CSS的list-style-type属性定义列表项目符号的样式。

版权声明：本文出自 歪脖网 的《HTML5宝典》，欢迎在线阅读，并提出宝贵意见。