<dl>

简介

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

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

  • 内容分类 Flow content, and if the <dl> element's children include one name-value pair, palpable content.
  • 允许的内容 Zero or more <dt> elements, each followed by one or more <dd> elements.
  • 标签省略 不允许,开始标签和结束标签都不能省略。
  • 允许的父元素 Any element that accepts flow content.
  • DOM 接口 HTMLDListElement

属性

该元素包含全局属性

compact
迫使描述和术语显示在同一行。该属性目前不被支持。 

示例

单条术语与描述

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

输出:

Image:HTML-dl1.png

多条术语,单条描述

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

输出:

Image:HTML-dl2.png

单条术语,多条描述

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

输出:

Image:HTML-dl3.png

多条术语,多条描述

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

元数据

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

<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: ": ";
}

注意

请不要将该元素(也不要用 <ul> 元素)用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题,但是,这是很糟糕的做法,并且语义也不清晰。

要改变描述列表中描述的缩进量,请使用 CSS margin 属性。

规范

规范 状态 备注
WHATWG HTML Living Standard
<dl>
Living Standard  
HTML5
<dl>
Recommendation  
HTML 4.01 Specification
<dl>
Recommendation Initial definition

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)

相关内容

文档标签和贡献者

 此页面的贡献者: PoppinL, teoli, pantao
 最后编辑者: PoppinL,