abbr标签必须有非空title属性，值为标准全称且大小写准确，中英文混排时加lang="en"，避免嵌套在a中导致title被忽略，首次出现宜前置全称，移动端tooltip不可靠需依赖辅助技术。

abbr 必须带 title 属性，否则在

里也等于没写

很多人在

里套 abbr，但漏掉 title，结果鼠标悬停没提示、读屏软件不朗读、SEO 也收不到语义信号。浏览器只把没 title 的 abbr 当普通内联元素渲染，虚线下划线都可能不显示。

正确写法只有一个硬规则：abbr 标签必须有非空 title 属性，且值为纯文本全称：

<p>我们使用 <code><abbr title="Application Programming Interface">API</abbr></code> 与后端通信。</p>

• title 值不能是“即 API”“也就是……”这类冗余表达，直接写标准全称
• 大小写要和权威定义一致，比如 title="JavaScript" 不能写成 "javascript"
• 中英文混排时加 lang="en"，避免 VoiceOver 把 URL 读成 “U-R-L”

嵌套在

中时，别让 标签吞掉 的 title

常见错误是把 abbr 放进 a 里，比如：

<p>参考 <a href="https://www.php.cn/link/046127d915c90b42bc1a1376242d1e21"><abbr title="Representational State Transfer">REST</abbr></a> 规范。</p>

这时 Chrome/Firefox 会优先读 a 的 title（如果有的话），甚至完全忽略 abbr 的 title，导致屏幕阅读器跳过 REST 全称。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 解决方案：删掉 a 的 title，或显式设为空：<a href="https://www.php.cn/link/046127d915c90b42bc1a1376242d1e21" title="">
• 更稳妥的做法是把链接逻辑外移，比如 <abbr title="Representational State Transfer"><a href="https://www.php.cn/link/046127d915c90b42bc1a1376242d1e21">REST</a></abbr> —— 但注意这违反部分 WCAG 指南，因 abbr 内部不应含交互元素
• 推荐折中：用 aria-label 补充，如 <a href="https://www.php.cn/link/046127d915c90b42bc1a1376242d1e21" aria-label="REST (Representational State Transfer)">REST</a>

同一缩写在

中多次出现，要不要每个都加 title？

规范建议始终保留 title，尤其当段落跨页面、或用户可能从中间进入时。但实际中容易被忽略的是首次出现的上下文处理：

• 首次出现缩写，最好前置全称，例如：<p>Application Programming Interface (<abbr title="Application Programming Interface">API</abbr>) 是一种接口规范。</p>
• 后续同段落中再出现 API，仍建议保留 title，因为 CSS 或 JS 可能依赖它做样式/行为控制（比如 hover 提示、统计点击）
• 若省略 title，document.querySelector('abbr').title 会返回 undefined，JS 逻辑可能意外中断

浏览器对

里 的支持差异很实在

桌面端 Chrome/Firefox/Safari 悬停显示 tooltip 是可靠的；但移动端几乎不可靠：iOS Safari 长按才闪一下，Android Chrome 基本不触发。这意味着你不能把关键解释只塞进 title。

• 真正稳定起作用的是辅助技术——NVDA、VoiceOver 会准确朗读 title 内容
• CSS 可增强视觉识别，但不能覆盖语义缺失：例如 abbr { text-decoration: underline dotted #666; cursor: help; }
• 避免嵌套其他行内标签（如 strong、span）在 abbr 内，除非有明确样式需求；嵌套会干扰读屏器顺序和语义流

最常被忽略的一点：不是所有“看起来像缩写”的词都该用 abbr。比如 v2、initDB、中文简称“人社部”，都不符合 HTML 对 abbreviation 的语义定义——它们不是语言学意义上的缩写，强行标注反而误导辅助技术。