文本 | dl dt dd

dl

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

属性
该元素包含全局属性。

dd

dd 元素(HTML 描述元素)用来指明一个描述列表 (dl) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现,并且必须跟着一个 dt 元素。

属性
该元素包含全局属性。

dt

dt 元素 (或 HTML 术语定义元素)用于在一个定义列表中声明一个术语。该元素仅能作为

的子元素出现。通常在该元素后面会跟着 dd 元素, 然而,多个连续出现的 dt 元素都将由出现在它们后面的第一个 dd 元素定义。

属性
该元素仅包含 全局属性。

示例

示例
单条术语与描述

  1. <dl>
  2. <dt>Firefox</dt>
  3. <dd>A free, open source, cross-platform, graphical web browser
  4. developed by the Mozilla Corporation and hundreds of volunteers.
  5. </dd>
  6. <!-- other terms and definitions -->
  7. </dl>

多条术语,单条描述

  1. <dl>
  2. <dt>Firefox</dt>
  3. <dt>Mozilla Firefox</dt>
  4. <dt>Fx</dt>
  5. <dd>A free, open source, cross-platform, graphical web browser
  6. developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  7. <!-- other terms and definitions -->
  8. </dl>

单条术语,多条描述

  1. <dl>
  2. <dt>Firefox</dt>
  3. <dd>A free, open source, cross-platform, graphical web browser
  4. developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  5. <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
  6. is a mostly herbivorous mammal, slightly larger than a domestic cat
  7. (60 cm long).</dd>
  8. <!-- other terms and definitions -->
  9. </dl>

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

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

  1. <dl>
  2. <dt>Name</dt>
  3. <dd>Godzilla</dd>
  4. <dt>Born</dt>
  5. <dd>1952</dd>
  6. <dt>Birthplace</dt>
  7. <dd>Japan</dd>
  8. <dt>Color</dt>
  9. <dd>Green</dd>
  10. </dl>

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

  1. dt:after {
  2. content: ": ";
  3. }

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

  1. <dl>
  2. <div>
  3. <dt>Name</dt>
  4. <dd>Godzilla</dd>
  5. </div>
  6. <div>
  7. <dt>Born</dt>
  8. <dd>1952</dd>
  9. </div>
  10. <div>
  11. <dt>Birthplace</dt>
  12. <dd>Japan</dd>
  13. </div>
  14. <div>
  15. <dt>Color</dt>
  16. <dd>Green</dd>
  17. </div>
  18. </dl>

注意
请不要将该元素(也不要用

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

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