当前位置：首页 > news >正文

HTML `＜dl＞` 标签揭秘：名值对列表语义标记优势多，通用性强！

news 2026/5/24 13:41:30

菜单

### 链接
- [主页](/)
- [写作](/blog/)
- [百科](/encyclopedia/)
- [关于](/about/)
- [友情链接](/blogroll/)
- [Mastodon](https://front-end.social/@ben)
- [Bluesky](https://bsky.app/profile/benmyers.dev)

### 设置
主题：浅色深色系统
动画：开启关闭系统
滚动：平滑瞬间

跳转到内容 [Ben Myers ](/)

[写作](/blog/) [百科](/encyclopedia/) [关于](/about/) [友情链接](/blogroll/) [Mastodon](https://front-end.social/@ben) [Bluesky](https://bsky.app/profile/benmyers.dev)

菜单

引言

嘿，你知道吗？`

`，也就是描述列表（description list）元素，常常被大家低估啦！它可是用来表示一组名值对列表的，这可是一种常见的 UI 模式，而且具有 **极强的通用性** 呢！比如说，你可能在好多地方都见过类似这样的布局：

这些例子可都展示了名值对列表哦。你说不定还见过用名值对列表来描述住宿设施、列出每月租金的各项费用，或者在技术术语词汇表中使用呢。这些情况都能用 `

` 元素来表示。

那么，具体该怎么做呢？

描述列表的结构

我一直说 “`

`”，其实这里涉及三个不同的元素：`

`、`` 和 `

`。

首先是 `

`，它就是描述列表，就跟用 `

` 表示无序列表，用 `
1. ` 表示有序列表是一个道理。
```
<dl>
```
```
</dl>
```
  是不是很简单呀？
  接下来，我们要添加一个名值对。我们用 `
  `（description term 的缩写）表示名称，用 `
  `（description detail 的缩写）表示值。
```
<dl>
```
```
<dt>标题</dt>
```
```
<dd>《基于 Web 标准进行设计》</dd>
```
```
</dl>
```
  要是想在列表里再添加一个名值对，那就再添加一个 `
  ` 和 `
  `：
```
<dl>
```
```
<dt>标题</dt>
```
```
<dd>《基于 Web 标准进行设计》</dd>
```
```
<dt>出版商</dt>
```
```
<dd>New Riders Pub；第 3 版（2009 年 10 月 19 日）</dd>
```
```
</dl>
```
  不过，如果一个术语有多个值该咋办呢？比如说，这本书有好几个作者。
  这也没问题！一个 `
  ` 可以对应多个 `
  `：
```
<dl>
```
```
<dt>标题</dt>
```
```
<dd>《基于 Web 标准进行设计》</dd>
```
```
<dt>作者</dt>
```
```
<dd>Jeffrey Zeldman</dd>
```
```
<dd>Ethan Marcotte</dd>
```
```
<dt>出版商</dt>
```
```
<dd>New Riders Pub；第 3 版（2009 年 10 月 19 日）</dd>
```
```
</dl>
```
  对于大多数基本用例，描述列表结构还有最后一点得注意：要是出于样式原因，想把一个 `
  ` 及其对应的 `
  ` 包裹起来，该怎么做呢？
  在这种情况下，规范允许用 `
  ` 包裹一个 `` 及其对应的 `
  `：
```
<dl>
```
```
<div>
```
```
<dt>标题</dt>
```
```
<dd>《基于 Web 标准进行设计》</dd>
```
```
</div>
```
```
<div>
```
```
<dt>作者</dt>
```
```
<dd>Jeffrey Zeldman</dd>
```
```
<dd>Ethan Marcotte</dd>
```
```
</div>
```
```
<div>
```
```
<dt>出版商</dt>
```
```
<dd>New Riders Pub；第 3 版（2009 年 10 月 19 日）</dd>
```
```
</div>
```
```
</dl>
```
  像这样的包裹 `
  ` 是唯一能包裹 ``/`
  ` 组的元素。
  就是这么回事！这就是描述列表的结构，也是 HTML 用来标记名值对组列表的语义方式。
  为什么我们需要为其添加语义呢？
  在了解 `
  `、`` 和 `
  ` 元素之前，我的团队经常用嵌套的 `
  ` 来实现这种模式，就像这样：
  <div class="book-details">
  <div class="book-details--item">
  <div class="book-details--label">
  标题
  </div>
  <div class="book-details--value">
  《基于 Web 标准进行设计》
  </div>
  </div>
  <div class="book-details--item">
  <div class="book-details--label">
  作者
  </div>
  <div class="book-details--value">
  Jeffrey Zeldman
  </div>
  <div class="book-details--value">
  Ethan Marcotte
  </div>
  </div>
  <div class="book-details--item">
  <div class="book-details--label">
  出版商
  </div>
  <div class="book-details--value">
  New Riders Pub；第 3 版（2009 年 10 月 19 日）</div>
  </div>
  </div>
  这包含了关于这本书的所有信息，对吧？既然嵌套的 `
  ` 系列也能完成任务，那我们为啥还需要为名值对列表添加语义呢？
  在确定某个语义元素是否适合特定模式时，我觉得问问自己 “如果计算机能够识别这种模式，我们能获得哪些好处（哪怕是理论上的）” 挺有帮助的。在这种情况下，如果浏览器能够识别名值对列表，我们能得到啥优势呢？
  答案可能有很多种。我经常倡导网页无障碍访问，所以我首先想到的是屏幕阅读器会怎么解释这种模式。我一下子就能想到屏幕阅读器用户从识别这种模式中能得到的一些好处：
  屏幕阅读器可以告诉用户列表中有多少个名值对组。
  屏幕阅读器可以告诉用户他们在列表中的位置。
  如果用户对列表不感兴趣，屏幕阅读器可以把列表当成一个整体，让用户跳过。
  所有这些都能让列表比一系列嵌套的 `
  ` 更易用，因为嵌套的 `
  ` 会把列表中的每个名称和值都当成独立的文本节点。
  要是你能想出一些哪怕是理论上的、用户设备识别模式带来的好处，那么这种模式很可能就适合添加相关的语义。
  值得一提的是，这些屏幕阅读器体验可不是假设 —— 在大多数浏览器/屏幕阅读器组合中，屏幕阅读器用户确实能从使用 `
  ` 中获得这些好处。不过，得承认，对 `
  ` 元素的支持还不够普遍。你可能会觉得屏幕阅读器的回退体验（把列表当成独立的文本节点）满足不了你的使用场景，所以在支持情况改善之前，你可能会选择用 `
  `。
  好吧，再看最后一个例子！
  我最喜欢的例子，也是最能说明问题的例子，就是《龙与地下城》的怪物属性表，那简直就是 “全是名值对！”
  真的，就这个属性表，你能看到多少个适合用 `
  ` 表示的地方呢？
  我个人数出了 **五个** 可能的描述列表。以下是我选择的标记方式：
  <div>
  <h1>狗头人</h1>
  <small>小型类人生物（狗头人），守序邪恶</small>
  <dl>
  <div>
  <dt>护甲等级</dt>
  <dd>12</dd>
  </div>
  <div>
  <dt>生命值</dt>
  <dd>5（2d6 - 2）</dd>
  </div>
  <div>
  <dt>速度</dt>
  <dd>30 英尺</dd>
  </div>
  </dl>
  <dl aria-label="能力值">
  <div>
  <dt>力量（STR）</dt>
  <dd>7（-2）</dd>
  </div>
  <div>
  <dt>敏捷（DEX）</dt>
  <dd>15（+2）</dd>
  </div>
  <div>
  <dt>体质</dt>
  <dd>9（-1）</dd>
  </div>
  <div>
  <dt>智力</dt>
  <dd>8（-1）</dd>
  </div>
  <div>
  <dt>感知</dt>
  <dd>7（-2）</dd>
  </div>
  <div>
  <dt>魅力</dt>
  <dd>8（-1）</dd>
  </div>
  </dl>
  <dl aria-label="技能专长">
  <div>
  <dt>感官</dt>
  <dd>黑暗视觉 60 英尺</dd>
  <dd>被动察觉 8</dd>
  </div>
  <div>
  <dt>语言</dt>
  <dd>通用语</dd>
  <dd>龙语</dd>
  </div>
  <div>
  <dt>挑战等级</dt>
  <dd>1/8（25 经验值）</dd>
  </div>
  </dl>
  <dl aria-label="特性">
  <div>
  <dt>阳光敏感</dt>
  <dd>
  在阳光下，狗头人进行攻击检定以及依靠视觉的感知（察觉）检定时有劣势。
  </dd>
  </div>
  <div>
  <dt>群体战术</dt>
  <dd>
  如果至少有一个狗头人的盟友在目标生物 5 英尺内且该盟友未失去行动能力，狗头人对该生物进行攻击检定时有优势。
  </dd>
  </div>
  </dl>
  <h2 id="actions">行动</h2>
  <dl aria-labelledby="actions">
  <div>
  <dt>匕首</dt>
  <dd>
  <i>近战武器攻击</i>：命中 +4，触及 5 英尺，单一目标 <i>命中</i>：（1d4 + 2）穿刺伤害。
  </dd>
  </div>
  <div>
  <dt>投石索</dt>
  <dd>
  <i>远程武器攻击</i>：命中 +4，射程 30/120 英尺，单一目标 <i>命中</i>：（1d4 + 2）钝击伤害。
  </dd>
  </div>
  </dl>
  </div>
  这只是标记该属性表的一种方式。
  我喜欢这个例子，因为它充分展示了描述列表模式的通用性 —— 能力值列表（力量、敏捷等）和攻击列表看起来很不一样，但描述列表模式都能涵盖它们。
  总结
  名值对列表（或者在某些情况下，名值组列表）是网络上常见的模式，部分原因就在于它的通用性。HTML 允许我们用三个元素的组合来标记这些列表：
  **`
  `，即描述列表元素**，用来包裹整个名值对列表。
  **``，即描述术语元素**，表示名值对中的名称。
  **`
  `，即描述详情元素**，表示名值对中的值。
  为这些模式添加语义，能让用户的设备获得所需信息，从而提供有用且易用的体验 —— 而且这些体验往往是开发者可能想不到的。
  要了解更多关于描述列表的信息，以及哪些操作是允许的、哪些是不允许的，我推荐阅读 [MDN 上关于 `
  ` 的文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl)，或者 [直接查看规范](https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)！
  脚注
  1. 在 HTML5 之前，`
  ` 被称为定义列表（definition list），因为它最初仅用于表示术语及其定义的词汇表。 | 返回 [1]
  2. `` 和 `
  ` 以前分别被称为定义术语（definition term）和定义详情（definition detail）元素。 | 返回 [2]
  (C) 2019 - 2026 Ben Myers
  - [RSS 订阅](/feed.xml)
  - [鸣谢](/colophon/)
  - [无障碍声明](/accessibility-statement/)
  自豪的手工制作 [AI 声明](/ai-statement/)
  本网站是 [a11y - webring.club](https://a11y-webring.club/) 的成员。[上一个网站](https://a11y-webring.club/prev) [随机网站](https://a11y-webring.club/random) [下一个网站](https://a11y-webring.club/next)
  - [STR]：力量
  - [DEX]：敏捷

菜单

引言

描述列表的结构

为什么我们需要为其添加语义呢？

好吧，再看最后一个例子！

总结

脚注

相关文章：