<dl>

简介

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

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

  • 内容分类 Flow content(流体内容), 如果<dl> 元素的子元素包含一个键值对,则显示其中内容。
  1. 允许的内容一:零组或多组 dom 结构,每组 dom 结构中包含一个或多个<dt> 元素,以及 一个或多个<dd>元素,可通过<script>元素和<template>元素进行混入。二:一组或多组<div>元素,可通过<script>元素和<template>元素混入。
  • 标签省略 不允许,开始标签和结束标签都不能省略。
  • 允许的父元素符合流内容的任何元素
  • DOM 接口 HTMLDListElement (en-US)

属性

该元素包含全局属性 (en-US)

示例

单条术语与描述

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

<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

浏览器兼容性

BCD tables only load in the browser

相关内容