应使用缩写标记真实存在通用全称且易混淆的缩写，首次出现时必须带title属性，避免在代码块或品牌名中滥用，并通过css添加下划线和help光标提升可访问性。
用 <abbr></abbr> 标签包裹缩写词，必须带 title 属性
浏览器对 <abbr></abbr> 的默认行为很弱——不加 title 就等于没写。鼠标悬停无提示，屏幕阅读器也读不出全称。正确写法是：<abbr title="Application Programming Interface">API</abbr>。注意 title 值里不要加句号，避免朗读时多一个停顿；大小写保持与术语惯例一致（比如 “HTML” 不写成 “html”）。
哪些词适合用 <abbr></abbr>，哪些不该硬套
只用于真实存在通用全称、且首次出现或上下文易混淆的缩写。比如 <abbr title="JavaScript Object Notation">JSON</abbr> 合理，但把 “CSS” 写成 <abbr title="Cascading Style Sheets">CSS</abbr> 在现代前端文档中反而冗余——它已是独立术语。常见误用包括：
– 对纯名词缩写（如 “UI”、“UX”）强行展开，而实际语境中读者已默认理解
– 在代码块、<pre class="brush:php;toolbar:false;"></pre> 或 <code> 标签内嵌套 <abbr></abbr>，导致样式错乱或解析异常
– 把技术品牌名（如 “React”、“Vue”）当缩写处理
<abbr></abbr> 的样式控制和可访问性补救
默认下 <abbr></abbr> 没有视觉提示，用户不知道它是可交互元素。建议加基础 CSS：
– 用 text-decoration: underline dotted 或 border-bottom: 1px dotted 明确标出
– 设置 cursor: help 强化悬停意图
– 避免仅靠颜色区分（如只变蓝），否则色觉障碍用户无法识别
– 若项目需支持旧版 IE（mouseenter 手动弹 tooltip，因为老 IE 忽略 title
和 <dfn></dfn>、<details></details> 的关键区别
<abbr></abbr> 只负责“缩写→全称”的映射，不是解释概念。别用它替代术语定义：
– <dfn></dfn> 用于首次定义术语（如 <dfn>闭包</dfn>），配合 <dl></dl> 更规范
– <details><summary>…</summary>…</details> 适合放多句说明、示例或对比，但会增加点击操作，不适合高频缩写
– 混用三者会导致语义混乱：比如把 “DOM” 包在 <details></details> 里，既破坏快捷访问，又让辅助技术难以线性读取
<abbr></abbr>，取决于读者当前认知上下文，而不是词典规则。
