、、 是 HTML 中专为「名词–解释」映射关系设计的语义化标签，适用于术语表、API 参数、订单摘要等键值对结构；但不适用于数学计算关系（如价格明细）或二维数据（如带属性的商品清单），此时 或 更符合语义规范。
`
- `、`
- `、`
- ` 是 html 中专为「名词–解释」映射关系设计的语义化标签，适用于术语表、api 参数、订单摘要等键值对结构；但不适用于数学计算关系（如价格明细）或二维数据（如带属性的商品清单），此时 `
` 或 `
- ` 更符合语义规范。
-
订单基本信息摘要（非计算型键值对）
<dl> <dt>订单号</dt> <dd><code>ORD-2024-7890</code></dd> <dt>下单时间</dt> <dd><time datetime="2026-08-12T14:30:00+08:00">2026年8月12日 14:30</time></dd> <dt>收货地址</dt> <dd>北京市朝阳区XX路1号<br>张三 / 138****1234</dd> </dl>
✅ 语义清晰：每个
<dt></dt>是字段名（名词），<dd></dd>是其值（解释性内容）；屏幕阅读器可准确播报 “订单号：ORD-2024-7890”。立即学习“前端免费学习笔记（深入）”；
-
API 参数说明、FAQ、术语表、配置项
<h3 id="api-params">请求参数</h3> <dl aria-labelledby="api-params"> <dt>user_id</dt> <dd>用户唯一标识符，必填，类型为字符串。</dd> <dt>page_size</dt> <dd>每页返回条数，默认 20，取值范围 1–100。</dd> <dd>注意：超出范围将被截断为合法值。</dd> </dl>
✅ 支持一词多义（多个
<dd></dd>）、多词一义（连续<dt></dt>共享一个<dd></dd>），且aria-labelledby确保无障碍可访问。 - 避免给
<dt></dt>或<dd></dd>添加aria-label—— 会覆盖真实文本，破坏可访问性； - 若需标题，用
<h3 id="title">...</h3>+<dl aria-labelledby="title"></dl>； - 不要用
<dl></dl>替代<ol></ol>做步骤流程，也不用于纯横向两栏布局（应选 Flex/Grid）。
在构建电商类页面（如订单确认页、结算页）时，开发者常面临一个关键抉择：是否用
<dl></dl>标签来组织价格明细（如“商品小计”“运费”“税费”“总计”）或带描述的商品项？ 答案需回归 HTML 的核心设计原则——语义优先，而非视觉相似。✅ 正确场景：
<dl></dl>的典型适用领域<dl></dl>的本质是表达 非顺序性、非层级性、一对一或多对一的语义关联，即“某个术语（term）对应一段或多段解释（description）”。以下用法完全合规且推荐：❌ 误用警示：哪些情况不该用
<dl></dl>？1. 价格明细（Subtotal / Tax / Total）——应使用
<table> <p>虽然视觉上都是“左标签 + 右数值”，但价格明细隐含 <strong>算术聚合关系</strong>（Subtotal + Tax = Total），属于典型的二维结构化数据，语义上更接近表格而非定义关系。</p><pre class="brush:php;toolbar:false;"><!-- ❌ 语义错误：用 dl 表达计算关系 --> <dl> <dt>商品小计</dt> <dd>$200.00</dd> <dt>税费</dt> <dd>$40.00</dd> <dt>总计</dt> <dd>$240.00</dd> </dl></pre><p>✅ 正确做法：使用 <code><table>，并利用 <code><tfoot> 明确标注汇总行：<pre class="brush:php;toolbar:false;"><table> <tbody> <tr> <th scope="row">商品小计</th> <td class="amount">$200.00</td> </tr> <tr> <th scope="row">税费</th> <td class="amount">$40.00</td> </tr> </tbody> <tfoot> <tr> <th scope="row">总计</th> <td class="amount total">$240.00</td> </tr> </tfoot> </table></pre><blockquote><p>✅ <code><tfoot> 的语义正是“列汇总”，与屏幕阅读器、打印样式、辅助技术天然兼容；而 <code><dl></dl>无法表达“加总”逻辑，易导致读屏器误读为独立术语。2. 带属性的商品清单（如汉堡配料说明）——应使用
<ul></ul>+<li>+<figure></figure>或嵌套<dl></dl>若商品本身是列表项（如“经典牛肉汉堡 × 2”），其附加说明（“含生菜、番茄、特调酱汁”）属于该商品的附属描述，而非独立术语定义。
<!-- ❌ 混淆层级：把商品当术语、把描述当定义 --> <dl> <dt>经典牛肉汉堡 × 2</dt> <dd>含生菜、番茄、特调酱汁</dd> <dd>额外添加：双层芝士、培根</dd> </dl>
✅ 推荐结构：主列表用
<ul></ul>，每项内用<dl></dl>描述属性（语义嵌套合理）：<ul class="order-items"> <li> <strong>经典牛肉汉堡 × 2</strong> <dl> <dt>配料</dt> <dd>生菜、番茄、特调酱汁</dd> <dt>加料</dt> <dd>双层芝士、培根</dd> </dl> </li> <li> <strong>薯条大份 × 1</strong> <dl> <dt>备注</dt> <dd>少盐，配番茄酱</dd> </dl> </li> </ul>✅
<ul></ul>表达“订单中多个独立商品”，内部<dl></dl>聚焦单个商品的属性键值对，层次清晰，语义无歧义。⚙️ 实战建议：CSS 重置与可访问性增强
浏览器对
<dd></dd>的默认缩进（约 40px）易引发布局错位。推荐使用现代 CSS 统一控制：dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; margin: 0; } dt { font-weight: 600; margin-bottom: 0.25em; } dd { margin: 0; grid-column: 2; /* 强制所有 dd 对齐第二列 */ }同时务必注意：
✅ 总结：一句话判断准则
当内容可被自然表述为“X 是……”或“X 指的是……”时，用
<dl></dl>；当内容涉及运算、排序、多维属性或并列实体时，请选择<table> 或 <code><ul>/</ul> <ol></ol>。语义不是装饰，而是网页的骨架——它决定屏幕阅读器如何朗读、搜索引擎如何理解、浏览器如何打印、未来机器如何解析。用对
<dl></dl>，不只是写得“看起来整齐”，更是让信息真正可被世界读懂。 -
