<dl>
简介
HTML <dl>
元素 (或 HTML 描述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键 - 值对列表)。
在 HTML5 之前, <dl> 被大家以定义列表所熟知。
- 内容分类 Flow content(流体内容), 如果
<dl>
元素的子元素包含一个键值对,则显示其中内容。
- 允许的内容一:零组或多组 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>
输出:
多条术语,单条描述
<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>
元素中包装名称值组
注意
规范
规范 | 状态 | 备注 |
---|---|---|
HTML Living Standard <dl> |
Living Standard | |
HTML5 <dl> |
Recommendation | |
HTML 4.01 Specification <dl> |
Recommendation | Initial definition |
浏览器兼容性
BCD tables only load in the browser