directory search
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
characters

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)

Previous article: Next article: