必须在缩写词首次出现且需同时表明“是缩写”和“正式定义”时，才用缩写；abbr须带自然语言全称title，dfn不可加title，顺序不可颠倒。
abbr 和 dfn 可以嵌套，但仅在一种明确场景下合法且有意义：缩写词首次被定义时。其他情况嵌套属于语义错误，反而损害可访问性与 SEO。
什么时候必须用 dfn 套 abbr
只有当一个缩写词在文档中第一次出现，且你同时想表达「这是个缩写」+「此处正式引入并定义它」两个意图时，才应写成 <dfn><abbr title="Application Programming Interface">API</abbr></dfn>。
- 必须满足：该缩写此前未在页面中出现过（否则不是“首次定义”）
-
abbr必须带title属性，内容为完整、自然语言的全称（不能是“参见附录”之类） -
dfn本身不应加title—— 否则会覆盖abbr的提示，屏幕阅读器可能只读外层title - 嵌套顺序只能是
<dfn><abbr>...</abbr></dfn>；反过来或并列都无效
为什么不能用 dfn 单独解释缩写
dfn 的语义是“此处正在定义一个术语”，不是“此处展开一个缩写”。浏览器和辅助技术不会把 <dfn title="Application Programming Interface">API</dfn> 当作缩写处理。
- 没有
abbr标签，title不会被识别为缩写展开，SEO 和语音朗读都丢失关键信息 - 移动端无 hover，
title在dfn上几乎不可见，等于没提供解释 - 若用户禁用 tooltip 或使用键盘导航，该解释完全不可达
常见错误写法及后果
以下写法看似能“hover 出说明”，实则破坏语义结构：
立即学习“前端免费学习笔记（深入）”；
-
<p>我们调用 <dfn title="Application Programming Interface">API</dfn> 接口</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>→ 缺少abbr，缩写语义丢失 -
<p>前端使用 <abbr title="Cascading Style Sheets">CSS</abbr> 和 <dfn>组件化</dfn></p>→dfn用在非首次定义处，语义冗余 -
<p><dfn><abbr title="JavaScript">JS</abbr></dfn> 是一门脚本语言</p>→abbr的title写成了简称而非全称，违反规范
这些写法会让屏幕阅读器误读、搜索引擎无法准确提取术语关系、键盘用户错过关键解释。
真正需要手动补救的兼容性盲区
即使语义写对了，abbr + dfn 嵌套在实际交付中仍有两处必须人工干预：
- 所有主流浏览器默认不显示
abbr[title]的提示框（尤其 Safari 移动版），必须额外加 CSS 规则如abbr[title]:after { content: " (" attr(title) ")"; }才能让全称可见 -
dfn默认斜体（Chrome/Firefox），但 Safari 不斜体，若靠样式区分定义项，需统一重置或补充视觉标记（如小字号上标、浅色底纹）
别指望浏览器自动做好这件事——语义正确只是起点，可见性补救才是用户真正能“看到解释”的关键一步。
