HTML 语义化标签：列表（ol、ul、dl）详解与实用教程（15）

1. 引言

在前面的学习中，我们已经接触过一些常见的语义化标签。今天，我们要讨论的是「列表」。

你可能会问，什么是列表呢？其实很简单。想象一下，当你去超市购物时，通常会先写一张购物清单：

• 第一项买牛奶
• 第二项买面包
• 第三项买水果

这样的清单就是一个「列表」。

在网页中，我们同样需要把一组内容整齐地呈现出来，而 HTML 就为我们准备了对应的标签。

2. 列表的概念

列表（List） 就是一组条目（Item）的集合，用来展示具有相同属性或逻辑关系的信息。

在日常生活中，我们会经常使用列表：

• 购物清单
• 待办事项
• 课程表
• 网站菜单

在 HTML 中，列表主要分为三类：

1. 有序列表（Ordered List）：带顺序编号的列表。
2. 无序列表（Unordered List）：没有顺序，只是用符号标识的列表。
3. 定义列表（Definition List）：用来解释或说明某个词语的含义。

3. 有序列表（Ordered List）

3.1 标签含义（先认识“谁是谁”）

• <ol>：Ordered List，有序列表容器，负责“这是一串按顺序排列的条目”。
• <li>：List Item，列表中的单条内容（每一行/每一项）。

最小可运行示例：

<ol>
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ol>

3.2 显示效果（浏览器里到底会看到什么）

• 每个 <li> 前面会自动出现编号：1、2、3……
• 编号是自动递增的：你删掉第二项，第三项会自动变成“2”。
• 整个列表会有一点缩进（不同浏览器缩进宽度略有差异，这是正常的）。
• 即使你在 <li> 里没有写数字，浏览器也会给你自动加数字；数字只是“显示”，真实的内容还是你写在 <li> 里的文字。
• 刷新页面或复制到别的浏览器，编号逻辑不变（但缩进/样式可能略有不同，这属于浏览器默认样式差异）。

💡 小实验（建议你亲手试试）
把上面的第三个 <li> 删掉再刷新页面，你会发现：

• 原来的 1、2、3 变成了 1、2（自动对齐顺序，不需要你手动改数字）。

3.3 使用场景（什么情况必须用 <ol>）

用 <ol> 的关键点：“顺序有意义、先后不能乱”。比如：

1. 操作步骤/教程（第一步、第二步……）
2. 排行榜/名次（Top 10）
3. 时间轴/流程（先做A，再做B）
4. 考试或任务清单（必须按顺序完成）

反过来，如果条目只是平级罗列、顺序不重要（比如功能清单、联系方式等），就不要用 <ol>，而是用 <ul>（无序列表）。

3.4 具体示例（从生活任务到网页步骤）

示例 A：做一杯手冲咖啡（顺序不可乱）

<ol>
  <li>烧水至 92℃ 左右</li>
  <li>研磨咖啡豆（粉水比约 1:15）</li>
  <li>润湿滤纸并倒掉热水</li>
  <li>注水闷蒸 30 秒</li>
  <li>分段注水至目标总量</li>
  <li>等待滴滤完成，享用</li>
</ol>

为什么用 <ol>：如果你把“润湿滤纸”放到“分段注水”后面，就出错了——顺序是核心语义。

示例 B：活动报名流程（流程有先后）

<ol>
  <li>填写报名表</li>
  <li>提交资料审核</li>
  <li>支付报名费用</li>
  <li>收到确认邮件</li>
</ol>

3.5 进阶但实用：改变编号样式/起始值/倒序

有时你会想用 a、A、i、I 编号，或从 5 开始，或来个倒数计时。HTML 自带属性就能做到（不需要 JS）：

1. 把编号换成小写英文字母（a, b, c…）

<ol type="a">
  <li>第一项</li>
  <li>第二项</li>
</ol>

2. 从指定数字开始（比如从 5 开始）

<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>

3. 倒序编号（6、5、4、3、2、1…）

<ol reversed>
  <li>倒序第 6</li>
  <li>倒序第 5</li>
  <li>倒序第 4</li>
</ol>

4. （可选）精确控制某一项的编号
   有时你需要让某个 <li> 单独指定序号，可以用 value（HTML5 允许在 <li> 上使用）：

<ol>
  <li>第 1 项</li>
  <li value="10">这项强制显示为 10</li>
  <li>自动接着 11</li>
</ol>

提醒：这些只是“显示编号”的控制；语义依然是“有序的列表”。

3.6 语义与可访问性（看不见的“正确”）

• 选择 <ol> 是为了表达“顺序重要”。这对搜索引擎、读屏软件（无障碍）都更友好：
  • 读屏软件会读出“有 6 项的有序列表”，并按编号逐项朗读。
  • 搜索引擎更容易理解结构（不会直接让你“SEO加分”，但能提升可读性与结构清晰度）。
• 不要用 <ul> + CSS 把圆点改成数字来“假装有序”，这会丢失语义。

3.7 常见坑（新手最容易踩的点）

1. 用换行 <br> + 手写“1. 2. 3.”
   这不是列表，编号不会自动处理、也不语义化。
2. 忘记写 <li>，直接往 <ol> 里面塞文字
   浏览器可能会容错，但这是错误写法。
3. 顺序不重要却用 <ol>
   这会误导读者/读屏器；应该用 <ul>。
4. 嵌套别忘了语义
   子步骤用嵌套 <ol> 更清晰，例如步骤 2 下还有 “2.1 / 2.2”。

4. 无序列表（Unordered List）

4.1 标签含义（先搞清楚名字）

• <ul>：Unordered List，无序列表容器。它告诉浏览器：里面的内容是一组没有先后顺序的条目。
• <li>：List Item，列表项，和有序列表里用法一样，用来表示列表中的一条内容。

注意：<li> 既可以放在 <ol>（有序列表）里，也可以放在 <ul>（无序列表）里。只是 <ul> 不会显示数字，而是显示一个符号。

4.2 显示效果（浏览器会渲染成什么样子）

写一段代码：

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

浏览器里的效果是：

• HTML
• CSS
• JavaScript

特点：

1. 每一项前面会出现一个小圆点（•）。
2. 列表整体有一个缩进。
3. 不论写多少个 <li>，前面的符号都是一样的（不会像 <ol> 那样递增编号）。
4. 符号的样式（圆点、方块、空心圆）在不同浏览器可能不太一样，但大多数情况下默认是黑色小圆点。

4.3 使用场景（什么时候用 <ul>）

核心逻辑：当条目的先后顺序不重要，只是平等罗列，就应该用 <ul>。

常见应用：

• 网站导航菜单 <ul> <li>首页</li> <li>产品</li> <li>服务</li> <li>联系我们</li> </ul>
• 功能列表（产品特点、优势点）
• FAQ 问答（问题条目）
• 联系方式（电话、邮箱、地址）

💡 小技巧：实际开发中，<ul> 使用频率远高于 <ol>。因为大部分网站内容并不强调顺序，而是并列展示。

4.4 显示符号的变化

默认是小圆点，但你可以通过 CSS 改变样式：

ul {
  list-style-type: square; /* 小方块 */
}

常见的取值有：

• disc（默认：实心圆点）
• circle（空心圆点）
• square（小方块）
• none（去掉符号）

例子（无符号导航）：

ul {
  list-style-type: none; /* 去掉符号 */
  padding: 0;            /* 去掉缩进 */
}

👉 这样 <ul> 就可以被用作纯粹的菜单结构，而不会出现点点。

4.5 无序列表的嵌套（子项列表）

你可以在一个 <li> 里面再嵌套一个 <ul>：

<ul>
  <li>前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端</li>
</ul>

效果是：

• 前端
  • HTML
  • CSS
  • JavaScript
• 后端

特点：

• 子列表会自动缩进一层。
• 子列表的符号样式会自动变化（小圆点 → 小方块 → 空心圆），层级不同符号不同，帮助你区分层级。

4.6 常见坑（新手容易出错的地方）

1. 忘记写 <li>，直接在 <ul> 里写文字
   浏览器可能会渲染，但语义是错误的。
2. 当内容有明确顺序时还用 <ul>
   例如「第一步：注册 → 第二步：付款 → 第三步：确认」就应该用 <ol>，而不是 <ul>。
3. 去掉符号后就当作“排版容器”乱用 <ul>
   这种写法很常见，但更推荐用 <div> + CSS 来布局，<ul> 还是应该表示“并列的内容项”。

4.7 小练习

把下面的购物清单写成一个无序列表：

• 苹果
• 香蕉
• 橙子
• 牛奶

答案：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>牛奶</li>
</ul>

5. 定义列表（Definition List）

5.1 标签含义

定义列表用于表达「术语 + 解释说明」的关系。
它由三个标签组成：

• <dl>：Definition List，定义列表的整体容器。
• <dt>：Definition Term，表示要解释的“术语”或“关键词”。
• <dd>：Definition Description，表示术语的“解释说明”。

这三者总是成套使用：

• <dl> 外层包住所有内容。
• <dt> 表示要解释的词。
• <dd> 表示对这个词的解释。

5.2 显示效果（浏览器里会看到什么）

示例：

<dl>
  <dt>结构</dt>
  <dd>网页的布局，用来规定标题、段落、区域等内容。</dd>

  <dt>表现</dt>
  <dd>网页的外观效果，包括颜色、字体、大小等，由 CSS 控制。</dd>

  <dt>行为</dt>
  <dd>网页的交互功能，例如按钮点击、表单验证，由 JavaScript 控制。</dd>
</dl>

👉 浏览器显示效果通常是这样的：

结构
网页的布局，用来规定标题、段落、区域等内容。

表现
网页的外观效果，包括颜色、字体、大小等，由 CSS 控制。

行为
网页的交互功能，例如按钮点击、表单验证，由 JavaScript 控制。

特点：

1. <dt> 的文字会独占一行，通常是加粗显示。
2. <dd> 会在下一行缩进一些，显示为“解释内容”。
3. 同一个 <dt> 可以有多个 <dd>，表示对一个术语的多个解释。

5.3 使用场景

定义列表的语义比较特殊，一般出现在：

• 词汇表/术语表（Glossary）
• FAQ 常见问题（问题 → 解答）
• 产品参数说明（参数名 → 参数值/解释）
• 书籍/文章中的概念解释

举例：

<dl>
  <dt>CPU</dt>
  <dd>中央处理器，计算机的核心运算单元。</dd>
  <dd>常被称为计算机的大脑。</dd>
</dl>

👉 显示效果：
CPU
中央处理器，计算机的核心运算单元。
常被称为计算机的大脑。

5.4 定义列表的嵌套（进阶）

有时你可能需要在一个解释里再放更多信息，这时可以嵌套 <ul> 或 <ol>：

<dl>
  <dt>前端三件套</dt>
  <dd>
    <ul>
      <li>HTML：负责结构</li>
      <li>CSS：负责样式</li>
      <li>JavaScript：负责交互</li>
    </ul>
  </dd>
</dl>

👉 显示效果：
前端三件套

• HTML：负责结构
• CSS：负责样式
• JavaScript：负责交互

5.5 常见坑（容易搞混的地方）

1. 把 <dl> 当成 <ul> 用
   有些新手写导航菜单时错用了 <dl>，其实应该用 <ul>。
2. 没有 <dt> 就写 <dd>
   解释说明必须对应某个关键词，不能单独存在。
3. 滥用 <dl> 代替表格
   <dl> 不是用来做表格的，参数对照表还是建议用 <table>。

5.6 小练习

请把下面这段文字写成定义列表：

浏览器：用来访问网页的软件，例如 Chrome、Firefox、Safari。
服务器：存放网页文件并对外提供访问的计算机。

答案：

<dl>
  <dt>浏览器</dt>
  <dd>用来访问网页的软件，例如 Chrome、Firefox、Safari。</dd>

  <dt>服务器</dt>
  <dd>存放网页文件并对外提供访问的计算机。</dd>
</dl>

6. 列表的嵌套（Nested Lists）

6.1 什么是嵌套？

嵌套的意思是：在一个列表项 <li> 里面，再放进另一个完整的列表（可以是 <ul>、<ol>，甚至 <dl>）。
这样就能表示层级关系——大项下面有小项。

6.2 基本示例

代码示例：

<ul>
  <li>前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端</li>
</ul>

👉 浏览器显示效果：

• 前端
  • HTML
  • CSS
  • JavaScript
• 后端

特点：

1. 子列表自动缩进一层，比父列表靠右。
2. 符号样式会改变：通常第一层是实心圆点，第二层变成小方块，第三层可能变成空心圆。
3. 嵌套不限层级，理论上可以无限嵌套，但太多层会影响可读性。

6.3 有序列表嵌套

同样可以在有序列表 <ol> 里嵌套另一个 <ol>：

<ol>
  <li>准备工作
    <ol>
      <li>安装浏览器</li>
      <li>安装 VS Code</li>
    </ol>
  </li>
  <li>开始写代码</li>
  <li>运行并调试</li>
</ol>

👉 显示效果：

1. 准备工作
   1. 安装浏览器
   2. 安装 VS Code
2. 开始写代码
3. 运行并调试

💡 注意：第二层会重新从 1 开始编号，而不是继续 3、4、5。

6.4 混合嵌套

不同类型的列表也可以互相嵌套：

<dl>
  <dt>前端三件套</dt>
  <dd>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </dd>
</dl>

👉 显示效果：
前端三件套

• HTML
• CSS
• JavaScript

6.5 使用场景

• 知识点分层（大主题 → 子主题 → 具体内容）
• 导航菜单的二级目录（例如“产品中心 → 打印机/配件/耗材”）
• 步骤中的子步骤（例如“准备工作 → 安装浏览器 / 安装编辑器”）

6.6 注意事项（避免掉坑）

1. 不要嵌套太深：超过 2～3 层就容易难读，推荐使用标题或表格代替。
2. 注意语义正确：
   • “顺序很重要” → 用 <ol>
   • “只是并列罗列” → 用 <ul>
   • “词语+解释” → 用 <dl>
3. 样式可用 CSS 调整：缩进距离、符号样式都能自定义。

示例：让所有嵌套列表用相同的圆点样式：

ul ul {
  list-style-type: disc;
}

6.7 小练习

写一个「三层嵌套」的购物清单：

• 水果
  • 苹果
    1. 红富士
    2. 青苹果
  • 香蕉
• 饮料
  • 牛奶
  • 可乐

答案：

<ul>
  <li>水果
    <ul>
      <li>苹果
        <ol>
          <li>红富士</li>
          <li>青苹果</li>
        </ol>
      </li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>饮料
    <ul>
      <li>牛奶</li>
      <li>可乐</li>
    </ul>
  </li>
</ul>

7. 实际应用：导航菜单

7.1 为什么用列表做菜单？

在网页开发中，导航菜单是最常见的结构之一。
例如：网站顶部的横向菜单、侧边栏的目录、底部的快捷链接。

这些菜单本质上就是“一组并列的选项”，而这正好符合列表（尤其是 <ul> 无序列表）的语义：

• 每一项都是平等的（首页、产品、服务、联系我们）。
• 没有先后顺序（不像步骤说明必须 1、2、3）。
• 结构清晰，方便搜索引擎和读屏软件理解。

7.2 最简单的导航菜单

代码示例：

<ul>
  <li>首页</li>
  <li>关于我们</li>
  <li>产品中心</li>
  <li>联系我们</li>
</ul>

👉 浏览器默认效果：

• 每个菜单项前面会有圆点。
• 纵向排列，每项占一行。

虽然“看起来不太像菜单”，但结构上已经对了。只需要 CSS 美化，就能变成专业的导航栏。

7.3 把菜单变横向

通过 CSS 控制 <li> 的排列方式，就能让它们横着排：

ul {
  list-style-type: none; /* 去掉圆点 */
  padding: 0;
  margin: 0;
}

ul li {
  display: inline;       /* 让 <li> 横向排列 */
  margin-right: 20px;    /* 每个菜单项之间留点间距 */
}

👉 应用后效果：
首页 关于我们 产品中心 联系我们

这就是最常见的网站顶部导航栏。

7.4 给菜单加链接

真正的菜单不只是文字，还要能点击。我们只需在 <li> 里嵌套 <a> 标签：

<ul>
  <li><a href="index.html">首页</a></li>
  <li><a href="about.html">关于我们</a></li>
  <li><a href="products.html">产品中心</a></li>
  <li><a href="contact.html">联系我们</a></li>
</ul>

👉 点击时会跳转到对应页面。

💡 小技巧：可以给 <a> 添加 CSS，让它们看起来更像按钮或导航链接（比如加颜色、悬停效果）。

7.5 二级菜单（下拉导航）

利用 嵌套列表 可以轻松做二级菜单：

<ul>
  <li>产品中心
    <ul>
      <li><a href="printer.html">3D 打印机</a></li>
      <li><a href="scanner.html">3D 扫描仪</a></li>
      <li><a href="engraver.html">激光雕刻机</a></li>
    </ul>
  </li>
  <li>关于我们</li>
  <li>联系我们</li>
</ul>

👉 默认情况下，二级菜单会直接显示在下方。配合 CSS/JavaScript，就能实现“鼠标悬停才展开”的效果。

7.6 为什么不用 <div> 做菜单？

很多新手喜欢直接用 <div> 加 <a> 来写导航菜单，看起来效果差不多，但语义性差：

• 搜索引擎和读屏器更难理解。
• 不符合 HTML 的最佳实践。

所以：
✅ 推荐：<ul><li><a></a></li></ul>
❌ 不推荐：<div><a></a></div><div><a></a></div>

7.7 小练习

请把下面的导航写成一个列表：

• 首页（链接到 index.html）
• 服务（链接到 services.html）
• 博客（链接到 blog.html）
• 联系我们（链接到 contact.html）

答案：

<ul>
  <li><a href="index.html">首页</a></li>
  <li><a href="services.html">服务</a></li>
  <li><a href="blog.html">博客</a></li>
  <li><a href="contact.html">联系我们</a></li>
</ul>