HTML定义列表是专门用来展示术语及其对应描述的结构化标签，和有序列表、无序列表不同，它更适合呈现键值对形式的内容，比如名词解释、参数说明、常见问题解答等场景。下面就来详细讲解它的使用方法和相关标签的特性。
定义列表的核心标签
定义列表由三个核心标签组成，三者需要配合使用才能构成完整的定义列表结构：
<dl>：定义列表的容器标签，用来包裹整个定义列表的所有内容，内部只能直接放置<dt>和<dd>标签，不能放其他无关内容。<dt>：定义术语标签，用来放置需要解释的术语、名称或者标题，每个<dt>通常对应一个或多个<dd>描述。<dd>：定义描述标签，用来放置对应<dt>术语的具体说明、解释内容，描述内容可以是文本、图片、其他HTML元素等。
基本使用规则
定义列表的使用需要遵循以下规则，才能保证语义正确且符合HTML规范：
<dl>标签作为最外层容器，不能直接放在<dt>或<dd>内部，也不能在<dl>里直接放文本节点。- 一个
<dt>后面可以跟多个<dd>，用来对应同一个术语的多个不同描述角度。 - 多个
<dt>可以连续出现，后面跟着的<dd>会对应前面所有的<dt>术语，直到遇到新的<dt>。 <dd>的内容可以有缩进，也可以通过CSS自定义样式，默认浏览器会给<dd>添加左侧缩进。
基础代码示例
下面是一个最简单的词汇解释场景的定义列表示例，实现两个术语及其对应解释：
<dl> <dt>HTML</dt> <dd>超文本标记语言，是用来描述网页结构的标准标记语言，由一系列标签组成，用来告诉浏览器如何渲染网页内容。</dd> <dt>CSS</dt> <dd>层叠样式表，用来设置HTML元素的样式，包括布局、颜色、字体等视觉效果，实现网页结构和样式分离。</dd> </dl>
进阶使用场景示例
再来看一个一个术语对应多个描述，以及多个术语共享同一个描述的实际场景示例：
<dl> <!-- 一个术语对应多个描述 --> <dt>响应式布局</dt> <dd>网页能够自动适配不同尺寸的屏幕设备，在不同终端上都有良好的显示效果。</dd> <dd>常用实现方式包括媒体查询、弹性盒子布局、网格布局等。</dd> <!-- 多个术语共享同一个描述 --> <dt>Chrome</dt> <dt>Firefox</dt> <dt>Safari</dt> <dd>常见的主流网页浏览器，支持最新的HTML、CSS、JavaScript标准，是前端开发测试的主要环境。</dd> </dl>
常见问题说明
很多开发者在使用定义列表时容易踩以下坑：
- 不要在
<dl>内部直接写文本，所有内容都必须放在<dt>或<dd>标签里，否则语义会错乱。 <dt>和<dd>不需要严格成对出现，但是建议按照术语在前、描述在后的顺序书写，保证可读性。- 定义列表不是用来做布局的，虽然可以通过CSS改成横向排列，但它的核心语义是术语和描述的关联，不要滥用在普通布局场景。
浏览器兼容性
定义列表是HTML早期的标签，所有主流浏览器都完全支持，包括IE6及以上版本、Chrome、Firefox、Safari、Edge等，使用时不需要考虑兼容性问题，可以放心使用。
| 标签 | 是否支持自闭合 | 默认显示效果 |
|---|---|---|
| <dl> | 否 | 块级元素，上下有默认外边距 |
| <dt> | 否 | 块级元素，文本加粗显示 |
| <dd> | 否 | 块级元素，左侧有默认缩进 |