<dl>: Description List 元素

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

试一试

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

属性

此元素也接受全局属性。

compact 已弃用: 这个布尔属性暗示列表应以紧凑的样式呈现。对此属性的解释取决于浏览器。请改用 CSS：要实现与 compact 属性类似的效果，可以使用 CSS 属性 line-height 并将其值设置为 80%。

每个屏幕阅读器对 <dl> 内容的暴露方式不同，包括总数、术语/定义上下文和导航方法。这些差异不一定是 bug。在 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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年7月9日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题