HTML 定义列表 <dl>

Begindev 编辑部 March 25, 2026

定义列表提供了一种结构化的方式来展示术语及其对应的定义或描述。

与主要关注项目顺序的无序列表（<ul>）和有序列表（<ol>）不同，定义列表旨在展示术语与其含义之间的关系。

这使得它们非常适合用于术语表、常见问题解答 (FAQ) 或任何需要将名称与详细解释关联起来的内容。理解如何有效地使用 <dl>、<dt> 和 <dd> 标签，将允许你创建语义更丰富、更易访问的 HTML 文档。

1 理解定义列表：`<dl>` 标签

<dl> 标签代表 "Definition List"（定义列表）。

作用：它是整个定义列表结构的容器。
结构：把它想象成父元素，包裹着所有的术语和描述。
规则：你必须始终将 <dt>（定义术语）和 <dd>（定义描述）标签包裹在 <dl> 标签内，以创建一个有效的列表。

示例：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，是设计用于在网页浏览器中显示的文档的标准标记语言。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表现形式。</dd>
</dl>

在这个例子中，<dl> 标签包含了整个列表，其中包括两个术语（HTML 和 CSS）及其各自的定义。

2. 定义术语：`<dt>` 标签

<dt> 标签代表 "Definition Term"（定义术语）。

作用：它包含你想要定义或描述的名词/术语。
位置：每个 <dt> 标签应直接放在 <dl> 标签内。
多对一：你可以在一个 <dd> 之前放置多个 <dt> 标签，表示多个术语共享同一个定义。

多个术语的示例：

<dl>
  <dt>语义化 HTML</dt>
  <dt>有意义的 HTML</dt>
  <dd>使用标签来传达内容的含义，而不仅仅是其外观表现的 HTML。</dd>
</dl>

在这种情况下，“语义化 HTML”和“有意义的 HTML”共享同一个定义。

3. 提供描述：`<dd>` 标签

<dd> 标签代表 "Definition Description"（定义描述），即定义本身。

作用：它为前面的 <dt> 标签定义的术语提供解释或描述。
位置：像 <dt> 一样，<dd> 标签必须直接放在 <dl> 标签内。

带有详细描述的示例：

<dl>
  <dt>无障碍性 (Accessibility)</dt>
  <dd>Web 无障碍性是指确保没有障碍阻止残障人士、情境性残障人士以及受带宽和网速限制的人群与万维网上的网站进行交互或访问的包容性实践。</dd>
</dl>

4. 嵌套与结构

虽然你不能直接将 <dl> 元素相互嵌套，但你可以在 <dt> 和 <dd> 标签内包含其他 HTML 元素，以增加结构和格式。这允许更复杂的定义和更丰富的内容。

在 <dd> 内部使用 HTML 元素的示例：

<dl>
  <dt>HTML</dt>
  <dd>
    <p>超文本标记语言，是设计用于在网页浏览器中显示的文档的标准标记语言。</p>
    <p>它可以由 CSS 和 JavaScript 等技术辅助。</p>
  </dd>
</dl>

在这个例子中，<p>（段落）标签被用在 <dd> 标签内，将定义分成了多个段落。

5. 实战示例与演示

让我们探索一些定义列表的高效用法：

5.1 术语表 (Glossary)

定义列表是创建术语表的理想选择，提供了一种清晰、有条理的方式来定义关键概念。

<dl>
  <dt>算法 (Algorithm)</dt>
  <dd>计算机为解决问题而遵循的一组规则或指令。</dd>
  
  <dt>Bug</dt>
  <dd>计算机程序中导致其产生不正确或意外结果的错误。</dd>
  
  <dt>调试 (Debugging)</dt>
  <dd>查找并修复计算机程序中 Bug 的过程。</dd>
</dl>

5.2 常见问题解答 (FAQs)

你可以使用定义列表来构建 FAQ，其中问题是术语，答案是描述。

<dl>
  <dt>什么是 HTML？</dt>
  <dd>HTML 代表超文本标记语言。它是用于创建网页的标准标记语言。</dd>
  
  <dt>什么是 CSS？</dt>
  <dd>CSS 代表层叠样式表。它用于设置 HTML 元素的样式并控制网页的布局。</dd>
  
  <dt>什么是 JavaScript？</dt>
  <dd>JavaScript 是一种编程语言，使你能够创建动态更新的内容、控制多媒体、动画图像以及几乎所有其他内容。</dd>
</dl>

5.3 描述产品特性

定义列表可用于突出显示产品或服务的功能。

<dl>
  <dt>响应式设计</dt>
  <dd>确保你的网站适应不同的屏幕尺寸和设备，为所有用户提供最佳的观看体验。</dd>
  
  <dt>跨浏览器兼容性</dt>
  <dd>你的网站将在所有主流网络浏览器（包括 Chrome, Firefox, Safari 和 Edge）上无缝运行。</dd>
  
  <dt>SEO 优化</dt>
  <dd>我们实施最新的 SEO 技术，以提高你的网站在搜索引擎结果中的可见度。</dd>
</dl>

1 理解定义列表：<dl> 标签

2. 定义术语：<dt> 标签

3. 提供描述：<dd> 标签