dfn 和 abbr 分工明确：dfn 标记首次出现且紧随定义的术语，abbr 标记需展开的缩写并依赖 title 属性；二者可嵌套（dfn 包裹 abbr），但不可倒置，且均须满足语义与可访问性要求。
dfn 和 abbr 不是可互换的“解释工具”，而是分工明确、语义互补的两个标签：一个标记“正在被定义的术语”，一个标记“需要展开的缩写”。用对了，才能让机器（搜索引擎、读屏软件）和人同时准确理解内容。
dfn 负责“定义发生的位置”
它不是装饰性标签，也不负责提供解释文字本身。它的作用是锚定——告诉浏览器：“这个词，就在此处被正式定义”。必须满足三个条件才该用：
• 该词在整篇文档中首次出现
• 定义语句紧随其后（最好在同一段落内，用冒号、逗号或“是/指/表示”等引导）
• 父容器是语义化块级元素，如 <p></p>、<section></section> 或 <dt></dt>
例如：<p><dfn>响应式设计</dfn>：一种使网页适配不同屏幕尺寸的布局方法。</p>
这里 <dfn></dfn> 标记的是“响应式设计”这个词本身，而冒号后的句子就是它的明确定义。
abbr 负责“缩写的可访问展开”
它专为缩略语服务，核心是通过 title 属性暴露完整形式。用户悬停可见，读屏软件可朗读，搜索引擎也能识别上下文。
• 只在缩写首次出现时使用，后续直接写缩写即可
• title 必须准确、完整、人类可读，比如 title="Cascading Style Sheets"，不能简写成 title="样式表"
• 没有 title 的 <abbr></abbr> 在可访问性上视为不完整
例如：<p>我们使用 <abbr title="Application Programming Interface">API</abbr> 与后端通信。</p>
二者嵌套时，语义必须对齐
当一个术语本身是缩写，且你又要在首次出现时定义它，就可以合法嵌套：<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>。
• 外层 <dfn></dfn> 表示“HTML 这个词在此处被定义”
• 内层 <abbr></abbr> 表示“HTML 是一个缩写，全称是……”
• <abbr></abbr> 必须带 title，<dfn></dfn> 不应再设 title，避免冲突
• 不能反过来嵌套，比如 <abbr><dfn>HTML</dfn></abbr> 是语义错位——abbr 不负责定义
实际应用中的关键细节
• <dfn></dfn> 的语义提取优先级严格：先取 title 值，再看子元素（如 <abbr></abbr>）的 title，最后才读自身文本。顺序错了，定义就错了
• 移动端无法触发 title 提示，所以依赖 abbr 或 dfn 做关键解释时，务必同步提供可见文本（如括号内写出全称）
• 浏览器默认样式不统一（比如 Safari 不给 <dfn></dfn> 加斜体），但语义价值远高于视觉表现，不应因样式差异放弃使用
