在HTML中,提到定义列表,通常指的就是<dl>、<dt>和<dd>这三个元素。
其中的首字母'd'是按照definition来理解的,表示定义;'l'是list的首字母,表示列表;'t'是term的首字母,表示术语;'d'是description的首字母,表示描述。
相比于无序列表和有序列表,定义列表有个非常显著的特点——自由。
自由在于<dl>元素可以包含任意数量的<dt>和<dd>元素,可以和几乎任意的块级元素相邻或嵌套。
先看数量任意的案例。
(1)一个术语对应一个描述
(2)一个术语对应多个描述
(3)多个术语对应一个描述
再看一下和其他元素相邻或嵌套的案例。
(1)与<p>元素相邻
(2)使用<div>元素嵌套
以上用法都是合法的,但如果是<li>列表,那么无论是相邻还是嵌套,均不推荐使用,因为在部分浏览器下,例如非Chromium的Edge浏览器下,列表的序号显示就会出现异常。
语义的使用
定义列表非常适合用在对术语进行定义和解释的场景中,例如技术文档的语法和参数的罗列与说明。
在日常开发中,我们还可以适当拓展定义列表的使用范围,也就是带有标签的列表也可以使用<dl>元素。
例如:
如果是带有标题的列表,则推荐使用<section>元素。
例如: