2.6. 列表

列表（List）用于分组相互关联的信息，以清晰体现信息之间的关联，便于用户阅读^{[[1]](http://www.w3.org/wiki/HTML_lists)}。

HTML 支持三种列表：

无序列表：用于分组显示没有特定顺序的项目
有序列表：用于分组显示具有特定顺序的项目
定义列表：用于显示成对出现的“术语/定义”的系列

2.6.1. 无序列表

无序列表（unordered list），也称 项目符号列表（bulleted list），使用 ul 元素创建，其中的每个列表项目（list item）使用 li 元素表示。如一个包含待购买商品的购物清单：

<ul>
    <li>西红柿</li>
    <li>鸡蛋</li>
    <li>食盐</li>
    <li>白糖</li>
    <li>小葱</li>
    <li>植物油</li>
</ul>

西红柿
鸡蛋
食盐
白糖
小葱
植物油

无序列表的列表项目的显示顺序可以任意调整，调整后不影响无序列表要表达的含义，如购物清单中的商品并不存在购买的先后次序。

无序列表的列表项目以点状项目符号标记，最典型的点状项目符号是一个涂黑的圆“ ● ”。可以使用 type 属性更改无序列表的项目符号类型，其属性值可能是：

disc：项目符号为 “ ● ”，默认值
circle：项目符号为 “ ○ ”
square：项目符号为 “ ■ ”

<ul type="disc">
    <li>西红柿</li>
    <li>鸡蛋</li>
</ul>
<ul type="circle">
    <li>食盐</li>
    <li>白糖</li>
</ul>
<ul type="square">
    <li>小葱</li>
    <li>植物油</li>
</ul>

西红柿
鸡蛋

食盐
白糖

小葱
植物油

2.6.2. 有序列表

有序列表（ordered list），又称 编号列表（numbered list），使用元素 ol 创建，其中的每个同样使用 li 元素表示。如使用上例中已购买原材料做一份西红柿炒鸡蛋的步骤：

<ol>
    <li>西红柿洗净用沸水烫一下，去皮、去蒂、切片</li>
    <li>将鸡蛋打入碗中，加盐，用筷子充分搅打均匀</li>
    <li>锅里放油3汤匙烧热，将鸡蛋放入锅中炒熟盛出</li>
    <li>将剩余的油烧热，下西红柿片煸炒</li>
    <li>放盐、糖炒片刻，倒入鸡蛋翻炒</li>
    <li>出锅，加葱花配色</li>
</ol>

西红柿洗净用沸水烫一下，去皮、去蒂、切片
将鸡蛋打入碗中，加盐，用筷子充分搅打均匀
锅里放油3汤匙烧热，将鸡蛋放入锅中炒熟盛出
将剩余的油烧热，下西红柿片煸炒
放盐、糖炒片刻，倒入鸡蛋翻炒
出锅，加葱花配色

如果随意调整这个有序列表中列表项目的顺序，那么该列表将不是一个有效的菜谱。

有序列表的项目符号一般默认为阿拉伯数字序号。可以使用 type 属性更改无序列表的项目符号类型，其属性值可能是：

1：默认值，阿拉伯数字，1、2、3、4、5……
A：大写英文字母，A、B、C、D、E……
a：小写英文字母，a、b、c、d、e……
I：大写罗马数字，Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴⅰ……
i：小写罗马数字，ⅰ、ⅱ、ⅲ、ⅳ、ⅴ……

<ol type="1">
    <li>step 1</li>
    <li>step 2</li>
    <li>step 3</li>
</ol>
<ol type="A">
    <li>step 1</li>
    <li>step 2</li>
    <li>step 3</li>
</ol>
<ol type="i">
    <li>step 1</li>
    <li>step 2</li>
    <li>step 3</li>
</ol>

step 1
step 2
step 3

step 1
step 2
step 3

step 1
step 2
step 3

注意，对于 ol 元素来说，type 属性值是区分大小写的；另外，当使用罗马数字标识列表项目时，其属性值设定分别为大小写英文字母 I 和 i，而不是罗马数字 Ⅰ 和 ⅰ 。

有序列表还可以通过指定 start 属性来实现“继续前一列表”编号的功能，即从某个指定阿拉伯数字整数值开始进行编号，如：

<ol start="4" type="I">
    <li>step 4</li>
    <li>step 5</li>
    <li>step 6</li>
</ol>

step 4
step 5
step 6

2.6.3. 定义列表

定义列表和前两种列表的表现形式不同，在中文文档编排中出现的频率较低，最典型的应用是将一组术语以及这些术语对应的定义放在一个列表中联系起来。

定义列表（definition list）使用 dl 元素包含，其中的每个术语（definition term）使用 dt 元素包含，每个术语的描述使用 dd（definition description）元素包含。

<dl>
    <dt>无序列表</dt>
    <dd>用于分组显示没有特定顺序的项目</dd>
    <dt>有序列表</dt>
    <dd>用于分组显示具有特定顺序的项目</dd>
    <dt>描述列表</dt>
    <dd>用于显示成对出现的“术语/定义”的系列</dd>
</dl>

无序列表: 用于分组显示没有特定顺序的项目
有序列表: 用于分组显示具有特定顺序的项目
描述列表: 用于显示成对出现的“术语/定义”的系列

除了术语描述，定义列表的作用可以扩展到去描述任何成对出现的“名称/值”的系列，比如时间及这些时间对应的事件、商品的特点及这些特点的详细描述等等。

<p>iPhone 6 岂止更大</p>
<dl>
    <dt>不仅更大，更大放异彩</dt>
    <dd>把显示屏做大并非难事，但打造一块将炫丽色彩、更高对比度、更广阔浏览视角
    集于一身的大尺寸 Multi-Touch 显示屏，则完全是另一个境界的是。而这，也正是
    我们在新Retina HD 高清显示屏上所做到的。</dd>
    <dt>大有动力，大有能效</dt>
    <dd>新一代 A8 芯片基于 64 位台式电脑级架构，可提供更为强劲的动力，
    即使是驱动这样一个更大的显示屏也游刃有余。</dd>
</dl>

iPhone 6 岂止更大

不仅更大，更大放异彩: 把显示屏做大并非难事，但打造一块将炫丽色彩、更高对比度、更广阔浏览视角集于一身的大尺寸 Multi-Touch 显示屏，则完全是另一个境界的事。而这，也正是我们在新Retina HD 高清显示屏上所做到的。
大有动力，大有能效: 新一代 A8 芯片基于 64 位台式电脑级架构，可提供更为强劲的动力，即使是驱动这样一个更大的显示屏也游刃有余。

2.6.4. 列表嵌套

一个列表项目可以包含另外一个完整的列表，即列表嵌套。

<h1>菜谱：西红柿炒鸡蛋</h1>
<dl>
    <dt>用料</dt>
    <dd>
        <ol>
            <li>
                主料
                <ul>
                    <li>西红柿</li>
                    <li>鸡蛋</li>
                </ul>
            </li>
            <li>
                辅料
                <ul>
                    <li>食盐</li>
                    <li>白糖</li>
                    <li>小葱</li>
                    <li>植物油</li>
                </ul>
            </li>
        </ol>
    </dd>
    <dt>做法</dt>
    <dd>
        <ol>
            <li>西红柿洗净用沸水烫一下，去皮、去蒂、切片</li>
            <li>将鸡蛋打入碗中，加盐，用筷子充分搅打均匀</li>
            <li>锅里放油3汤匙烧热，将鸡蛋放入锅中炒熟盛出</li>
            <li>将剩余的油烧热，下西红柿片煸炒</li>
            <li>放盐、糖炒片刻，倒入鸡蛋翻炒</li>
            <li>出锅，加葱花配色</li>
        </ol>
    </dd>
    <dt>特点</dt>
    <dd>
        <dl>
            <dt>口感</dt>
            <dd>色泽鲜艳，口味宜人，爽口、开胃，深受大众喜爱</dd>
            <dt>营养价值</dt>
            <dd>是营养素互补的不错实例</dd>
            <dd>健美抗衰老</dd>
        </dl>
    </dd>
</dl>

菜谱：西红柿炒鸡蛋

用料

主料
- 西红柿
- 鸡蛋
辅料
- 食盐
- 白糖
- 小葱
- 植物油

做法

西红柿洗净用沸水烫一下，去皮、去蒂、切片
将鸡蛋打入碗中，加盐，用筷子充分搅打均匀
锅里放油3汤匙烧热，将鸡蛋放入锅中炒熟盛出
将剩余的油烧热，下西红柿片煸炒
放盐、糖炒片刻，倒入鸡蛋翻炒
出锅，加葱花配色

特点

口感: 色泽鲜艳，口味宜人，爽口、开胃，深受大众喜爱
营养价值: 是营养素互补的不错实例; 健美抗衰老

被嵌套的列表（ul、ol、dl）应该和一个特定的列表项目（li）或定义描述（dd）联系在一起；即在代码中，被嵌套列表应包含在 li 或 dd 元素的开始和结束标签之间。

HTML 中还有两个列表元素：被设计用来表示多列目录（directory）列表的 dir 元素和被设计用来表示单列选项菜单列表的 menu 元素。这两个列表中的列表项目同样使用 li 元素表示。

![命令行窗口中的多列目录](../images/listelement_dir.png)

命令行窗口中的多列目录

![Windows 控制面板中的选项菜单](../images/listelement_menu.png)

Windows 控制面板中的选项菜单

dir 元素和 menu 元素的设计目标应该类似上图所示的形式；但是如果不借助一些其它手段，它们的是这样的：

<dir>
    <li>Contacts</li>
    <li>Desktop</li>
    <li>Documents</li>
    <li>Downloads</li>
</dir>
<menu>
    <li><a href="cp.htm">控制面板主页</a></li>
    <li><a href="as.htm">更改适配器设置</a></li>
    <li><a href="ss.htm">更改高级共享设置</a></li>
    <li></li>
</menu>