课时11：定义列表¶
学习目标：掌握定义列表（DL）的语义结构、标签用法及在实际开发中的布局优化技巧。
一、定义列表的概念与组成¶
1.1 什么是定义列表¶
定义列表是一种用于表示"术语-解释"对应关系的结构化列表，适用于名词解释、产品参数、人物介绍等场景。
1.2 三个核心标签¶
| 标签 | 全称 | 语义 | 标签类型 |
|---|---|---|---|
<dl> |
Definition List | 定义列表容器 | 双标签、容器级 |
<dt> |
Definition Term | 定义术语/主题 | 双标签、容器级 |
<dd> |
Definition Description | 定义解释/描述 | 双标签、容器级 |
二、标签使用规范与嵌套关系¶
2.1 严格的嵌套规则¶
<!-- 正确：dl 内部只能直接存放 dt 和 dd -->
<dl>
<dt>术语一</dt>
<dd>术语一的解释说明</dd>
<dt>术语二</dt>
<dd>术语二的解释说明</dd>
</dl>
<!-- 错误：dl 内部不能直接放其他标签 -->
<dl>
<p>错误内容</p> <!-- 不符合规范 -->
</dl>
2.2 dt 与 dd 的关系¶
<dt>和<dd>是同级兄弟关系（siblings），而非父子嵌套关系- 结构上类似于
<ul>/<ol>中的<li>，但功能分工更明确
三、基础用法与案例¶
3.1 单组定义结构¶
浏览器默认渲染：
- <dt> 内容靠左显示，字体为常规样式
- <dd> 内容向右缩进，形成术语与解释的对应关系
3.2 多组数据展示¶
<dl>
<dt>杨幂</dt>
<dd>代表作：《三生三世十里桃花》、《仙剑奇侠传三》</dd>
<dt>赵丽颖</dt>
<dd>代表作：《花千骨》、《楚乔传》、《知否知否应是绿肥红瘦》</dd>
<dt>刘诗诗</dt>
<dd>代表作：《步步惊心》、《女医明妃传》</dd>
</dl>
3.3 一对多关系：一个 dt 对应多个 dd¶
每个 <dt> 后面可以跟随零到多个 <dd> 解释项，每个 <dd> 解释的是其前面最近的 <dt>：
四、容器特性与结构优化¶
4.1 dt 与 dd 的容器特性¶
<dt> 和 <dd> 均为容器级标签，内部可以嵌套其他标签以丰富内容结构：
<dl>
<dt>产品名称</dt>
<dd>
<p>产品详细介绍段落一</p>
<p>产品详细介绍段落二</p>
<ul>
<li>特性一</li>
<li>特性二</li>
</ul>
</dd>
</dl>
4.2 结构简化技巧¶
当需要在一个 <dt> 下提供多个维度的信息时，有两种组织方式：
方式一：多个 dd 分别列举
方式二：单个 dd 内用标签细分（推荐）
<dt>杨幂</dt>
<dd>
<p><strong>作品：</strong>《三生三世》、《仙剑三》</p>
<p><strong>家庭：</strong>女儿小糯米</p>
<p><strong>签约艺人：</strong>迪丽热巴</p>
</dd>
推荐方案二的场景：信息维度间关联紧密，不需要独立的 CSS 样式控制时，使用单个 <dd> 配合内部标签更简洁直观。
五、实际应用场景分析¶
5.1 电商网站分类列表（京东案例）¶
通过审查京东等电商网站的左侧分类导航，可见其大量使用定义列表结构：
<!-- 第一组定义列表 -->
<dl>
<dt>手机通讯</dt>
<dd>5G手机</dd>
<dd>拍照手机</dd>
<dd>游戏手机</dd>
</dl>
<!-- 第二组定义列表（独立模块） -->
<dl>
<dt>电脑办公</dt>
<dd>轻薄本</dd>
<dd>游戏本</dd>
<dd>台式机</dd>
</dl>
5.2 布局优化：多 dl 拆分策略¶
关键洞察：实际开发中并非将所有 <dt> 和 <dd> 放入一个巨大的 <dl> 中，而是将页面划分为多个独立的 <dl> 模块：
| 组织方式 | 代码结构 | 布局控制难度 | 推荐度 |
|---|---|---|---|
| 单个大 dl | 一个 <dl> 包含所有内容 |
高 | 不推荐 |
| 多个独立 dl | 每组 <dl> 包含一组 <dt> + <dd> |
低 | 强烈推荐 |
多 dl 的优势：
- 每个 <dl> 可独立设置 CSS 样式（边框、宽度、浮动等）
- 便于实现并排布局（如分类导航的横向排列）
- 结构清晰，维护成本低