41. 定义列表 dl dt dd

本节目标：学会用 dl、dt、dd 创建定义列表，理解它的适用场景，能区分定义列表和有序无序列表。

前两种列表都是一堆项目，定义列表不一样。它是术语加描述的配对组合，适合展示一组有对应关系的内容。

基本结构

定义列表用三个标签配合：

dl（description list）：定义列表容器
dt（description term）：术语或名称
dd（description definition）：描述或定义

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，网页的骨架</dd>

  <dt>CSS</dt>
  <dd>层叠样式表，控制网页的视觉表现</dd>

  <dt>JavaScript</dt>
  <dd>一种脚本语言，让网页具有交互能力</dd>
</dl>

浏览器默认样式会在描述（dd）前产生缩进，视觉上形成术语和解释的对应关系。

Note

dl 是 description list 的缩写。注意：HTML 5 之前叫定义列表，现在规范叫描述列表。

一个术语对应多个描述

一个 dt 可以有多个 dd：

<dl>
  <dt>旁白</dt>
  <dd>戏剧中，角色对观众说的内心独白，其他角色听不到。</dd>
  <dd>写作中，指与主题相关但不宜放在正文的补充内容。</dd>
</dl>

这在词汇有多种含义时特别有用。

实际应用：FAQ 问答列表

<dl>
  <dt>支持哪些支付方式？</dt>
  <dd>我们支持支付宝、微信支付和银行卡。</dd>

  <dt>多久能收到货？</dt>
  <dd>一般 3 到 5 个工作日送达，偏远地区可能延长。</dd>

  <dt>可以退换货吗？</dt>
  <dd>支持 7 天无理由退换，商品需保持原包装。</dd>
  <dd>定制商品不支持退换，请确认需求后再下单。</dd>
</dl>

实际应用：商品参数

<dl>
  <dt>品牌</dt>
  <dd>码上学</dd>

  <dt>型号</dt>
  <dd>MS-2024</dd>

  <dt>尺寸</dt>
  <dd>150mm x 80mm x 10mm</dd>

  <dt>重量</dt>
  <dd>120g</dd>
</dl>

用 CSS 美化定义列表

默认样式比较朴素，加点 CSS 会更好看：

<style>
  dt {
    font-weight: bold;
    margin-top: 10px;
    color: #333;
  }
  dd {
    margin-left: 20px;
    color: #666;
    margin-bottom: 5px;
  }
</style>

三种列表的对比

列表类型	标签	适用场景
无序列表	ul 和 li	项目顺序无关
有序列表	ol 和 li	项目有先后顺序
定义列表	dl、dt、dd	术语与描述的配对

Tip

判断用哪种列表：问问自己这些项目之间是什么关系。并列关系用无序，顺序关系用有序，配对关系用定义。

常见错误

把定义列表当缩进工具

<!-- 错误：只是为了缩进效果 -->
<dl>
  <dt>空</dt>
  <dd>缩进的内容</dd>
</dl>

定义列表的语义是术语描述配对。如果只是想缩进，用 CSS margin 或 padding。

dt 和 dd 顺序混乱

<!-- 错误 -->
<dl>
  <dd>描述在前</dd>
  <dt>术语在后</dt>
</dl>

<!-- 正确 -->
<dl>
  <dt>术语在前</dt>
  <dd>描述在后</dd>
</dl>

dt 必须在对应的 dd 之前。

小结

dl 创建定义列表，包含术语描述配对
dt 定义术语，dd 提供描述
一个术语可以有多个描述
适合 FAQ、词汇表、商品参数等场景

下一节，我们学习列表的嵌套技巧和样式控制。