HTML <dl> 元素

HTML <dl> 元素表示描述列表。元素包含一组项目和描述的列表。该元素的常用用途是实现词汇表或显示元数据（键值对列表）。

带有项目和描述的描述列表：

<dl>
  <dt>咖啡</dt>
  <dd>黑色的热饮</dd>
  <dt>牛奶</dt>
  <dd>白色的冷饮</dd>
</dl>

尝试一下 »

特性

内容类别	流式内容，如果 <dl> 的子元素包含一个名称值组，可触知内容。
允许的内容	零个或多个组，每个组由一个或多个 <dt> 元素组成，后跟一个或多个 <dd> 元素，可选地混合 <script> 和 <template> 元素。或者（在 WHATWG 中）：一个或多个 <div> 元素，可选地混合 <script> 和 <template> 元素。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受流式内容的元素。
允许的 ARIA 角色	group，presentation
DOM 接口	HTMLDListElement

属性

该元素包含了全局属性。

compact

非标准

强制描述出现在与项目同行上。该属性目前不被支持。

事件属性

<dl> 元素支持 HTML 的事件属性。

更多实例

简单的项目和描述

<dl>
  <dt>Firefox</dt>
  <dd>
    一个免费，开源，跨平台的图形网页浏览器，由 Mozilla 公司和数百个志愿者开发。
  </dd>

  <!-- 其他项目和描述 -->
</dl>

尝试一下 »

多个项目，一个描述

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    一个免费，开源，跨平台的图形网页浏览器，由 Mozilla 公司和数百个志愿者开发。
  </dd>

   <!-- 其他项目和描述 -->
</dl>

尝试一下 »

单个项目，多个描述

<dl>
  <dt>Firefox</dt>
  <dd>
    一个免费，开源，跨平台的图形网页浏览器，由 Mozilla 公司和数百个志愿者开发。
  </dd>
  <dd>
    小熊猫也被称为红熊猫，Wha（喊叫声），熊猫或火狐，是一种主要是食草，略大于家猫（60 厘米长）的哺乳动物。
  </dd>

  <!-- 其他项目和描述 -->
</dl>

尝试一下 »

多个项目和描述

也可以通过组合上述示例来定义具有多个对应描述的多个术语。

元数据

描述列表可以很方便的将元数据展示为键值对列表。

<dl>
  <dt>名称</dt>    
  <dd>哥斯拉</dd>
  <dt>诞生年份</dt>
  <dd>1952</dd>
  <dt>诞生地</dt>
  <dd>日本</dd>
  <dt>颜色</dt>
  <dd>绿色</dd>
</dl>

尝试一下 »

提示：可以方便地在 CSS 中定义键值分隔符，例如：

<style>
  dt::after {
    content: ": ";
  }
</style>

<dl>
  <dt>Firefox</dt>
  <dd>
    一个免费，开源，跨平台的图形网页浏览器，由 Mozilla 公司和数百个志愿者开发。
  </dd>

  <!-- 其他项目和描述 -->
</dl>

尝试一下 »

在 <div> 元素中包含名称值组

WHATWG HTML 允许将包含名称值组的 <dl> 元素包含在一个 <div> 元素中。这样可以很方便的将微数据或全局属性应用在整个元素组中，或者用于加样式。

<dl>
  <div>
    <dt>名称</dt>
    <dd>哥斯拉</dd>
  </div>
  <div>
    <dt>诞生年份</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>诞生地</dt>
    <dd>日本</dd>
  </div>
  <div>
    <dt>颜色</dt>
    <dd>绿色</dd>
  </div>
</dl>

尝试一下 »

注意

不要使用该元素（也不要用 <ul> 元素）在页面上创建缩进效果。虽然它是有效的，但这是一个糟糕的做法，掩盖了描述列表的含义。

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

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中，<dl> 元素定义一个定义列表。

在 HTML5 中，<dl> 元素定义一个描述列表。

规范

规范	状态	备注
HTML Living Standard <dl> 的定义	现行的标准	-
HTML5 <dl> 的定义	推荐	-
HTML 4.01 Specification <dl> 的定义	推荐	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• <dt> 元素
• <dd> 元素
• HTML 教程：HTML 列表