abbr 必须带非空、准确、标准的 title 属性才具语义作用，否则等同普通 span；title 仅提供结构化语义，不适用于可控 ui 提示。
abbr 必须带 title 属性才真正起作用
没写 title 的 abbr 和普通 span 没区别：鼠标悬停不提示、屏幕阅读器跳过、搜索引擎收不到语义信号。HTML 规范明确要求，缩写必须通过 title 提供完整展开形式，否则语义失效。
常见错误现象包括：@#@#@#@#@#@#@#@#@#@0），必须把 abbr 放在 a 内部，并显式保留 title，否则链接自身的 title 会覆盖它
title 属性在桌面端只触发原生 tooltip，移动端基本无效
浏览器对 title 的支持非常有限：它只是系统级简易提示，不支持样式、动画、换行、点击或键盘聚焦。Chrome/Firefox 通常截断超 60–80 字符的内容，且所有空白符（含换行）会被自动折叠。
这意味着：
- 触屏设备用户无法触发
title提示——没有“悬停”概念 - 仅用键盘导航的用户（Tab 流）无法访问该内容，不符合 WCAG 2.1 要求
- 屏幕阅读器读取顺序是「缩写词 +
title值」，例如<abbr title="JavaScript">JS</abbr>会被读作 “JS JavaScript”，略显重复 - 如果页面中大量使用
abbr+title，屏幕阅读器可能频繁插入解释，打断阅读流
首次出现缩写时，建议正文先写全称再套 abbr
单纯依赖 abbr + title 不足以确保理解，尤其对认知障碍或非母语用户。WCAG 推荐在首次出现时，用自然语言写出全称，再用 abbr 包裹缩写。
正确写法示例：
<p>Application Programming Interface (<abbr title="Application Programming Interface">API</abbr>) 是一种软件交互规范。</p>
这样既满足语义标记，又让所有用户（无论是否依赖辅助技术）第一眼就看到含义。后续再次出现 API 时，可直接使用，无需重复 abbr。
- 机构名优先采用官网/维基的标准全称，如
WHO→title="World Health Organization" - 避免嵌套
abbr，例如<abbr title="HyperText Markup Language">HTML</abbr>: <abbr title="Cascading Style Sheets">CSS</abbr>，多数读屏会丢弃内层title - 已成通用词汇的缩写（如
laser、scuba）或日常敬称（如Mr.、Dr.）通常无需abbr
abbr 不是 tooltip 替代方案，真正需要可控提示得另起炉灶
如果你的目标是“悬浮显示带样式的解释”，abbr + title 不是解法。它只是语义标记手段，不是 UI 组件。
要实现可聚焦、可键盘操作、支持动画和样式的提示，应放弃原生 title，改用：
- 自定义 tooltip 组件（基于
data-*属性 + JS + ARIA 属性） - 确保触发元素有
aria-describedby，提示容器有role="tooltip"并管理 focus 流 - 服务端渲染时就必须输出完整结构，不要指望 JS 动态补
title——爬虫和 SSR 渲染识别不到
真正容易被忽略的是：abbr 的价值不在视觉提示，而在结构化语义。它服务于搜索引擎、翻译工具、拼写检查器，也构成无障碍基础链路的一环。别把它当装饰用，也别指望它扛起交互责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
