上 - 66必读

简介

或描述列表元素被低估了。它用于表示名称-值对的列表。这是一种常见的 UI 模式，同时用途广泛。例如，您可能在野外见过这些布局……每个示例都显示一个（或多个）名称-值对列表。您可能还见过用于描述住宿设施的名称-值对列表，或列出每月租金或技术术语词汇表中的个人费用。其中每一个都是用

元素表示的候选者。那看起来是什么样子的呢？描述列表的剖析我一直在说“

”，但实际上，我谈论的是三个独立的元素：

和

。我们从

（描述术语的缩写）作为名称，并使用: （描述细节的缩写）作为值。 [ note 2 ] 复制代码 < dl > < dt > 标题 < dd > 使用 Web 标准进行设计要向列表中添加另一个名称-值对，我们添加另一个
和: ：复制代码 < dl > < dt > 标题 < dd > 使用 Web 标准进行设计 < dt > 发布者; 新骑士酒吧；第三版（2009 年 10 月 19 日）但是等等 — 如果我有一个具有多个值的术语怎么办？例如，如果这本书有多个作者怎么办？没关系！一个
可以有多个: ：复制代码
标题
使用Web标准进行设计
作者
Jeffrey Zeldman
Ethan Marcotte
出版商
New Riders Pub；第三版（2009 年 10 月 19 日）对于大多数基本用例，还有最后一个描述列表剖析需要查看：如果我出于样式原因想要包装
及其
该怎么办？在这种情况下，规范允许您将
及其
包装在
中：复制代码 < dl > < div > < dt > Title < dd > 使用 Web 标准进行设计 < div > < dt > Author < dd > Jeffrey Zeldman < dd > Ethan Marcotte < div > < dt > 出版商 < dd > 新骑士酒吧;第三版（2009 年 10 月 19 日）像这样的包装
是唯一可以包装这些
/
组的元素。就是这样！这就是描述列表的剖析，HTML 标记名称-值组列表的语义方式！为什么我们需要语义呢？在我们了解
、
和
元素之前，我的团队一直使用嵌套的
来实现此模式。它看起来很像：复制代码 < div class = " book-details " > < div class = " book-details--item " > < div class = " book-details--label " > 标题 < div class = " book-details--value " > 使用 Web 标准进行设计 < div class = " book-details--item " > < div class = " book-details--label " > 作者 < div class = " book-details--value " > Jeffrey Zeldman < div class = " book-details--value " > 伊桑·马科特 < div class = " book-details--item " > < div class = " book-details--label " > 出版商 < div class = " book-details--value " > New Riders Pub;第三版（2009年10月19日）