必须紧邻完整定义语句，作为“定义锚点”绑定自洽解释；title属性优先取值，内部文本不可为空；父容器须为语义化块级元素（如、）；非首次出现或无定义时禁用。
dfn必须紧邻定义语句，不能单独出现
单独写 <dfn>DOM</dfn> 而不接任何解释，就等于没定义——浏览器和屏幕阅读器会忽略它，知识图谱抽取工具也无法识别语义关系。它不是占位符，而是“定义锚点”，必须绑定到一句完整、自洽的定义中。
常见错误现象：
– 列表项里单独列 <li><dfn>fetch()</dfn></li>，后面没解释
– 标题中用 <h2><dfn>Accessibility</dfn></h2>，但正文中才开始讲含义
– 把 <dfn></dfn> 塞进代码块或 <pre class="brush:php;toolbar:false;"></pre> 里，破坏嵌套规则
实操建议：
– 定义必须出现在同一段落内，例如：<p><dfn title="Document Object Model">DOM</dfn> 是网页内容的编程接口，以树状结构表示 HTML 文档。</p>
– 若定义跨多段（如先引入再展开），<dfn></dfn> 必须放在第一段的术语上，且后续段落需逻辑连贯、不可中断
title属性优先级最高，但内部文本不能空
<dfn></dfn> 提取“被定义术语”的值有严格顺序：先看 title 属性，再看子元素的 title，最后才取自身文本。这意味着 <dfn title="HyperText Markup Language">HTML</dfn> 的语义是定义 “HyperText Markup Language”，不是 “HTML”。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
– 写成 <dfn title="HTTP"></dfn>，内部为空，辅助技术无法读出可见词，违反可访问性原则
– 误以为 title 是提示框，给所有 <dfn></dfn> 都加冗余说明，反而干扰语义聚焦
– 在缩写场景下把顺序搞反，例如 <dfn title="DOM">Document Object Model</dfn>，实际定义的是字符串 "DOM"，而非其含义
正确做法：
– 缩写优先用全称作 title，缩写本身为可见文本：<dfn title="Document Object Model">DOM</dfn>
– 技术函数名等无需展开时，直接用文本：<dfn>querySelectorAll()</dfn>，不加 title
父元素必须构成定义上下文，不能随便套div
<dfn></dfn> 不是孤立存在的标签，它的语义依赖于祖先节点是否能承载“定义环境”。规范明确要求其最近的块级祖先应是 <p></p>、<section></section>、<dt></dt> 或 <figcaption></figcaption> 这类语义清晰的容器。
典型错误：
– 直接把 <dfn></dfn> 当作 <div> 子元素：<code><div>
<dfn>baseline</dfn> 是 CSS 中行内对齐的参考线。</div> —— 这个 <dfn></dfn> 语义断裂
– 在表格单元格里用：<td><dfn>viewport</dfn></td>，缺乏定义上下文支撑
替代方案：
– 换成 <p></p> 包裹整句定义
– 若必须在布局容器中使用，给该容器加 role="definition" 显式声明语义
– 术语表场景优先用 <dl>
<dt><dfn>...</dfn></dt>
<dd>...</dd>
</dl> 组合
别把它当样式标签，斜体只是浏览器默认行为
现代浏览器默认给 <dfn></dfn> 加 font-style: italic，但这不是规范要求，也不影响语义。一旦项目用了 CSS 重置（比如全局设 dfn { font-style: normal; }），斜体就没了——这完全合法，且语义依然有效。
为什么有人误用：
– 看到斜体效果，就拿 <dfn></dfn> 替代 <em></em> 或 <strong></strong> 做强调
– 为了“让 API 名看起来专业”而批量包裹所有函数名，不管是否首次定义
– 用 <dfn></dfn> 实现视觉高亮，结果导致屏幕阅读器反复播报“这是定义”，打断阅读流
关键提醒：
– 真要控制样式，用 class：<dfn class="api-term">fetch()</dfn>
– 如果只是重复提及已定义术语（如后文说“调用 fetch() 时…”），就不要套 <dfn></dfn>
– <dfn></dfn> 的价值不在眼睛看到什么，而在机器能否准确提取“术语-定义”这对结构化信息
