<dl>

简介

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

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

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

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

标签省略不允许，开始标签和结束标签都不能省略。
允许的父元素符合流内容的任何元素
DOM 接口 HTMLDListElement (en-US)

示例

元数据

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

<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! (en-US)

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)

<dl>

简介

属性

示例

单条术语与描述

多条术语，单条描述

单条术语，多条描述

多条术语，多条描述

元数据

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

注意

规范

浏览器兼容性

相关内容

<dl>

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

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