仅用于术语首次出现且紧邻其定义时，包裹被定义词本身，不可用于视觉强调或嵌套，否则破坏语义结构与可访问性。
<dfn></dfn> 不是用来“加斜体”或“突出显示”的视觉标签，它的作用是明确告诉浏览器和辅助技术：“这个词在此处被定义”。用错就等于给语义结构埋雷。
什么时候该用 <dfn></dfn>？
只在术语首次出现、且紧邻其完整定义时使用。比如在段落里写“<dfn>DOM</dfn> 是文档对象模型的缩写”，这时 <code>DOM 是被定义项，整句话就是它的定义上下文。
- 适合场景：技术文档、API 手册、术语表开头的解释句、教学文章中首次引入概念
- 不适合场景：列表项里单独列一个词、标题中堆砌术语、重复出现后的后续引用
- 注意：
<dfn></dfn>必须包裹“被定义的词本身”，不是整个定义句——定义句由父元素（如<p></p>或<dd></dd>）承载
title 属性怎么影响语义？
当 <dfn></dfn> 带 title 属性时，它会覆盖内部文本作为“被定义术语”的值。这对缩写特别有用。
- 正确：
<p><dfn title="Document Object Model">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/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>→ 被定义术语是"Document Object Model" - 错误：
<p><dfn title="DOM">Document Object Model</dfn>...</p>→ 语义反转，实际定义的是"DOM"这个字符串，而非其含义 - 兼容性提示：所有现代浏览器都按标准解析
title，但部分旧屏幕阅读器可能忽略它，所以仍建议让内部文本本身可读
为什么不能用 <dfn></dfn> 替代 <em></em> 或 <strong></strong>？
因为它们解决的是不同层级的问题：<em></em> 表示语气强调，<strong></strong> 表示重要性提升，而 <dfn></dfn> 是纯语义声明——它不承诺任何样式，也不改变信息权重。
- 后果举例：搜索引擎可能把
<dfn></dfn>内容加入术语索引；无障碍工具会为它触发“这是定义”的语音提示；CSS 重置后它依然保有定义语义 - 常见误用：为了视觉上“让词变斜体”而套
<dfn></dfn>，结果破坏了文档结构可访问性 - 替代方案：真要控制样式，用
class配合 CSS，比如<span class="term">DOM</span>
嵌套和父元素有哪些硬性要求？
<dfn></dfn> 必须出现在能承载定义的上下文中，否则语义断裂。HTML 规范明确要求其祖先节点需构成“定义环境”。
- 推荐父元素：
<p></p>、<section></section>、<dt></dt>（配合<dd></dd>）、<figcaption></figcaption> - 禁止直接子级：
<dfn></dfn>不能是<div> 或 <code><span></span>的直系子元素，除非该<div> 本身语义上是定义容器（如带 <code>role="definition"） - 嵌套限制：不要在
<dfn></dfn>里再套<dfn></dfn>，也不要用<dfn></dfn>包裹整个定义段落——它只包“那个词”
最容易被忽略的一点：即使你写了 <dfn>Web API</dfn>，如果前后没有实质性的解释性文字，这个 <dfn></dfn> 就是空语义。它的价值永远绑定在“词+定义”的最小闭环里。
