dl

HTML<dl>元素 （或HTML描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。

内容类别	流内容，如果<dl>元素的子元素包含一个名称值组，则可触及的内容。
允许的内容	零个或多个组，每个组由一个或多个<dt>元素，后跟一个或多个<dd>元素组成，可选地与<script>和<template>元素混合在一起。或（在WHATWG HTML中）：一个或多个<div>元素，可选地与<script>和<template>元素混合在一起。
标记遗漏	没有，起始和结束标签都是强制性的。
允许的父母	任何接受流内容的元素。
允许ARIA角色	组，演示文稿
DOM界面	HTMLDListElement

属性

该元素包含全局属性。

示例

单条语句与描述

<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>

输出

多条语句，单条描述

<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>

输出：

单条语句，多条描述

<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>

输出：

多条语句，多条描述

同样的，该元素同样可以支持在一个列表中出现多条语句以及多条描述。

元数据

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

<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>

小技巧：通过 CSS3 ，我们可以很容易的在术语后面添加一个与内容无关的分隔符号，比如：

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

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

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

<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 属性。

规范

规范	状态	评论
HTML生活标准该规范中'<dl>'的定义。	生活水平
HTML5该规范中'<dl>'的定义。	建议
HTML 4.01规范该规范中'<dl>'的定义。	建议	初始定义

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	(Yes)	(Yes)	1	(Yes)	(Yes)	(Yes)

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	(Yes)	(Yes)	(Yes)	1	(Yes)	(Yes)	(Yes)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18

属性

示例

多条语句，单条描述

单条语句，多条描述

多条语句，多条描述

元数据

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

注

规范

浏览器兼容性

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