abbr必须带非空纯文本title，否则语义失效；首次出现需正文写出全称+括号缩写，不可仅依赖title；禁用HTML、括号、冗余词、空格或嵌套；移动端及读屏依赖aria-label保障可访问性。
abbr必须带非空纯文本title，否则语义失效
写了abbr却没提示、读屏不读全称、SEO不识别？大概率是title属性为空、含HTML、带括号或冗余词。浏览器和辅助工具只认纯文本全称，其他都当无效处理。
-
title="Cascading Style Sheets"✅ 标准、完整、无标点、大小写一致 -
title="CSS"❌ 缩写本身不是全称 -
title="API (Application Programming Interface)"❌ 括号+缩写重复 -
title=""或title=" "❌ 等同于没写abbr -
title="<em>JavaScript</em>"❌ HTML标签会被原样显示，不解析
首次出现必须正文写出全称+括号缩写，不能只靠title
光靠abbr+title不够——WCAG要求用户“第一眼就读懂”。悬停才看到全称，对移动端、键盘导航、非母语者都不友好。
- 正确写法：
<p>Application Programming Interface (API) enables communication</p> - 后续再用
<abbr title="Application Programming Interface">API</abbr>即可 - 机构名优先查官网：WHO →
title="World Health Organization" - 中文技术文档中写
URL时，务必加lang="en"，否则VoiceOver可能读成“U-R-L”
别嵌套abbr，也别往链接里硬塞title
abbr嵌套或与a混用，会导致title被忽略、读屏错乱、SEO语义断裂。
- ❌ 错误：
<a href="#" title="Go to home"><abbr title="HyperText Markup Language">HTML</abbr></a>→ 链接的title会覆盖abbr的 - ✅ 正确：
<a href="#"><abbr title="HyperText Markup Language">HTML</abbr></a>（去掉链接自身title） - ❌ 禁止嵌套：
<abbr title="Hypertext"><abbr title="Markup Language">HTML</abbr></abbr>→ 内层title基本被丢弃 - ❌ 不要在
<code>或<pre>里用abbr，样式易错乱，且语义冲突
移动端title基本不触发，别指望它当UI组件用
Chrome 和 Edge 自 2025 年起默认禁用title悬停渲染；iOS Safari 和 Android Chrome 在 WebView/PWA 中几乎不响应长按。它只是语义信号，不是提示框。
立即学习“前端免费学习笔记（深入）”；
- 想稳定提示？放弃
title，改用data-full+JS 或 CSS::after生成括号内容 - 若需读屏准确朗读，显式加
aria-label：<abbr title="Application Programming Interface" aria-label="Application Programming Interface">API</abbr> - 不要给
abbr设pointer-events: none或试图用z-index定制气泡——系统级title完全不受CSS控制 - 已成通用词（如
HTTP、URL）在开发者文档中可不标；但面向新手或跨领域文档，仍建议首次标注
abbr不是装饰，是结构声明——写错一个title，就等于没写。 
