HTML
<dl>
element represents a description list. The element encloses a list of groups of terms (specified using the
<dt>
element) and descriptions (provided by
<dd>
elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 内容类别 |
流内容
, and if the
<dl>
element's children include one name-value group, palpable content.
|
|---|---|
| 准许内容 |
Either: Zero or more groups each consisting of one or more
<dt>
elements followed by one or more
<dd>
elements, optionally intermixed with
<script>
and
<template>
元素。
Or: One or more
<div>
elements, optionally intermixed with
<script>
and
<template>
元素。
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
group
,
list
,
none
,
presentation
|
| 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>
It is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above.
Description lists are useful for displaying metadata as a list of key-value pairs.
<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>
Tip: It can be handy to define a key-value separator in the CSS, such as:
dt::after {
content: ": ";
}
<div>
元素
WHATWG
HTML allows wrapping each name-value group in a
<dl>
element in a
<div>
element. This can be useful when using
microdata
, or when
全局属性
apply to a whole group, or for styling purposes.
<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>
Do not use this element (nor
<ul>
elements) to merely create indentation on a page. Although it works, this is a bad practice and obscures the meaning of description lists.
To change the indentation of a description term, use the
CSS
margin
特性。
Each screen reader announces
<dl>
content differently. Some screen readers, such as VoiceOver on iOS, will not announce that
<dl>
content is a list. Because of this, make sure each list item's content is written in such a way that it communicates its relationship to the other list items in the list grouping.
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
dl
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持