?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
HTML<dl>元素 （或HTML描述列表元素）是一個(gè)包含術(shù)語(yǔ)定義以及描述的列表，通常用于展示詞匯表或者元數(shù)據(jù) (鍵-值對(duì)列表)。
內(nèi)容類別 | 流內(nèi)容，如果<dl>元素的子元素包含一個(gè)名稱值組，則可觸及的內(nèi)容。 |
|---|---|
允許的內(nèi)容 | 零個(gè)或多個(gè)組，每個(gè)組由一個(gè)或多個(gè)<dt>元素，后跟一個(gè)或多個(gè)<dd>元素組成，可選地與<script>和<template>元素混合在一起?；颍ㄔ赪HATWG HTML中）：一個(gè)或多個(gè)<div>元素，可選地與<script>和<template>元素混合在一起。 |
標(biāo)記遺漏 | 沒(méi)有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許的父母 | 任何接受流內(nèi)容的元素。 |
允許ARIA角色 | 組，演示文稿 |
DOM界面 | HTMLDListElement |
屬性
該元素包含全局屬性。
示例
單條語(yǔ)句與描述
<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>
輸出
多條語(yǔ)句，單條描述
<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>
輸出：
單條語(yǔ)句，多條描述
<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>
輸出：
多條語(yǔ)句，多條描述
同樣的，該元素同樣可以支持在一個(gè)列表中出現(xiàn)多條語(yǔ)句以及多條描述。
元數(shù)據(jù)
描述列表可以很方便的將元數(shù)據(jù)展示為鍵-值對(duì)列表：
<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>
小技巧：通過(guò) CSS3 ，我們可以很容易的在術(shù)語(yǔ)后面添加一個(gè)與內(nèi)容無(wú)關(guān)的分隔符號(hào)，比如：
dt::after {
content: ": ";}在 <div> 元素中包裝名稱值組
WHATWG HTML允許在 <div> 元素中的 <dl> 元素中包裝每個(gè)名稱 - 值組。當(dāng)使用元數(shù)據(jù)時(shí)，或全局屬性適用于整個(gè)組或用于樣式時(shí)，這可能很有用。
<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>
注
請(qǐng)不要將該元素（也不要用 <ul> 元素）用來(lái)在頁(yè)面創(chuàng)建具有縮進(jìn)效果的內(nèi)容。雖然這樣的結(jié)果樣式看上去沒(méi)問(wèn)題，但是，這是很糟糕的做法，并且語(yǔ)義也不清晰。
要改變描述列表中描述的縮進(jìn)量，請(qǐng)使用 CSSmargin 屬性。
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
HTML生活標(biāo)準(zhǔn)該規(guī)范中'<dl>'的定義。 | 生活水平 | |
HTML5該規(guī)范中'<dl>'的定義。 | 建議 | |
HTML 4.01規(guī)范該規(guī)范中'<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) |