©
本文档使用
php中文网手册 发布
HTML<dl>元素 （或HTML描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。
内容类别 | 流内容，如果<dl>元素的子元素包含一个名称值组，则可触及的内容。 |
|---|---|
允许的内容 | 零个或多个组，每个组由一个或多个<dt>元素，后跟一个或多个<dd>元素组成，可选地与<script>和<template>元素混合在一起。或（在WHATWG HTML中）：一个或多个<div>元素，可选地与<script>和<template>元素混合在一起。 |
标记遗漏 | 没有，起始和结束标签都是强制性的。 |
允许的父母 | 任何接受流内容的元素。 |
允许ARIA角色 | 组，演示文稿 |
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 descriptions --></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 descriptions --></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 descriptions --></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> 元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。
要改变描述列表中描述的缩进量，请使用 CSSmargin 属性。
规范
规范 | 状态 | 评论 |
|---|---|---|
HTML生活标准该规范中'<dl>'的定义。 | 生活水平 | |
HTML5该规范中'<dl>'的定义。 | 建议 | |
HTML 4.01规范该规范中'<dl>'的定义。 | 建议 | 初始定义 |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | 1 | (Yes) | (Yes) | (Yes) |