标签配合 title 属性是浏览器原生支持缩写提示的最佳实践，语义正确、无障碍友好；但 title 在移动端基本无效，需额外方案兼顾可访问性与体验。
用 <abbr></abbr> 标签加 title 属性最直接
浏览器原生支持，不用 JS 就能 hover 显示全称，语义正确、无障碍友好。关键点是：title 必须是纯文本，不能含 HTML；<abbr></abbr> 必须有 title 才会触发提示。
常见错误：只写 <abbr>API</abbr> 不加 title，结果什么也不提示；或者把 title="Application Programming Interface" 写成 title="<span>Application...</span>"，HTML 会被当作文本原样显示，不解析。
正确写法示例：
<abbr title="Application Programming Interface">API</abbr>
注意：title 值里换行、多余空格会被浏览器自动压缩为单个空格，所以不用刻意格式化。
title 提示在移动端基本不可靠
iOS Safari 和 Android Chrome 都不支持长按触发 title 提示，部分安卓 WebView 完全忽略。这意味着依赖 title 的缩写说明，在手机上大概率“看不见”。
如果必须兼顾移动端，得额外处理：
- 用 CSS 加
::after伪元素在缩写后显示括号全称（适合静态内容） - 用 JS 绑定点击事件，弹出 tooltip 或展开详情（适合交互密集页）
- 直接在正文里首次出现时写明：“API（Application Programming Interface）”，后续再用
<abbr></abbr>
别指望 title 在手机上“悄悄起作用”——它基本不起作用。
语义和可访问性比视觉效果更重要
屏幕阅读器会读出 title 值，比如 JAWS、NVDA 读 <abbr title="Cascading Style Sheets">CSS</abbr> 时，会说“CSS，Cascading Style Sheets”。这是它真正的价值所在。
容易被忽略的细节：
-
<abbr></abbr>应该只用于真正需要解释的缩写或首字母缩略词，不是所有大写字母组合都适用（比如USA可以，但Id这类变量名不该套） - 同一页面多次出现同一缩写，首次出现建议带全称文字说明，后续可用
<abbr></abbr>简化 - 避免嵌套：
<abbr title="HyperText"><abbr title="Markup Language">HTML</abbr></abbr>是错的，应统一用外层<abbr title="HyperText Markup Language">HTML</abbr>
样式控制有限，别强求自定义气泡
title 提示框完全由系统渲染，无法用 CSS 修改颜色、圆角、箭头或延迟时间。试图用 pointer-events: none 或 z-index 干预毫无意义。
如果设计要求统一 tooltip 样式（比如深色背景、12px 字体），就必须放弃 title，改用 JS + 自定义 DOM 元素实现。这时候 <abbr></abbr> 只保留语义作用，提示逻辑另起炉灶。
顺带一提：abbr[title] 可以用 CSS 选中并加下划线或虚线边框，但仅此而已：
abbr[title] { border-bottom: 1px dotted #666; }
复杂交互和定制化提示，从来就不是 <abbr></abbr> + title 的职责范围。
