dfn 标签语义是定义术语，非缩写展开；缩写必须用 abbr 并配 title；仅当首次定义缩写词时可嵌套 dfn+abbr，且 abbr 必须有 title、dfn 不应设 title。
dfn 标签本身不负责缩写展开，别用它替代 abbr
dfn 的语义是“此处正在定义一个术语”，不是“这是个缩写”。哪怕你给 dfn 加了 title 属性，浏览器和辅助技术仍只把它当定义项处理，不会触发缩写提示行为。常见错误是这样写：
<p>我们使用 <dfn title="Application Programming Interface">API</dfn> 与后端通信。</p>
这看起来能 hover 出解释，但实际语义错位：API 是缩写，不是被定义的新术语（除非上下文首次引入并明确定义其含义）。正确做法是分开职责：
- 用
abbr标记缩写本身，并通过title提供全称 - 用
dfn标记该术语首次被定义的位置（可与abbr嵌套）
嵌套 dfn + abbr 的唯一合理场景：首次定义缩写术语
当某个缩写词在文档中第一次出现，且你要同时完成「标记它是缩写」+「声明这是它的定义位置」两件事时，嵌套才成立。例如：
<p>HTML，即 <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>，是网页的标准标记语言。</p>
这里嵌套的逻辑是：dfn 表示“HTML 这个词在此处被定义”，而 abbr 表示“HTML 是一个缩写”，两者语义叠加成立。注意要点：
-
abbr必须有title属性，且内容必须是完整、人类可读的全称 -
dfn不应额外加title—— 否则会和abbr的title冲突，导致冗余或不可预测行为 - 不能反过来嵌套：
<abbr><dfn>...</dfn></abbr>是无效结构，违反语义层级
title 属性在 dfn 和 abbr 中的行为差异
虽然都支持 title，但作用完全不同：
-
abbr[title]：提供缩写的扩展名，是强制性语义要求；没有title的abbr在可访问性上视为不完整 -
dfn[title]：仅作辅助说明，非必需；它的值不是定义本身，而是对定义的简短补充（比如“见第3节”） - 两者混用时，若都在同一元素上设
title（如<dfn title="..."><abbr title="...">...</abbr></dfn>），多数屏幕阅读器只读取外层dfn的title，内层abbr的title被忽略
真正容易被忽略的兼容性细节
所有主流浏览器都支持 dfn 和 abbr，但默认样式极不统一：
-
dfn在 Chrome/Firefox 中默认斜体，Safari 默认不斜体 -
abbr的title提示在移动端基本不可用（无 hover），且部分屏幕阅读器需开启特定模式才朗读 - 如果你依赖
title做关键解释，必须同步提供可见文本（比如在括号内写出全称），否则对键盘用户、移动用户、禁用 tooltip 的用户就是信息黑洞
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
