目录搜索
Attributesaccesskey (attribute)class (attribute)contenteditable (attribute)contextmenu (attribute)data-* (attribute)dir (attribute)draggable (attribute)dropzone (attribute)Global attributeshidden (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)Elementsaabbraddressareaarticleasideaudiobbasebdibdoblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1headheaderhrhtmliiframeimginputinput type="button"input type="checkbox"input type="color"input type="date"input type="datetime"-localinput 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"inskbdlabellegendlilinkmainmapmarkmenumenuitemmetameternavnoscriptobjectoloptgroupoptionoutputpparampicturepreprogressqrprtrtcrubyssampscriptsectionselectslotsmallsourcespanstrongstylesubsummarysuptabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbrMiscellaneousAttributesBlock-level elementsCORS enabled imageCORS settings attributesElementInline elementsKinds of HTML contentLink typesMicrodataOptimizing your pages for speculative parsingPreloading contentReferenceSupported media formatsUsing the application cacheObsoleteacronymappletbasefontbigblinkcentercommandcontentdirelementfontframeframesethgroupimageinput type="datetime"isindexkeygenlistingmarqueenextidnoframesplaintextstrikettxmp
文字

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)

上一篇:下一篇: