• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <dl>

    HTML<dl>元素(或HTML描述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据(键-值对列表)。

    浏览器支持

    所有主流浏览器都支持<dl>标签。

    示例

    <dl>
      <dt>coffee</dt>
      <dd>black hot drink</dd>
      <dt>milk</dt>
      <dd>white cold drink</dd>
    </dl>
    

    标签定义及使用说明

    • <dl>标签定义一个描述列表。
    • <dl>标签与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

    注意

    请不要将该元素(也不要用<ul>元素)用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题,但是,这是很糟糕的做法,并且语义也不清晰。要改变描述列表中描述的缩进量,请使用 CSSmargin属性。

    在 HTML5 之前,<dl>被大家以定义列表所熟知。

    内容分类流式内容元素, and if the<dl>element's children include one name-value pair, 段落内容元素.
    允许的内容Zero or more<dt>elements, each followed by one or more<dd>elements.
    标签省略不允许,开始标签和结束标签都不能省略。
    允许的父元素任何父级流内容元素
    DOM 接口HTMLElement

    HTML 4.01 与 HTML5之间的差异

    在 HTML 4.01 中,<dl>标签定义一个定义列表。

    在 HTML5 中,<dl>标签定义一个描述列表。

    属性

    该元素包含全局属性。

    全局属性

    <dl>标签支持HTML 的全局属性。

    事件属性

    <dl>标签支持HTML 的事件属性。

    实例

    带有项目和描述的描述列表:

    <dl>
    <dt>coffee</dt>
    <dd>black hot drink</dd>
    <dt>milk</dt>
    <dd>white cold drink</dd>
    </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>
      <!-- other terms and definitions -->
    </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 definitions -->
    </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 definitions -->
    </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>
    

    上篇:<dd>

    下篇:<pre>