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> - 后续再用
@#@#@#@#@#@#@#@#@#@0→ 链接的title会覆盖abbr的 - ✅ 正确：
@#@#@#@#@#@#@#@#@#@1（去掉链接自身title） - ❌ 禁止嵌套：
<abbr title="Hypertext"><abbr title="Markup Language">HTML</abbr></abbr>→ 内层title基本被丢弃 - ❌ 不要在
<code>或<pre class="brush:php;toolbar:false;"></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，就等于没写。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
