、、 是 HTML 中专为「名词–解释」映射关系设计的语义化标签，适用于术语表、API 参数、订单摘要等键值对结构；但不适用于数学计算关系（如价格明细）或二维数据（如带属性的商品清单），此时 或 更符合语义规范。
`
- `、`
- `、`
- ` 是 HTML 中专为「名词–解释」映射关系设计的语义化标签，适用于术语表、API 参数、订单摘要等键值对结构；但不适用于数学计算关系（如价格明细）或二维数据（如带属性的商品清单），此时 `
` 或 `
- ` 更符合语义规范。
-
订单基本信息摘要（非计算型键值对）
@@######@@✅ 语义清晰：每个
<dt></dt>是字段名（名词），<dd></dd>是其值（解释性内容）；屏幕阅读器可准确播报 “订单号：ORD-2024-7890”。 -
API 参数说明、FAQ、术语表、配置项
@@######@@✅ 支持一词多义（多个
<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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>@@######@@<p>✅ 正确做法：使用 <code><table>，并利用 <code><tfoot> 明确标注汇总行：@@######@@<blockquote><p>✅ <code><tfoot> 的语义正是“列汇总”，与屏幕阅读器、打印样式、辅助技术天然兼容；而 <code><dl></dl>无法表达“加总”逻辑，易导致读屏器误读为独立术语。2. 带属性的商品清单（如汉堡配料说明）——应使用
<ul></ul>+<li>+<figure></figure>或嵌套<dl></dl>若商品本身是列表项（如“经典牛肉汉堡 × 2”），其附加说明（“含生菜、番茄、特调酱汁”）属于该商品的附属描述，而非独立术语定义。
@@######@@✅ 推荐结构：主列表用
@@######@@<ul></ul>，每项内用<dl></dl>描述属性（语义嵌套合理）：✅
<ul></ul>表达“订单中多个独立商品”，内部<dl></dl>聚焦单个商品的属性键值对，层次清晰，语义无歧义。⚙️ 实战建议：CSS 重置与可访问性增强
浏览器对
@@######@@<dd></dd>的默认缩进（约 40px）易引发布局错位。推荐使用现代 CSS 统一控制：同时务必注意：
✅ 总结：一句话判断准则
当内容可被自然表述为“X 是……”或“X 指的是……”时，用
<dl></dl>；当内容涉及运算、排序、多维属性或并列实体时，请选择<table> 或 <code><ul>/</ul> <ol></ol>。语义不是装饰，而是网页的骨架——它决定屏幕阅读器如何朗读、搜索引擎如何理解、浏览器如何打印、未来机器如何解析。用对
<dl></dl>，不只是写得“看起来整齐”，更是让信息真正可被世界读懂。- 订单号
ORD-2024-7890- 下单时间
- 收货地址
- 北京市朝阳区XX路1号
张三 / 138****1234
<h3 id="api-params">请求参数</h3>
- user_id
- 用户唯一标识符，必填，类型为字符串。
- page_size
- 每页返回条数，默认 20，取值范围 1–100。
- 注意：超出范围将被截断为合法值。
<!-- ❌ 语义错误：用 dl 表达计算关系 -->
- 商品小计
- $200.00
- 税费
- $40.00
- 总计
- $240.00
商品小计 $200.00 税费 $40.00 总计 $240.00 <!-- ❌ 混淆层级：把商品当术语、把描述当定义 -->
- 经典牛肉汉堡 × 2
- 含生菜、番茄、特调酱汁
- 额外添加：双层芝士、培根
-
经典牛肉汉堡 × 2
- 配料
- 生菜、番茄、特调酱汁
- 加料
- 双层芝士、培根
-
薯条大份 × 1
- 备注
- 少盐，配番茄酱
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 对齐第二列 */ } -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
