dfn标签仅用于标记术语首次正式定义，必须紧邻完整定义语句且在同一段落内；优先提取title属性值作为被定义项，需避免孤立使用、跨段落、嵌套或误用为强调。

dfn 标签不是用来“加斜体”或“高亮词”的，它只干一件事：标记某个术语**在此处被首次正式定义**。用错就等于把语义信号发给屏幕阅读器和爬虫，却没配对上真实定义——结果是可访问性降级、术语提取失败、后期维护混乱。

dfn 必须紧邻完整定义语句，不能孤立出现

浏览器和辅助技术不会去“猜”哪句话在解释 dfn 里的词。它只认一个硬规则：该 dfn 元素必须出现在能独立表达含义的定义句中，且定义内容需在同一段落内或通过显式属性关联。

• ✅ 正确：

  DOM 是文档对象模型，一种将 HTML 文档表示为树形结构的编程接口。

• ❌ 错误：

  DOM

  它是文档对象模型……

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  （定义跨段落，且无 aria-describedby 或 id 关联）
• ❌ 错误：

  Accessibility

  （dfn 不允许作为
  的直接子元素；标题里不构成定义语境）
• ❌ 错误：
  • HTTP
  （列表项不是承载定义的合法上下文）

title 属性决定“被定义的是什么”，不是可选项

dfn 的术语值提取有明确优先级：先看 title 属性，再看子元素的 title，最后才取自身文本。这个顺序直接影响知识图谱抽取、术语表生成、屏幕阅读器播报内容。

• ✅ 缩写场景：DOM → 被定义项是 "Document Object Model"，不是 "DOM"
• ❌ 反向错误：Document Object Model → 实际定义的是字符串 "DOM"，语义完全错位
• ⚠️ 注意空格： fetch() 中前后空格会被计入文本内容，导致提取出 " fetch() "；应写作 fetch()
• ✅ 嵌套 code 可行：fetch()，只要 code 没带 title，仍以 fetch() 为术语值

如何让 dfn 和解释真正绑定？别只靠位置

仅靠“挨得近”不够稳定。当定义较长、结构复杂，或需支持自动化处理时，必须显式建立连接。

• ✅ 推荐组合：语义化

  指使用具有明确含义的 HTML 元素（如 nav、article）组织内容。

• ✅ 简单场景用 title 就够：JavaScript，多数现代屏幕阅读器会读出提示
• ❌ 避免嵌套：foo 违反规范，解析器可能丢弃内层或报错
• ❌ 不要滥用 id：只为关键术语加 id，比如后续要链接回定义的词；每个术语都加 id 会导致 DOM 膨胀且无实际用途

dfn 和 abbr、dl/dd 的分工很清晰，别混用

它们解决不同问题，强行替代会丢失语义精度。

• abbr 只用于缩写，必须配 title 展示全称，不承担“定义”职责：CSS
• dl/dt/dd 是定义列表结构，适合术语表、参数说明等静态罗列场景；dfn 是嵌入式语义，适合正文叙述中自然引入概念
• strong 或 em 是语气/强调，和定义无关；用它们代替 dfn，等于放弃对辅助技术和数据抽取的支持
• 注意兼容性：所有现代浏览器正确解析 dfn 的语义，但部分旧版 NVDA 或 JAWS 可能忽略 title，所以内部文本本身仍需可读、准确

最常被忽略的一点是：定义必须“完整”。光写 baseline 然后跟一句“这是个布局概念”，不算有效定义；读者和机器都需要知道它“是什么、怎么用、在哪起作用”。语义标签只是信标，真正的定义质量还得靠人写清楚。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！