2.3.7 列表
列表分为有序列表、无序列表和自定义列表三种，其中，有序列表就是按照字母或数字等顺序排列的列表项目。
在HTML中，使用<ol>标签来编写一个带有编号的列表。需要注意的是，<ol>标签只是定义了一个有序列表，列表中的每项内容需要使用<li>标签来表示。
无序列表与有序列表的表现形式相似，只不过无序列表是一个没有序号的列表。<ul>标签只是定义了一个无序列表，列表中的每项内容同样需要使用<li>标签来表示。
如图2-28所示，该图为我们常见的试卷截图，共有4道题，这就是有序列表的一种形式。
图2-28 有序列表
下面使用<ol>标签和<li>标签实现这个有序列表。具体代码如下。
另外，<li>标签的结束标签也可以省略，页面效果不会改变。
有序列表的type属性用于设置列表的编号类型，取值有5种，分别是1（数字）、i（小写罗马字母）、I（大写罗马字母）、a（小写字母）、A（大写字母）。其默认值为1，有序列表的编号按照选择的不同类型依次顺延，修改上述代码中<ol>标签的type属性值为i，示例代码如下。
运行代码查看页面效果，修改type属性值，如图2-29所示，编号变成了小写罗马字母。
图2-29 修改type属性值
无序列表也会按照<li>标签的顺序显示，只是不显示序列号，如图2-30所示。
图2-30 无序列表
下面使用<ul>标签和<li>标签实现这个无序列表。具体代码如下。
无序列表的type 属性有4 种取值，分别是disc（实心圆）、circle（空心圆）、square（实心正方形）、none（取消前缀）。其默认值为disc，分别演示剩余的三种情况，如图2-31、图2-32和图2-33所示。
图2-31 type属性值为circle
图2-32 type属性值为square
图2-33 type属性值为none
不管是有序列表还是无序列表，其中的<li>标签都可以嵌套有序、无序列表或其他标签。比如，<li>标签中可以嵌套超链接或者另一个无序列表，示例代码如下。
运行代码查看效果，列表嵌套如图2-34所示。
图2-34 列表嵌套
代码中使用<ul>标签定义了无序列表，在其内部使用两个<li>标签。<li>标签内分别嵌套了<a>标签和新的<ul>标签，从而展示了2级列表的效果。
这里，读者可能会对什么时候使用有序列表或者无序列表产生疑惑。实际上如果改变列表中<li>标签的顺序，会使得这个列表对应的意义发生改变，那么应该使用<ol>标签；如果更改之后意义没有发生改变，那么使用<ul>标签更为合适。
另外，如果需要定义列表包含着一系列标题或者说明的组合，还可以使用自定义列表来实现。自定义列表需要使用三个标签，分别是<dl>标签、<dt>标签和<dd>标签，具体如下。
● <dl>标签：用来定义一个自定义列表。
● <dt>标签：用来定义自定义列表中的标题。
● <dd>标签：用来定义自定义列表中的说明。
下面通过一个案例来演示这三种标签的使用，示例代码如下。
从代码中可以看出，<dl>标签相当于有序列表的<ol>标签，用来定义列表；<dt>标签用来定义标题“苹果”；<dd>标签用来定义说明“蔷薇科苹果属植物”和“苹果的功效：益胃……”。运行代码查看效果，如图2-35所示。
图2-35 自定义列表
其实每个自定义列表中可以有一个或多个<dt>标签，以及一个或多个<dd>标签。示例代码如下。
代码中使用<dt>标签定义了两个标题，苹果和香蕉。并对应配以说明，运行代码查看效果，如图2-36所示。
图2-36 自定义列表中包含多个<dl>标签和<dd>标签