菜单### 链接- [主页](/)- [写作](/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 模式而且具有 **极强的通用性** 呢比如说你可能在好多地方都见过类似这样的布局这些例子可都展示了名值对列表哦。你说不定还见过用名值对列表来描述住宿设施、列出每月租金的各项费用或者在技术术语词汇表中使用呢。这些情况都能用 元素来表示。那么具体该怎么做呢描述列表的结构我一直说 “”其实这里涉及三个不同的元素、 和 。首先是 它就是描述列表就跟用 表示无序列表用 表示有序列表是一个道理。dl/dl是不是很简单呀接下来我们要添加一个名值对。我们用 description term 的缩写表示名称用 description detail 的缩写表示值。dldt标题/dtdd《基于 Web 标准进行设计》/dd/dl要是想在列表里再添加一个名值对那就再添加一个 和 dldt标题/dtdd《基于 Web 标准进行设计》/dddt出版商/dtddNew Riders Pub第 3 版2009 年 10 月 19 日/dd/dl不过如果一个术语有多个值该咋办呢比如说这本书有好几个作者。这也没问题一个 可以对应多个 dldt标题/dtdd《基于 Web 标准进行设计》/dddt作者/dtddJeffrey Zeldman/ddddEthan Marcotte/dddt出版商/dtddNew Riders Pub第 3 版2009 年 10 月 19 日/dd/dl对于大多数基本用例描述列表结构还有最后一点得注意要是出于样式原因想把一个 及其对应的 包裹起来该怎么做呢在这种情况下规范允许用 包裹一个 及其对应的 dldivdt标题/dtdd《基于 Web 标准进行设计》/dd/divdivdt作者/dtddJeffrey Zeldman/ddddEthan Marcotte/dd/divdivdt出版商/dtddNew Riders Pub第 3 版2009 年 10 月 19 日/dd/div/dl像这样的包裹 是唯一能包裹 / 组的元素。就是这么回事这就是描述列表的结构也是 HTML 用来标记名值对组列表的语义方式。为什么我们需要为其添加语义呢在了解 、 和 元素之前我的团队经常用嵌套的 来实现这种模式就像这样div classbook-detailsdiv classbook-details--itemdiv classbook-details--label标题/divdiv classbook-details--value《基于 Web 标准进行设计》/div/divdiv classbook-details--itemdiv classbook-details--label作者/divdiv classbook-details--valueJeffrey Zeldman/divdiv classbook-details--valueEthan Marcotte/div/divdiv classbook-details--itemdiv classbook-details--label出版商/divdiv classbook-details--valueNew Riders Pub第 3 版2009 年 10 月 19 日/div/div/div这包含了关于这本书的所有信息对吧既然嵌套的 系列也能完成任务那我们为啥还需要为名值对列表添加语义呢在确定某个语义元素是否适合特定模式时我觉得问问自己 “如果计算机能够识别这种模式我们能获得哪些好处哪怕是理论上的” 挺有帮助的。在这种情况下如果浏览器能够识别名值对列表我们能得到啥优势呢答案可能有很多种。我经常倡导网页无障碍访问所以我首先想到的是屏幕阅读器会怎么解释这种模式。我一下子就能想到屏幕阅读器用户从识别这种模式中能得到的一些好处屏幕阅读器可以告诉用户列表中有多少个名值对组。屏幕阅读器可以告诉用户他们在列表中的位置。如果用户对列表不感兴趣屏幕阅读器可以把列表当成一个整体让用户跳过。所有这些都能让列表比一系列嵌套的 更易用因为嵌套的 会把列表中的每个名称和值都当成独立的文本节点。要是你能想出一些哪怕是理论上的、用户设备识别模式带来的好处那么这种模式很可能就适合添加相关的语义。值得一提的是这些屏幕阅读器体验可不是假设 —— 在大多数浏览器/屏幕阅读器组合中屏幕阅读器用户确实能从使用 中获得这些好处。不过得承认对 元素的支持还不够普遍。你可能会觉得屏幕阅读器的回退体验把列表当成独立的文本节点满足不了你的使用场景所以在支持情况改善之前你可能会选择用 。好吧再看最后一个例子我最喜欢的例子也是最能说明问题的例子就是《龙与地下城》的怪物属性表那简直就是 “全是名值对”真的就这个属性表你能看到多少个适合用 表示的地方呢我个人数出了 **五个** 可能的描述列表。以下是我选择的标记方式divh1狗头人/h1small小型类人生物狗头人守序邪恶/smalldldivdt护甲等级/dtdd12/dd/divdivdt生命值/dtdd52d6 - 2/dd/divdivdt速度/dtdd30 英尺/dd/div/dldl aria-label能力值divdt力量STR/dtdd7-2/dd/divdivdt敏捷DEX/dtdd152/dd/divdivdt体质/dtdd9-1/dd/divdivdt智力/dtdd8-1/dd/divdivdt感知/dtdd7-2/dd/divdivdt魅力/dtdd8-1/dd/div/dldl aria-label技能专长divdt感官/dtdd黑暗视觉 60 英尺/dddd被动察觉 8/dd/divdivdt语言/dtdd通用语/dddd龙语/dd/divdivdt挑战等级/dtdd1/825 经验值/dd/div/dldl aria-label特性divdt阳光敏感/dtdd在阳光下狗头人进行攻击检定以及依靠视觉的感知察觉检定时有劣势。/dd/divdivdt群体战术/dtdd如果至少有一个狗头人的盟友在目标生物 5 英尺内且该盟友未失去行动能力狗头人对该生物进行攻击检定时有优势。/dd/div/dlh2 idactions行动/h2dl aria-labelledbyactionsdivdt匕首/dtddi近战武器攻击/i命中 4触及 5 英尺单一目标 i命中/i1d4 2穿刺伤害。/dd/divdivdt投石索/dtddi远程武器攻击/i命中 4射程 30/120 英尺单一目标 i命中/i1d4 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]敏捷