dfn标签仅用于标记术语首次正式定义，必须紧邻完整定义语句且在同一段落内；优先提取title属性值作为被定义项，需避免孤立使用、跨段落、嵌套或误用为强调。
dfn 标签不是用来“加斜体”或“高亮词”的，它只干一件事：标记某个术语**在此处被首次正式定义**。用错就等于把语义信号发给屏幕阅读器和爬虫，却没配对上真实定义——结果是可访问性降级、术语提取失败、后期维护混乱。
dfn 必须紧邻完整定义语句，不能孤立出现
浏览器和辅助技术不会去“猜”哪句话在解释 dfn 里的词。它只认一个硬规则：该 dfn 元素必须出现在能独立表达含义的定义句中，且定义内容需在同一段落内或通过显式属性关联。
- ✅ 正确：
<p><dfn>DOM</dfn> 是文档对象模型，一种将 HTML 文档表示为树形结构的编程接口。</p> - ❌ 错误：
<p><dfn>DOM</dfn></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>它是文档对象模型……</p>（定义跨段落，且无aria-describedby或id关联） - ❌ 错误：
<h2><dfn>Accessibility</dfn></h2>（dfn不允许作为<h2></h2>的直接子元素；标题里不构成定义语境） - ❌ 错误：
<ul><li><dfn>HTTP</dfn></li></ul>（列表项不是承载定义的合法上下文）
title 属性决定“被定义的是什么”，不是可选项
dfn 的术语值提取有明确优先级：先看 title 属性，再看子元素的 title，最后才取自身文本。这个顺序直接影响知识图谱抽取、术语表生成、屏幕阅读器播报内容。
- ✅ 缩写场景：
<dfn title="Document Object Model">DOM</dfn>→ 被定义项是"Document Object Model"，不是"DOM" - ❌ 反向错误：
<dfn title="DOM">Document Object Model</dfn>→ 实际定义的是字符串"DOM"，语义完全错位 - ⚠️ 注意空格：
<dfn> fetch() </dfn>中前后空格会被计入文本内容，导致提取出" fetch() "；应写作<dfn>fetch()</dfn> - ✅ 嵌套
code可行：<dfn><code>fetch()，只要code没带title，仍以fetch()为术语值
如何让 dfn 和解释真正绑定？别只靠位置
仅靠“挨得近”不够稳定。当定义较长、结构复杂，或需支持自动化处理时，必须显式建立连接。
- ✅ 推荐组合：
<dfn id="semantics" aria-describedby="def-semantics">语义化</dfn><p id="def-semantics">指使用具有明确含义的 HTML 元素（如 <code>nav、article）组织内容。 - ✅ 简单场景用
title就够：<dfn title="客户端执行的脚本语言">JavaScript</dfn>，多数现代屏幕阅读器会读出提示 - ❌ 避免嵌套：
<dfn><dfn>foo</dfn></dfn>违反规范，解析器可能丢弃内层或报错 - ❌ 不要滥用
id：只为关键术语加id，比如后续要链接回定义的词；每个术语都加id会导致 DOM 膨胀且无实际用途
dfn 和 abbr、dl/dd 的分工很清晰，别混用
它们解决不同问题，强行替代会丢失语义精度。
-
abbr只用于缩写，必须配title展示全称，不承担“定义”职责：<abbr title="Cascading Style Sheets">CSS</abbr> -
dl/dt/dd是定义列表结构，适合术语表、参数说明等静态罗列场景；dfn是嵌入式语义，适合正文叙述中自然引入概念 -
strong或em是语气/强调，和定义无关；用它们代替dfn，等于放弃对辅助技术和数据抽取的支持 - 注意兼容性：所有现代浏览器正确解析
dfn的语义，但部分旧版 NVDA 或 JAWS 可能忽略title，所以内部文本本身仍需可读、准确
最常被忽略的一点是：定义必须“完整”。光写 <dfn>baseline</dfn> 然后跟一句“这是个布局概念”，不算有效定义；读者和机器都需要知道它“是什么、怎么用、在哪起作用”。语义标签只是信标，真正的定义质量还得靠人写清楚。
