dfn标签专用于标记术语首次出现且紧邻明确定义语句的位置，必须包裹术语本身、置于语义化块级容器（如）内，术语值按title属性→子元素title→自身文本的优先级提取，不可孤立或跨段落使用。
dfn 标签不是加斜体的快捷方式，也不是术语高亮工具——它专用于标记术语**首次出现且紧邻明确定义语句**的位置。用对了，能帮屏幕阅读器准确播报、让搜索引擎提取术语含义、为自动生成术语表打下基础；用错了，等于向辅助技术发送错误信号。
必须同时满足三个条件才用 dfn
缺一不可：
- 该词是整篇文档中第一次出现（哪怕前文没加 dfn，只要已解释过，这次就不能再套）
- 紧随其后的文字（同一句子或紧邻段落内）给出明确解释，比如“是……”“指……”“表示……”，不是泛泛提及
- 这个词属于需澄清的专业概念，如 DOM、viewport、validator，而不是通用词如 button 或 click
定义必须紧邻，不能孤立或跨段落
浏览器和读屏软件只认“dfn + 紧跟其后的自然语言解释”这个组合。单独一行写 <dfn>fetch()</dfn>，没有任何说明，就等于没定义。
- ✅ 正确：
<p><dfn title="Document Object Model">DOM</dfn> 是网页内容的编程接口，以树状结构表示 HTML 文档。</p> - ❌ 错误：
<p><dfn>DOM</dfn></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/3387" title="量子探险"><img src="https://img.php.cn/upload/ai_manual/001/246/273/178599258217989.png" alt="量子探险" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/3387" title="量子探险" class="overflowclass">量子探险</a> <p class="overflowclass">量子探险是一款AI文本写作工具，AI 小说写作工具：长文本一键生成。</p> </div> <a rel="nofollow" href="/ai/3387" title="量子探险" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>它是文档对象模型……</p>（定义跨段落，无显式关联） - ❌ 错误：
<h2><dfn>Accessibility</dfn></h2>（标题不是定义上下文）
title 属性决定“被定义的是什么”，顺序不能错
提取术语值有严格优先级：先看 title 属性，再看子元素（如 abbr）的 title，最后才取 dfn 自身文本。命中即止，不回退。
- 缩写场景：
<dfn title="Cascading Style Sheets">CSS</dfn>→ 定义的是全称，不是缩写 - 反向错误：
<dfn title="CSS">Cascading Style Sheets</dfn>→ 实际定义的是字符串 "CSS"，语义反转 - 函数名等无需展开时，可省略 title：
<dfn>querySelectorAll()</dfn> -
dfn内部必须有可见文本，<dfn title="HTTP"></dfn>是无效写法
父容器必须是语义化块级元素
dfn 的定义语境依赖祖先节点是否构成“可承载定义的环境”。规范只认可最近的块级祖先为 <p></p>、<section></section>、<dt></dt> 或 <figcaption></figcaption>。
- ✅ 正确：
<p><dfn>baseline</dfn> 是 CSS 中行内对齐的参考线。</p> - ❌ 错误：
<div> <dfn>baseline</dfn> 是 CSS 中……</div>（<div> 无定义语义） <li>❌ 错误：<code><td><dfn>viewport</dfn></td>（表格单元格不支持定义上下文）
