path: root/files/zh-cn/web/html/element/dl/index.html

---
title: <dl>
slug: Web/HTML/Element/dl
tags:
  - HTML
  - HTML 分组内容
  - Web
  - 元素
  - 引用
translation_of: Web/HTML/Element/dl
---
<h2 id="简介">简介</h2>

<p><strong>HTML <code>&lt;dl&gt;</code> 元素</strong> （或 <em>HTML</em> <em>描述列表元素</em>）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。</p>

<p>在 HTML5 之前， &lt;dl&gt; 被大家以定义列表所熟知。</p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>(流体内容), 如果<code>&lt;dl&gt;</code> 元素的子元素包含一个键值对，则显示其中内容.</li>
</ul>

<ol class="htmlelt">
 <li><dfn>允许的内容</dfn>一：零组或多组dom结构，每组dom结构中包含一个或多个{{HTMLElement("dt")}} 元素，以及 一个或多个{{HTMLElement("dd")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素进行混入。二：一组或多组{{HTMLElement("div")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素混入。</li>
</ol>

<ul class="htmlelt">
 <li><dfn>标签省略</dfn> {{no_tag_omission}}</li>
 <li><dfn>允许的父元素</dfn>符合流内容的任何元素</li>
 <li><dfn>DOM 接口</dfn> {{domxref("HTMLDListElement")}}</li>
</ul>

<h2 id="属性">属性</h2>

<p>该元素包含<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p>

<h2 id="示例">示例</h2>

<h3 id="单条术语与描述">单条术语与描述</h3>

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.
  &lt;/dd&gt;
  &lt;!-- other terms and definitions --&gt;
&lt;/dl&gt;
</pre>

<p>输出：</p>

<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png"></p>

<h3 id="多条术语，单条描述">多条术语，单条描述</h3>

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
  &lt;dt&gt;Fx&lt;/dt&gt;
  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;

  &lt;!-- other terms and definitions --&gt;
&lt;/dl&gt;
</pre>

<p>输出：</p>

<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png"></p>

<h3 id="单条术语，多条描述">单条术语，多条描述</h3>

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;
  &lt;dd&gt;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).&lt;/dd&gt;

  &lt;!-- other terms and definitions --&gt;
&lt;/dl&gt;
</pre>

<p>输出：</p>

<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png"></p>

<h3 id="多条术语，多条描述">多条术语，多条描述</h3>

<p>同样的，该元素同样可以支持在一个列表中出现多条术语以及多条描述。</p>

<h3 id="元数据">元数据</h3>

<p>描述列表可以很方便的将元数据展示为键-值对列表：</p>

<pre>&lt;dl&gt;
    &lt;dt&gt;Name&lt;/dt&gt;
    &lt;dd&gt;Godzilla&lt;/dd&gt;
    &lt;dt&gt;Born&lt;/dt&gt;
    &lt;dd&gt;1952&lt;/dd&gt;
    &lt;dt&gt;Birthplace&lt;/dt&gt;
    &lt;dd&gt;Japan&lt;/dd&gt;
    &lt;dt&gt;Color&lt;/dt&gt;
    &lt;dd&gt;Green&lt;/dd&gt;
&lt;/dl&gt;
</pre>

<p>小技巧：通过 CSS3 ，我们可以很容易的在术语后面添加一个与内容无关的分隔符号，比如<font face="Consolas, Liberation Mono, Courier, monospace">：</font></p>

<pre><code>dt:after {
  content: ": ";
}</code></pre>

<h3 id="在_HTMLElementdiv_元素中包装名称值组">在 {{HTMLElement("div")}} 元素中包装名称值组</h3>

<p>WHATWG HTML允许在 {{HTMLElement("div")}} 元素中的 {{HTMLElement("dl")}} 元素中包装每个名称 - 值组。当使用元数据时，或全局属性适用于整个组或用于样式时，这可能很有用。</p>

<pre class="brush: html">&lt;dl&gt;
  &lt;div&gt;
    &lt;dt&gt;Name&lt;/dt&gt;
    &lt;dd&gt;Godzilla&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;Born&lt;/dt&gt;
    &lt;dd&gt;1952&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;Birthplace&lt;/dt&gt;
    &lt;dd&gt;Japan&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;Color&lt;/dt&gt;
    &lt;dd&gt;Green&lt;/dd&gt;
  &lt;/div&gt;
&lt;/dl&gt;
</pre>

<h2 id="注意">注意</h2>

<p>请不要将该元素（也不要用 {{HTMLElement("ul")}} 元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。</p>

<p>要改变描述列表中描述的缩进量，请使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("margin")}} 属性。</p>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="相关内容">相关内容</h2>

<ul>
 <li>{{HTMLElement("dt")}} element</li>
 <li>{{HTMLElement("dd")}} element</li>
</ul>

<div>{{HTMLRef}}</div>