三、定义列表(Definition List)
除了有序和无序列表,还有一种HTML列表类型,被称为定义列表。
应用场景:对某个术语或内容进行解释和描述,所以由标题和描述两部分组成,描述是对标题的解释和说明,标题是对描述的总结和提炼。
示例:一些网站顶部或底部的相关信息。
图中展示的某网站顶部信息,「首页」就可以理解为标题,对应的「历史上的今天」、「百科冷知识」和「图解百科」就是对标题的说明和描述。
在HTML中,我们使用<dl>
、<dt>
和<dd>
标签创建一个定义列表。
定义列表
这几行代码定义了一个自定义列表。 第1、6行,使用<dl></dl>标签对定义了一个定义列表。 第2行,使用 <dt></dt>标签对定义了一个术语,也就是标题。 第3-5行,使用<dd></dd>标签对为该标题添加了三个描述。 定义列表中每一项都有一个 <dt>和<dd>标签,分别用于定义术语(标题)和对术语(标题)进行解释与描述。 |
<dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> <dd>个人订单</dd> </dl> |
代码的具体解释:
<dl>标签 dl是definition list的缩写 ,表示定义列表。 <dl>标签一般和<dd>、<dt>标签配合使用,不会单独出现,且尽量在<dl>标签中只使用<dd>、<dt>标签。 一般情况下,一个<dl>标签可以包含多对<dt>和<dd>。 | |
<dt>标签 dt是definition term的缩写,表示术语,也就是我们说的标题。 <dt>标签不能单独存在,必须包裹在<dl>标签中。 <dt>标签和<li>标签一样属于容器标签,里面可以添加任意标签,也就是可以包含段落、图片、链接、列表等。 | |
<dd>标签 dd是definition description的缩写,表示一个术语(标题)的描述。 <dd>和<dt>是同级标签,它们都是<dl>的子标签。 同样,<dd>标签中可以放任意标签。 |
总结:
定义列表默认状态的显示效果
1、定义列表的列表项前没有任何项目符号; 2、<dt>和<dd>虽然是同级标签,但是它们的默认样式不同:<dt>顶格显示,而<dd>带有一段缩进,这样层次更加分明。 |
<dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> <dd>个人订单</dd> </dl> |
总结: