<dl>: 描述列表元素

<dl> HTML 元素表示描述列表。该元素包含一个术语列表（使用 <dt> 元素指定）和描述（由 <dd> 元素提供）。此元素的常见用途是实现词汇表或显示元数据（键值对列表）。

试试看

属性

此元素仅包含 全局属性。

无障碍

每个屏幕阅读器以不同的方式显示 <dl> 内容，包括总数、术语/定义上下文和导航方法。这些差异不一定是错误。从 iOS 14 开始，VoiceOver 将在使用虚拟光标导航时（不是通过“全部朗读”命令）宣布 <dl> 内容是列表。VoiceOver 不支持使用 <dl> 进行列表导航命令。请谨慎将 ARIA term 和 definition 角色应用于 <dl> 结构，因为 VoiceOver（macOS 和 iOS）将调整它们的宣布方式。

示例

单个术语和描述

html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

结果

多个术语，单个描述

html
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

结果

单个术语，多个描述

html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

结果

多个术语和描述

还可以通过组合以上示例，为多个术语定义多个对应的描述。

元数据

描述列表用于以键值对列表的形式显示元数据。

html
<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

结果

提示：在 CSS 中定义一个键值分隔符会很方便，例如

css
dt::after {
  content: ": ";
}

将名称-值组包装在 div 元素中

HTML 允许将每个名称-值组包装在一个 <dl> 元素中，该元素位于 <div> 元素中。当使用 微数据，或当 全局属性 应用于整个组，或出于样式目的时，这可能很有用。

html
<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

结果

注释

不要使用此元素（也不要使用 <ul> 元素）仅仅为了在页面上创建缩进。虽然它有效，但这是一种不好的做法，会掩盖描述列表的含义。

要更改描述术语的缩进，请使用 CSS margin 属性。

技术概要

内容类别 流动内容，如果 <dl> 元素的子元素包含一个名称-值组，则为可感知的内容。
允许的内容

要么：零个或多个组，每个组包含一个或多个 <dt> 元素，后跟一个或多个 <dd> 元素，可以选择与 <script> 和 <template> 元素混合使用。
或：（在 WHATWG HTML、W3C HTML 5.2 及更高版本中）一个或多个 <div> 元素，可以选择与 <script> 和 <template> 元素混合使用。
标签省略 没有，开始和结束标签都是必需的。
允许的父元素 任何接受 流动内容 的元素。
隐式 ARIA 角色 没有相应的角色
允许的 ARIA 角色 group、list、none、presentation
DOM 接口 HTMLDListElement

规范

规范
HTML 标准
# the-dl-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅