济南盈讯科技有限公司

16. HTML 列表

序言

列表用于将相关联的信息集合在一起，这样这些相关联的信息就被紧密地相互联系在一起，便于人们阅读。在现代 Web 开发中，列表是广泛使用的元素，频繁地用于导航和一般内容中。

从文档结构上来看，因为使用列表有助于创建出结构良好，更容易访问且易于维护的 Web 文档，因此使用列表是很好的选择。此外列表还为你提供了可附加 CSS 样式的额外元素，有助于应用各种样式。

在本篇文章中，我将讲述以下内容：HTML 中可用的列表的不同类型，应当在什么时候及如何使用列表，以及如何应用一些基本的样式。以下为本篇文章的内容目录（其实，它就是列表！）：

• 三种列表类型
  • 无序列表
    • 无序列表的标记
  • 有序列表
    • 有序列表的标记
    • 不以“1”作为有序列表的起始编号
  • 定义列表
• 选择列表类型
• HTML 列表和文本之间的差别
• 嵌套列表
• 一个按步骤编写网页的例子
  • 主页的标记
  • 添加一些样式
  • 食谱页面
  • 食谱页面的标记
  • 对食谱页面进行样式化
• 总结
• 延伸阅读
• 练习题

三种列表类型

在 HTML 中，有三种列表类型：

• 无序列表——用于将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序。
• 有序列表——用于将一组相关的列表项目排列在一起，列表中的项目有特别的先后顺序。
• 定义列表——用于显示名称及其对应的“值”（value），如术语及其定义，或时间及相对应的事件等。

以上每一种类型的列表都有特定的用途和含义，不是可以互换使用的。

无序列表

无序列表，或称符号列表，在列表中的项目可以以任何顺序排列时使用。购物清单就是无序列表的一个例子：

• 牛奶
• 面包
• 黄油
• 咖啡豆

这些项目都是该购物清单的一部分，不过这些项目是可以以任何顺序排列的，如下所示：

• 面包
• 咖啡豆
• 牛奶
• 黄油

你可以使用 CSS 将项目符号改为多种默认样式中的一种，或使用你自己选定的图像作为项目符号，甚至可以在显示列表时不使用项目符号，在本篇文章的后面部分我将大致讲述一下具体的做法，更详细的内容将在后面的一篇文章中讲述。

无序列表的标记

无序列表使用一组 <ul></ul> 标签，标签中包裹有很多组 <li></li>：

<ul>
  <li>面包</li>
  <li>咖啡豆</li>
  <li>牛奶</li>
  <li>黄油</li>
</ul>

有序列表

有序列表，或称编号列表，在列表中的项目需要以特定的先后顺序排列时使用。食谱就是有序列表的一个例子，其中列出的烹饪步骤是有严格的先后顺序的：

1. 准备好原料
2. 将原料混合在一起
3. 将混合好的原料放入烘烤盘
4. 在烤箱中烘烤1小时
5. 从烤箱中取出
6. 放置10分钟
7. 端上餐桌

如果将该列表中的项目以不同的顺序排列，这个食谱就混乱了，不再有用：

1. 准备好原料
2. 在烤箱中烘烤1小时
3. 从烤箱中取出
4. 端上餐桌
5. 将混合好的原料放入烘烤盘
6. 放置10分钟
7. 将原料混合在一起

在显示有序列表时，可以用多种数字或字母作为项目编号。在多数浏览器中，默认的有序列表中的项目编号为十进制的数字，不过还有更多的可选项目编号：

• 字母
  • 小写的 ascii 字母（a, b, c…）
  • 大写的 ascii 字母（A, B, C…）
  • 小写的古典希腊字母（α, β, γ…）
• 数字
  • 十进制数字（1, 2, 3…）
  • 前面加有0的十进制数字（01, 02, 03…）
  • 小写的罗马数字（i, ii, iii…）
  • 大写的罗马数字（I, II, III…）
  • 传统的格鲁吉亚数字编号（an, ban, gan…）
  • 传统的亚美尼亚数字编号（mek, yerku, yerek…）

同样地，你也可以使用 CSS 来改变有序列表的样式。

有序列表的标记

有序列表使用一组 <ol></ol> 标签，标签中包裹有很多组 <li></li>：

<ol>
  <li>准备好原料</li>
  <li>将原料混合在一起</li>
  <li>将混合好的原料放入烘烤盘</li>
  <li>在烤箱中烘烤1小时</li>
  <li>从烤箱中取出</li>
  <li>放置10分钟</li>
  <li>端上餐桌</li>
</ol>

不以“1”作为有序列表的起始编号

通过使用带有一个数字属性值的 start 属性，可以让有序列表不以“1”（或 i，I 等）为起始编号，即使你已使用 CSS 的 list-style-type 属性，将有序列表中的编号改为字母或罗马数字也同样可以达到这个效果。如果你有想在一个有序列表中加入一些注释或其它相关信息，就可使用这种方法。以上面那个食谱为例，我们可以将其改为：

<ol>
  <li>准备好原料</li>
  <li>将原料混合在一起</li>
  <li>将混合好的原料放入烘烤盘</li>
</ol>

<p class="article_note">在你将原料放入烘烤盘之前，请先把烤箱预热到180摄氏度或350华氏度。</p>

<ol start="4">
  <li>在烤箱中烘烤1小时</li>
  <li>从烤箱中取出</li>
  <li>放置10分钟</li>
  <li>端上餐桌</li>
</ol>

现在食谱就变成如下的样子：

1. 准备好原料
2. 将原料混合在一起
3. 将混合好的原料放入烘烤盘

在你将原料放入烘烤盘之前，请先把烤箱预热到180摄氏度或350华氏度。

4. 在烤箱中烘烤1小时
5. 从烤箱中取出
6. 放置10分钟
7. 端上餐桌

附注：在最近版本的 HTML 规范中，这个 start 属性已被标注为不赞成使用的属性，这意味着你如果将你的文档类型定义为“严格型”，在其中使用这个属性的话，万维网联盟（W3C）的标记校验器就会提示你文档中存在 HTML 错误。这显得有点奇怪，因为这个属性其实很有用的，而且 CSS 中也没有相应的属性。这说明对 HTML 进行校验是个追求的理想目标，但并不总是完全绝对的和最终的。此外，在正在起草中的 HTML5 规范中，start 属性已不再被标注为不赞成使用的属性（参见 HTML5 和 HTML4 之间的差异这篇文章）。如果你想在文档类型被定义为“严格型”的 HTML 文档中使用这个 start 属性，且需完全通过校验，那你可以使用 CSS 计数器来作为代替。

定义列表

定义列表将列表中的项目与其定义配对显示。例如，如果你想为购物清单中的项目给出定义，你可以像以下显示的那样做：

牛奶

一种白色的液体乳制品。

面包

一种用面粉或玉米粉烘焙而成的食品。

黄油

一种黄色的固体乳制品。

咖啡豆

咖啡树果实中的种子。

每个术语及其定义是一个定义组（或称“名称－值”组）。你可以在定义列表中列出任意数量的定义组，但每个定义组中必须至少有一个术语及一个定义。也就是说，术语必须要有至少一个相对应的定义，定义必须要有至少一个相对应的术语。

你可以将多个术语与一个定义相配对，也可以将多个定义与一个术语相配对。例如，“咖啡”这个术语可以有几种含义，你可以将这几种含义都显示在“咖啡”这个术语项下：

咖啡

一种由炒熟的咖啡豆制成的饮料

一杯咖啡

供应咖啡的一种社交聚会

咖啡色

另一方面，你也可以将多个术语与一个定义相配对。这在显示具有相同含义的一个术语的几个变体时很有用：

苏打水

汽水

充气饮料

可乐

一种甜的碳酸饮料。

定义列表与其它类型的列表不同，它用定义术语和定义描述来替代列表项目。

因此，定义列表使用一组 <dl></dl> 元素，元素中包裹有很多组 <dt></dt> 和 <dd></dd> 标签。你必须将至少一组 <dt></dt> 标签与至少一组 <dd></dd> 相配对；在源文件中，<dt></dt> 标签应当始终位于 <dd></dd> 标签之前。

以下是一个简单的定义列表（其中一个术语只有一个定义）的代码示例：

<dl>
  <dt>术语</dt>
  <dd>术语的定义</dd>
  <dt>术语</dt>
  <dd>术语的定义</dd>
  <dt>术语</dt>
  <dd>术语的定义</dd>
</dl>

其实际渲染出来的样子如下：

术语

术语的定义

术语

术语的定义

术语

术语的定义

在以下这个示例中，我们将多个术语与一个定义相配对，并将多个定义与一个术语相配对，代码如下：

<dl>
  <dt>术语</dt>
  <dd>术语的定义</dd>
  <dt>术语</dt>
  <dt>术语</dt>
  <dd>适用于以上两个术语的定义</dd>
  <dt>具有以下两个定义的术语</dt>
  <dd>术语的第一个定义</dd>
  <dd>术语的第二个定义</dd>
</dl>

其实际渲染出来的样子如下：

术语

术语的定义

术语

术语

适用于以上两个术语的定义

具有以下两个定义的术语

术语的第一个定义

术语的第二个定义

一般而言，将多个术语与一个定义相配对是很少见的，不过知道可以这样做，肯定会有帮助的。

选择列表类型

在决定使用哪种类型的列表时，你通常只需要问自己两个简单的问题即可：

1. 我是在定义术语吗（或是在将名称/值相配对吗）？
   • 如果是，则使用定义列表。
   • 如果不是，则不使用定义列表，然后继续问下一个问题。
2. 列表中项目排列的先后次序重要吗？
   • 如果是，则使用有序列表。
   • 如果不是，则使用无序列表。

HTML 列表和文本之间的差别

你们也许还不清楚 HTML 列表和一些前面带有以手工方式写入的项目符号或编号的文本之间到底有什么差别。差别肯定是存在的，使用 HTML 列表有以下几个优点：

• 如果你必须在一个有序列表中更改列表项目的顺序，你只需在 HTML 中将顺序进行调整即可。而如果你是以手工方式写入项目的编号，则你不得不通篇检查并更改每一个项目的编号，想想这是多烦人的工作。
• 使用 HTML 列表可以让你以适当的方式对列表进行样式化。如果你只是使用混杂有项目符号或编号的文本，你会发现单个项目进行样式化是更为困难的工作。
• 使用 HTML 列表为内容赋予了适当的语义化的结构，并不只是创造出列表的视觉效果。这有一些显著的优点，如能让屏幕阅读器告诉那些视力受损的用户，正在朗读的内容是一个列表，而不是混杂有项目符号或编号的文本。

换句话说，文本和列表是有差别的。使用文本来替代列表不仅会让你做更多的工作，还可能会给阅读你的文档的人造成阅读障碍。因此当你的文档需要一个列表时，你应当使用正确的 HTML 列表。

嵌套列表

一个列表项目可包含另一个完整的列表，这被称为“嵌套”列表。像目录（如本文开头部分列出的内容目录）这些一般就需要使用嵌套列表：

1. 第一章
   1. 第一节
   2. 第二节
   3. 第三节
2. 第二章
3. 第三章

在使用嵌套列表时，有一个关键之处必须牢记，那就是嵌套列表必须和一个特定的列表项目相联系。为在代码中反映这种联系，嵌套列表是要包含在那个列表项目之中的。以上那个目录的源代码如下：

<ol>
  <li>第一章
    <ol>
      <li>第一节</li>
      <li>第二节</li>
      <li>第三节</li>
    </ol>
  </li>
  <li>第二章</li>
  <li>第三章</li>
</ol>

请注意，嵌套列表在 <li> 及包含列表项目的文本（“第一章”）之后起始，在包含有列表项目的 </li> 处结束。由于嵌套列表是定义网站结构的一个很好的方式，它们通常构成网站导航菜单的基础。

从理论上讲，你可以嵌套你希望的任何数量的列表，不过叠加层次过多的嵌套列表可能会造成混乱。对一个很大的列表，你最好还是将其内容拆分到数个带有标题的列表之中，甚至还可以拆分为不同的网页。

一个按步骤编写网页的例子

以下我们来看一个运用你们已经学到的知识按步骤编写网页的例子。请考虑以下这个情景状况：

你正在为 HTML 烹饪学校构建一个小网站。在网站的主页上，将要显示一个分类食谱的列表，由与食谱页面相链接的列表项目组成。每个食谱页面都会列出所需的原料、原料的说明及制作方法。三个大类的食品分别是“蛋糕”（包括“松糕”、“巧克力蛋糕”、“苹果茶蛋糕”的制作食谱）、“饼干”（包括“澳式饼干”、“果酱饼干”和“速融饼干”的制作食谱），以及“速食面包”（包括“丹波面包”和“烤饼”的制作食谱）。客户对列表中的食品大类和食谱的排列先后顺序无特别要求，仅要求能让访问网站的人明确知道：哪些列表项目是食品大类，哪些又是食谱。

现在我们就开始按步骤地构建这个网站。在本部分，我将讲述如何写 HTML 标记，以及如何向列表添加一些样式。关于对 HTML 文档进行样式化的内容，我这里不做详细地讲述，在本课程后面的文章中将详细地讲述这方面的内容。

主页的标记

1. 创建一个包含有文档类型、html 元素、head 元素、body 元素的 HTML 文档，将其保存为 stepbystep-main.html。添加主标题（h1），即“HTML 烹饪学校”，以及副标题（h2），即“食谱”：

   <h1>HTML 烹饪学校</h1>
   
   
   <h2>食谱</h2>

2. 有三个食谱大类需要显示，而它们排列的先后顺序并不重要，因此最适于使用无序列表，请在文档中加入以下代码：

   <h2>食谱</h2>
   <ul>
     <li>蛋糕</li>
     <li>饼干</li>
     <li>速食面包</li>
   </ul>

   将 li 元素缩进了一点只是为了让代码更易读一些，不是一定需要缩进。

3. 现在你需要添加作为子项目的食谱，如“松糕”、“巧克力蛋糕”、“苹果茶蛋糕”都是“蛋糕”这个大类下的子项目。为此你需要在每个大类项目内创建一个嵌套列表。由于子项目排列的前后顺序也不重要，因此适于创建一个嵌套的无序列表。为简便起见，我将让你们把所有这些食谱列表项目，都链接到一个食谱页面（第18章将详细讲述 HTML 链接，访问这个链接，你可以读到关于“链接”的内容）：

   <h2>食谱</h2>
   <ul>
   <li>蛋糕
   <ul>
   <li><a href="/stepbystep-recipe.html">松糕</a></li>
   <li><a href="/stepbystep-recipe.html">巧克力蛋糕</a></li>
   <li><a href="/stepbystep-recipe.html">苹果茶蛋糕</a></li>
   </ul>
   </li>
   <li>饼干
   <ul>
   <li><a href="/stepbystep-recipe.html">澳式饼干</a></li>
   <li><a href="/stepbystep-recipe.html">果酱饼干</a></li>
   <li><a href="/stepbystep-recipe.html">速融饼干</a>      </li>
   </ul>
   </li>
   <li>面包/速食面包
   <ul>
   <li><a href="/stepbystep-recipe.html">丹波面包</a></li>
   <li><a href="/stepbystep-recipe.html">烤饼</a></li>
   </ul>
   </li>
   </ul>

添加一些样式

客户认可这种列表安排，但希望食谱大类前都有一个箭头，来替代项目符号。同时还希望食谱大类在页面上靠左对齐。为此你需要指定一个图像来替代项目符号，然后调整边距/填充距设置。

1. 为避免与网站中的其它列表有抵触，你应该为这个列表添加一个“类”，这样你就能在你的样式表中指定特别的上下文选择符。这个“类”被命名为“recipe-list”是比较合适的。

   <h2>食谱</h2>
   
   
   <ul class="recipe-list">

2. 现在你需要创建一个样式表，并为它添加一些样式规则。首先在你的文档的 head 部分加入起始和结束的 style 标签。

3. 现在将从列表中移除间距。由于按默认设置，一些浏览器为空间元素使用的是 margin 属性，而另一些浏览器为空间元素使用的是 padding 属性， 因此你需要把这两个属性的值都设为 0。在你的 style 标签中加入以下 CSS 代码：

   ul.recipe-list {
     margin-left: 0;
     padding-left: 0;
   }

4. 然后创建一个自定义的项目符号图像，如果你喜欢的话，可以使用我创建的图像（如图1所示）。

   

   图1：自定义的项目符号图像

5. 现在你将从列表中移除项目符号，将项目符号设为列表项目的背景图像。你需要加入一些填充距，这样文字就不会被摆在背景图像的上方。为此你可以在结束 style 标签前加入以下 CSS 代码：

   ul.recipe-list li {
     list-style-type: none;
     background: #fff url("example-bullet.gif") 0 0.4em no-repeat;
     padding-left: 10px;
   }

6. 最后，你将把项目符号放回到嵌套列表中的项目之上，并将背景设为纯白色（第二条规则更为具体，因此将替代那条背景图像规则）。请记住，第一条 CSS 规则将被嵌套列表继承，因此你需要撤销所有的容器设置。在结束 style 标签前加入以下 CSS 代码：

   ul.recipe-list li li {
     list-style-type: disc;
     background: #fff;
   }

页面的最后显示效果应该如图2所示的那样：

图2：完成的主页，其中包含自定义的项目符号图像

你也可以点击这里观看实例（译注，英文原版示例）。

食谱页面

以下我只创建了“松糕”的食谱页面，作为一个示例。你们可以以这个示例页面为模板，自己创建其它食谱页面。客户已用文本形式向你提供了“松糕”的食谱，如下所示（译注，松糕的食谱内容未译）：

Simple Sponge Cake
Ingredients
3 eggs
100g castor sugar
85g self-raising flour

Notes on ingredients:
  Caster Sugar - Finely granulated white sugar.
  Self-raising flour - A pre-mixed combination of flour and leavening agents (usually salt and baking powder).

Method
  1. Preheat the oven to 190°C.
  2. Grease a 20cm round cake pan.
  3. In a medium bowl, whip together the eggs and castor sugar until fluffy.
  4. Fold in flour.
  5. Pour mixture into the prepared pan.
  6. Bake for 20 minutes in the preheated oven, or until the top of the cake springs back when lightly pressed.
  7. Cool in the pan over a wire rack.

食谱页面的标记

1. 创建一个 HTML 文档，将其保存为 stepbystep-recipe.html。在文档中添加以下标题：

   <h1>Simple Sponge Cake</h1>
   <h2>Ingredients</h2>
   <h3>Notes on ingredients</h3>
   <h2>Method</h2>

2. 原料列表中有几个列表项目，它们排列的先后顺序不重要，因此适于使用一个无序列表。将下列代码加入你的 HTML 文档的 body 部分：

   <h2>Ingredients</h2>
   <ul>
   <li>3 eggs</li>
   <li>100g castor sugar</li>
   <li>85g self-raising flour</li>
   </ul>

3. 原料说明用于恰当地定义一些原料究竟是什么。你需要将“原料”这个术语与其定义相配对。这里适于使用一个定义列表。将下列代码加入 HTML 文档中，放在上一个步骤所加入的无序列表之下：

   <h3>Notes on ingredients</h3>
   <dl>
   <dt>Castor Sugar</dt>
   <dd>Finely granulated white sugar.</dd>
   <dt>Self-raising flour</dt>
   <dd>A pre-mixed combination of flour and leavening agents (usually salt and baking powder).</dd>
   </dl>

4. 很明显，蛋糕的制作必须依照一个正确的先后顺序进行，因此蛋糕的制作方法必须使用一个有序列表。将下列代码加入 HTML 文档中，放在定义列表之下：

   <h2>Method</h2>
   <ol>
   <li>Preheat the oven to 190&deg;C.</li>
   <li>Grease a 20cm round cake pan.</li>
   <li>In a medium bowl, whip together the eggs and castor sugar until fluffy.</li>
   <li>Fold in flour.</li>
   <li>Pour mixture into the prepared pan.</li>
   <li>Bake for 20 minutes in the preheated oven, or until the top of the cake springs back when lightly pressed.</li>
   <li>Cool in the pan over a wire rack.</li>
   </ol>

对食谱页面进行样式化

客户认可这种列表安排，但希望原料的定义以粗体显示，从而能增强易读性。在你的 HTML 文档的 head 部分加入下列代码：

<style>
dt {
  font-weight: bold;
}
</style>

页面的最后显示效果应该如图3所示的那样：

图3：完成的食谱页面，其中原料定义以粗体字显示

你也可以点击这里观看页面的实际显示效果。

现在这两个页面就都已创建完成了！

总结

在学完本篇文章后，你应该已经清楚地了解了 HTML 中的三种列表类型。使用一个按步骤编写网页的例子，你应该已经创建出这三种类型的列表，并已学会如何为列表项目加入嵌套列表。

在你知道如何恰当地使用 HTML 列表后，你可能会发现在编写网页时随时都可能使用这些 HTML 列表。网页上很多本应放置在列表中的内容，却只是被包裹在某一个通用元素中，并被加上一些断行标签。这是一个懒惰的工作习惯，其造成的问题远比其解决的问题要多，因此你一定不要这样做！你应当始终创建语义正确的列表，以帮助人们阅读你网站上的内容。这样做是一个良好的习惯，尤其是在你以后需要维护你的网站时更是如此。

延伸阅读

• A List Apart: Taming Lists
• W3C CSS2: list-style-type definition

练习题

• 三种类型的 HTML 列表分别是什么？
• 每一种类型的 HTML 列表分别将在什么情况下使用？你将如何选择 HTML 列表类型？
• 你如何嵌套入列表？
• 为什么你应当使用 CSS，而不是 HTML 来对你的列表进行样式化？

• < 上页
• 下页 >