dfn标签仅在术语首次出现且紧邻完整定义句时合法；必须嵌套于p、section等语义块级元素中，定义需为同一段落内自然语言句子，title属性优先决定被定义项，错用将发送错误语义信号。
用 dfn 标签定义学术术语，不是加斜体、不是高亮词、更不是“看起来像定义就行”——它只在术语**首次出现且紧邻完整定义句**时合法生效；错用等于向屏幕阅读器和搜索引擎发送错误语义信号。
dfn 必须出现在定义句开头，且定义必须在同一段落内
浏览器和辅助技术不解析上下文逻辑，只认“dfn + 紧随其后的自然语言解释”这个硬组合。跨段落、放标题里、塞进列表项，都直接失效。
-
✅ 正确：
<p><dfn title="Document Object Model">DOM</dfn> 是网页内容的编程接口，以树状结构表示 HTML 文档。</p> -
❌ 错误：
<p><dfn>DOM</dfn></p><p>它是文档对象模型……</p>（定义断开，无显式关联） -
❌ 错误：
<h2><dfn>Accessibility</dfn></h2>（h2不是定义上下文容器） -
❌ 错误：
<ul><li><dfn>fetch()</dfn></li></ul>（li不构成定义环境）
title 属性决定“被定义的是什么”，不是可选项
dfn 的语义提取有严格优先级：先取 title 属性值，再看子元素的 title，最后才读自身文本。命中即止，不会 fallback。这意味着空 title 或重复写法，等于主动破坏语义。
-
缩略词必须用全称作
title：<dfn title="Cascading Style Sheets">CSS</dfn>→ 定义的是 “Cascading Style Sheets” -
反向写法是语义反转：
<dfn title="CSS">Cascading Style Sheets</dfn>→ 实际定义的是字符串 "CSS" -
函数名等无需展开时可省略
title：<dfn>querySelectorAll()</dfn>合法，但<dfn title="querySelectorAll()">querySelectorAll()</dfn>无意义 -
空格会被计入文本：
<dfn> fetch() </dfn>提取出的是 " fetch() "，应写作<dfn>fetch()</dfn>
父容器必须是语义化块级元素，否则 dfn 断连
dfn 的定义上下文依赖最近的块级祖先。规范只认可 p、section、dt、figcaption 这四类容器。套在 div、td 或 pre 里，等于把锚点钉在虚空里。
立即学习“前端免费学习笔记（深入）”；
-
❌ 错误：
<div><dfn>baseline</dfn> 是 CSS 中行内对齐的参考线。</div>（div无定义语义） -
❌ 错误：
<td><dfn>viewport</dfn></td>（表格单元格不是定义容器） -
❌ 错误：
<pre><dfn>HTML</dfn></pre>（违反内联元素嵌套规则） -
✅ 正确：用
p包裹整句；若必须在布局容器中，可加role="definition"显式声明
dfn 不是强调工具，嵌套或滥用会污染语义
dfn 只标记“此处是术语首次定义”，不是视觉样式标签，也不是通用强调手段。嵌套、重复使用、包裹解释性文字，都会让辅助技术和自动化工具无法识别真实含义。
-
禁止嵌套：
<dfn><dfn>API</dfn></dfn>— 外层dfn的title被忽略，语义混乱 -
不能包裹整段定义：
<dfn><p>A markup language</p></dfn>— 违反内容模型，dfn是内联元素 -
非首次出现禁用：第二、第三次出现的
DOM，再套dfn就等于告诉屏幕阅读器“这个词又被定义了一次” -
别把它当
abbr用：<dfn title="JavaScript">JS</dfn>是错的 —abbr表示缩写，dfn表示首次定义，二者不可互换
真正难的不是怎么写标签，而是判断“这句话是不是真的在定义它”——很多所谓定义其实是举例、类比或上下文暗示，硬套 dfn 反而让语义失真。一个 dfn 是否有效，删掉所有 CSS 后，靠纯文本是否还能一眼看出“哪个词被哪句话定义”，就是最朴素的检验标准。
