<dl>

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

浏览器支持


所有主流浏览器都支持`<dl>`标签。

示例

<dl>
  <dt>coffee</dt>
  <dd>black hot drink</dd>
  <dt>milk</dt>
  <dd>white cold drink</dd>
</dl>

标签定义及使用说明

<dl>标签定义一个描述列表。
<dl>标签与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

注意

请不要将该元素（也不要用<ul>元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。要改变描述列表中描述的缩进量，请使用 CSSmargin属性。

在 HTML5 之前，<dl>被大家以定义列表所熟知。

内容分类	流式内容元素, and if the`<dl>`element's children include one name-value pair, 段落内容元素.
允许的内容	Zero or more`<dt>`elements, each followed by one or more`<dd>`elements.
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何父级流内容元素
DOM 接口	`HTMLElement`

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，<dl>标签定义一个定义列表。

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

属性

该元素包含全局属性。

全局属性

<dl>标签支持HTML 的全局属性。

事件属性

<dl>标签支持HTML 的事件属性。

实例

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

<dl>
<dt>coffee</dt>
<dd>black hot drink</dd>
<dt>milk</dt>
<dd>white cold drink</dd>
</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>
  <!-- other terms and definitions -->
</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 definitions -->
</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 definitions -->
</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>