©
本文檔使用 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) |