abbr 标签必须带非空 title 属性才具语义有效性，仅用于向辅助技术、搜索引擎和 DOM 传达缩写全称；首次出现须在正文中自然呈现全称与缩写关系，且 title 值应为标准纯文本全称，不可含解释或 HTML。
abbr 标签加 title 属性不是“写了就能看见全称”的视觉技巧，而是语义标记——它只为辅助技术、搜索引擎和 DOM 提供可解析的缩写含义。不加 title，就等于没用。
abbr 必须带非空 title 才算有效
浏览器和读屏软件只认 title 属性值，其他任何方式（比如把全称塞进标签内容里、用 data-title、或只写 <abbr>API</abbr>）都无效。
-
title值必须是非空纯文本，不能是空字符串title=""、不能含 HTML 标签、不能有换行或多余空格（浏览器会自动压缩成单空格，但别依赖这个） - 必须是标准全称，不加解释性文字：✅
title="Cascading Style Sheets"❌title="CSS, a styling language" - 中英文混排时注意标点统一：✅
title="JavaScript Object Notation"❌title="JSON (JavaScript Object Notation)" - 如果缩写本身是链接，
title会被链接的title覆盖，此时需把abbr放进a内部，并显式保留title
首次出现缩写时，正文里必须写出全称 + 缩写
仅靠 abbr[title] 不足以满足可访问性要求。WCAG 明确要求：读者可能不熟悉的缩写，首次出现必须自然呈现全称与缩写的关系。
- 正确写法：
<p>Application Programming Interface (API) enables...</p>，其中API用abbr包裹 - 错误写法：
<p><abbr title="Application Programming Interface">API</abbr> enables...</p>—— 没有上下文全称，视障用户和普通用户第一眼都看不懂 - 后续段落中再出现
API，仍建议保留abbr+title，因为每个abbr的语义是独立的，不会跨元素继承
移动端和现代桌面浏览器中，title 悬停提示基本不可靠
Chrome 自 2025 年起默认禁用 title 悬停渲染；iOS Safari 长按最多闪现半秒；Android Chrome 和 WebView 基本忽略。键盘用户无法聚焦、高对比度模式下常被隐藏——它不是 UI 组件，只是语义信号。
立即学习“前端免费学习笔记（深入）”；
- 别把关键信息藏在
title里：比如术语表、文档开头、API 文档首屏，直接写CSS (Cascading Style Sheets) - 如需稳定视觉提示，用 CSS 补位：
abbr { text-decoration: underline dotted #666; cursor: help; }和abbr[title]::after { content: " ⓘ"; font-size: 0.8em; color: #999; } - 如需交互式展开，必须用
data-* + JavaScript实现，绕开原生title - 对中文页面中的英文缩写（如
URL），建议加lang="en"，避免读屏软件按中文音读
哪些词不该用 abbr + title
滥用反而破坏语义结构和阅读流。它的适用前提是：“该缩写在当前文档中属于专业/非常规形式，且目标读者可能不熟悉其全称”。
- 已成通用词汇的词（
HTML、URL、laser、radar）通常无需标注，除非面向完全零基础人群 - 代码标识符不是语言学缩写：变量名
usr、函数名initDB不该套abbr，会误导读屏软件 - 带版本号的简写（
v2、APIv3）不属于缩写范畴，应直接写文本或用span - 纯中文简称（如“人社部”）不符合 W3C 对
abbr的设计预期，推荐用dfn或显式说明
真正容易被忽略的是：是否该标，取决于内容策略和读者背景，而不是语法能不能写。一个面向前端工程师的文档里写 <abbr title="Cascading Style Sheets">CSS</abbr>，不如直接省略——他们不需要。
