HTML 的＜dl＞元素

原创于 2026-07-29 09:31:12 发布 · 223 阅读

本内容遵循CC 4.0 BY-SA版权协议

1. 引言

在 HTML 中，列表是组织信息的常用方式。除了我们熟知的 <ul>（无序列表）和 <ol>（有序列表）之外，HTML 还提供了一个专门用于呈现术语及其定义的列表元素——<dl>（Description List，定义列表）。它不仅是简单的视觉排列，更承载了“术语-描述”的语义关系，对于提升网页的可访问性和 SEO 友好性至关重要。

本文将深入探讨 <dl> 元素的结构、语义、使用方法、CSS 样式技巧以及在实际开发中的最佳实践，帮助你彻底掌握这个强大而常被忽视的 HTML 元素。

2. `<dl>` 元素是什么？

<dl> 是 “Description List”（定义列表）的缩写。它是一个容器元素，用于创建一个术语及其对应描述的关联列表。与 <ul>/<li> 不同，<dl> 的子元素不是单一的 <li>，而是由两种特定元素配对组成：

<dt> (Description Term): 代表被定义的术语。
<dd> (Description Details): 代表该术语的描述、定义或值。

一个 <dt> 后面可以跟一个或多个 <dd>，清晰地表达了“一对多”的从属关系。

基本示例：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于描述网页的表现和布局。</dd>
  
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于实现网页的交互行为。</dd>
</dl>

3. 核心结构：`<dt>` 与 `<dd>`

<dl> 的有效子元素只能是 <dt> 和 <dd>。它们必须按照一定的逻辑顺序嵌套在 <dl> 内部。

3.1 `<dt>` (Description Term)

作用：标记一个需要被解释或定义的术语、名称或标签。
使用规则：
- 必须放在 <dl> 内部。
- 后面通常紧跟一个或多个 <dd> 元素。
- 一个 <dl> 中可以包含多个 <dt>，每个代表一个新的定义项。

3.2 `<dd>` (Description Details)

作用：提供与前面最近的 <dt> 术语相关的描述、定义、解释或值。
使用规则：
- 必须放在 <dl> 内部。
- 必须跟在 <dt> 或另一个 <dd> 之后。
- 一个 <dt> 可以对应多个 <dd>，用于提供多个相关的描述点。

3.3 结构关系图

4. 基本用法与示例

4.1 经典用例：词汇表

这是 <dl> 最直接的用途。

<dl>
  <dt>语义化 HTML</dt>
  <dd>使用恰当的 HTML 元素来传达内容的结构和含义，而不仅仅是表现样式。</dd>
  
  <dt>ARIA</dt>
  <dd>无障碍富互联网应用套件，一组用于改善残障人士可访问性的属性。</dd>
  <dd>例如 `role`、[`aria-label`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.label.md) 等属性。</dd> <!-- 一个术语对应多个描述 -->
</dl>

4.2 展示元数据或键值对

非常适合展示产品参数、设置选项等。

<dl>
  <dt>产品型号</dt>
  <dd>X-Pro 2025</dd>
  
  <dt>处理器</dt>
  <dd>Intel Core i7-14700H</dd>
  
  <dt>内存</dt>
  <dd>32GB DDR5</dd>
  
  <dt>颜色</dt>
  <dd>深空灰</dd>
  <dd>月光银</dd> <!-- 一个键对应多个值 -->
</dl>

4.3 问答 (FAQ) 列表

用 <dt> 表示问题，<dd> 表示答案。

<h2>常见问题解答</h2>
<dl>
  <dt>如何重置密码？</dt>
  <dd>请访问登录页面，点击“忘记密码”链接，按照邮件指引操作。</dd>
  
  <dt>服务支持哪些支付方式？</dt>
  <dd>我们支持支付宝、微信支付、信用卡和 PayPal。</dd>
</dl>

5. 使用 CSS 美化 `<dl>`

默认情况下，浏览器通常将 <dd> 渲染为带有一定左外边距 (margin-left)。我们可以通过 CSS 实现更美观、灵活的布局。

5.1 水平布局（类似表格）

让术语和描述在同一行显示。

dl.horizontal {
  display: grid;
  grid-template-columns: max-content 1fr; /* 第一列适应内容，第二列占满剩余空间 */
  gap: 1rem 2rem; /* 行间距 1rem，列间距 2rem */
}

dl.horizontal dt {
  grid-column: 1; /* 术语放在第一列 */
  font-weight: bold;
  text-align: right; /* 右对齐更美观 */
}

dl.horizontal dd {
  grid-column: 2; /* 描述放在第二列 */
  margin: 0; /* 清除默认左边距 */
}

应用效果：

<dl class="horizontal">
  <dt>姓名：</dt><dd>张三</dd>
  <dt>邮箱：</dt><dd>zhangsan@example.com</dd>
  <dt>职位：</dt><dd>前端开发工程师</dd>
</dl>

5.2 紧凑垂直布局

dl.compact dt {
  font-weight: bold;
  color: #2c3e50;
  margin-top: 1em; /* 为每个术语组增加上间距 */
}

dl.compact dd {
  margin-left: 1.5em; /* 控制描述缩进 */
  color: #555;
  line-height: 1.6;
}

6. 语义化优势与最佳实践

6.1 为什么使用 `<dl>` 而不是 `<div>` 或 `<table>`？

语义明确：清晰地向浏览器、屏幕阅读器和搜索引擎声明了“术语-描述”的关系。
提升可访问性：屏幕阅读器可以识别这种结构，并可能提供导航提示（如“术语列表”）。
SEO 友好：帮助搜索引擎更好地理解页面内容的组织结构。
代码简洁：比用一堆 <div> 嵌套更简洁，意图更清晰。

6.2 最佳实践

不要滥用：仅用于真正的术语-描述场景，不要仅仅为了视觉上的缩进而使用。
保持配对：确保每个 <dt> 至少有一个对应的 <dd>。
样式重置：记得在 CSS 中重置 <dd> 的默认 margin-left 以适应你的设计。
结合 ARIA：在复杂的动态内容中，可以适当使用 aria-labelledby 或 aria-describedby 来增强关联，但 <dl> 本身已具备良好的原生语义。