HTML 教程 / 使用 ul、ol 和 dl 创建与嵌套列表

当元素顺序重要时选择 ol，当顺序无关紧要时选择 ul，对于与描述或值相关联的名称选择 dl。这些元素描述元素之间的关系；它们的默认编号和项目符号仅用于显示。

何时应使用 ol、ul 或 dl？

ol 和 ul 中的元素使用 li。在一个 dl 中，dt 提供名称，dd 提供其描述或值。

在同一个文件中尝试三种列表类型

将此代码保存为 HTML 文件，并在浏览器中打开它，以比较列表的默认显示。CSS 会优先使用已安装的 Noto Sans KR 字体；未安装时，浏览器会选择无衬线备用字体。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML 列表</title>
    <style>
      body { font-family: "Noto Sans KR", sans-serif; }
    </style>
  </head>
  <body>
    <h1>准备一次旅行</h1>
    <h2>装备</h2>
    <ul>
      <li>水</li>
      <li>地图</li>
    </ul>
    <h2>步骤</h2>
    <ol>
      <li>选择旅行日期</li>
      <li>整理行李</li>
    </ol>
    <h2>术语</h2>
    <dl>
      <dt>出发</dt>
      <dd>旅行开始的日子</dd>
      <dt>到达</dt>
      <dd>到达目的地的日子</dd>
    </dl>
  </body>
</html>

CSS 可以更改缩进和标记样式。重要的区别在于顺序或名称-描述关系，这是通过 HTML 表达的。

更改有序列表的编号

一个 ol 默认从 1 开始。它的属性 start 会改变第一个数字；在特定 li 上使用 value 会改变该元素的编号。

<ol start="5">
  <li>第五步</li>
  <li value="9">第九步</li>
  <li>第十步</li>
</ol>

标记是 5、9 和 10。如果编号需要倒序，请使用 reversed。

<ol reversed>
  <li>第三个元素</li>
  <li>第二个元素</li>
  <li>第一个元素</li>
</ol>

这个列表有三个列表项；未指定起始值时，逆序编号依次为 3、2、1。请检查编号是否符合预期顺序。

编号属性不会将无序集合转化为有意义的序列。请首先根据意义选择列表类型。

使用 dl 关联名称与描述

一个 dl 不仅限于词典定义。它可以将产品属性及其值或日期及其描述关联起来。请让每个名称 dt 与对应描述 dd 的关联保持清晰。

<dl>
  <dt>营业时间</dt>
  <dd>工作日，上午9点到下午6点</dd>
  <dt>关闭</dt>
  <dd>星期六和星期日</dd>
</dl>

这些是虚构的营业时间，仅用于展示标记。

在列表项内嵌套列表

子列表应包含在其所属的 li 父元素内。这里服装是旅行装备的一部分。请参见 HTML 语法 ，了解从内到外关闭嵌套元素的规则。

<ul>
  <li>水</li>
  <li>衣物
    <ul>
      <li>夹克</li>
      <li>袜子</li>
    </ul>
  </li>
</ul>

您也可以在一个ol中嵌套一个ul。在这个示例中，主要步骤的先后顺序有意义，但两项行李物品不必按固定顺序排列。

<ol>
  <li>选择旅行日期</li>
  <li>整理行李
    <ul>
      <li>衣物</li>
      <li>洗漱用品</li>
    </ul>
  </li>
  <li>去旅行</li>
</ol>

不要将子列表直接放在外部ul或ol下；将它们放在相应的li中。此外，避免将整个列表放在p中。列表和段落是独立的结构。

创建列表的检查清单

• 在选择ol或ul之前，请决定元素的顺序是否会改变其意义。
• 对有序或无序列表中的每个元素使用 li。
• 在描述列表中阐明 dt–dd 的关系。
• 在其父元素 li 内插入子列表，并使用 CSS 来设置标记的样式。

有关更多示例，请参阅 MDN HTML 列表指南。要在实际页面集合中使用列表，请从 创建一个小型多页面网站 的文件结构开始。