2.3.7 列表

列表分为有序列表、无序列表和自定义列表三种，其中，有序列表就是按照字母或数字等顺序排列的列表项目。

在HTML中，使用<ol>标签来编写一个带有编号的列表。需要注意的是，<ol>标签只是定义了一个有序列表，列表中的每项内容需要使用<li>标签来表示。

无序列表与有序列表的表现形式相似，只不过无序列表是一个没有序号的列表。<ul>标签只是定义了一个无序列表，列表中的每项内容同样需要使用<li>标签来表示。

如图2-28所示，该图为我们常见的试卷截图，共有4道题，这就是有序列表的一种形式。

下面使用<ol>标签和<li>标签实现这个有序列表。具体代码如下。

另外，<li>标签的结束标签也可以省略，页面效果不会改变。

有序列表的type属性用于设置列表的编号类型，取值有5种，分别是1（数字）、i（小写罗马字母）、I（大写罗马字母）、a（小写字母）、A（大写字母）。其默认值为1，有序列表的编号按照选择的不同类型依次顺延，修改上述代码中<ol>标签的type属性值为i，示例代码如下。

运行代码查看页面效果，修改type属性值，如图2-29所示，编号变成了小写罗马字母。

无序列表也会按照<li>标签的顺序显示，只是不显示序列号，如图2-30所示。

下面使用<ul>标签和<li>标签实现这个无序列表。具体代码如下。

无序列表的type 属性有4 种取值，分别是disc（实心圆）、circle（空心圆）、square（实心正方形）、none（取消前缀）。其默认值为disc，分别演示剩余的三种情况，如图2-31、图2-32和图2-33所示。

不管是有序列表还是无序列表，其中的<li>标签都可以嵌套有序、无序列表或其他标签。比如，<li>标签中可以嵌套超链接或者另一个无序列表，示例代码如下。

运行代码查看效果，列表嵌套如图2-34所示。

代码中使用<ul>标签定义了无序列表，在其内部使用两个<li>标签。<li>标签内分别嵌套了<a>标签和新的<ul>标签，从而展示了2级列表的效果。

这里，读者可能会对什么时候使用有序列表或者无序列表产生疑惑。实际上如果改变列表中<li>标签的顺序，会使得这个列表对应的意义发生改变，那么应该使用<ol>标签；如果更改之后意义没有发生改变，那么使用<ul>标签更为合适。

另外，如果需要定义列表包含着一系列标题或者说明的组合，还可以使用自定义列表来实现。自定义列表需要使用三个标签，分别是<dl>标签、<dt>标签和<dd>标签，具体如下。

● <dl>标签：用来定义一个自定义列表。

● <dt>标签：用来定义自定义列表中的标题。

● <dd>标签：用来定义自定义列表中的说明。

下面通过一个案例来演示这三种标签的使用，示例代码如下。

从代码中可以看出，<dl>标签相当于有序列表的<ol>标签，用来定义列表；<dt>标签用来定义标题“苹果”；<dd>标签用来定义说明“蔷薇科苹果属植物”和“苹果的功效：益胃……”。运行代码查看效果，如图2-35所示。

其实每个自定义列表中可以有一个或多个<dt>标签，以及一个或多个<dd>标签。示例代码如下。

代码中使用<dt>标签定义了两个标题，苹果和香蕉。并对应配以说明，运行代码查看效果，如图2-36所示。