<dl> - HTML（超文本标记语言） 编辑

简介

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

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

• 内容分类 Flow content(流体内容), 如果<dl> 元素的子元素包含一个键值对，则显示其中内容.

1. 允许的内容一：零组或多组dom结构，每组dom结构中包含一个或多个<dt> 元素，以及 一个或多个<dd>元素，可通过<script>元素和<template>元素进行混入。二：一组或多组<div>元素，可通过<script>元素和<template>元素混入。

• 标签省略 不允许，开始标签和结束标签都不能省略。
• 允许的父元素符合流内容的任何元素
• 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 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>

注意

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

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

规范

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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

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)

相关内容

• <dt> element
• <dd> element