abbr 标签必须带 title 属性才生效，否则仅为普通内联元素；title 值作悬停提示且影响屏幕阅读器朗读，需用中文全称、避免空格，并配合 CSS 添加下划线与 help 光标以保障可访问性。
abbr 标签必须带 title 属性才生效
不加 title，<abbr> 就只是普通内联元素，鼠标悬停不会显示提示。浏览器只把 title 值作为 tooltip 内容渲染，和 <div title="xxx"> 行为一致，不是语义增强的独立功能。
常见错误是写成这样：<abbr>HTML</abbr> —— 看似语义正确，实则完全没提示效果。
-
title值建议用中文全称，如<abbr title="超文本标记语言">HTML</abbr> - 避免空格或换行：
title=" 超文本标记语言 "两端空格会被保留，影响可读性 - 若需动态生成，确保服务端或 JS 注入时
title字段非空且已转义（防止 XSS）
abbr 的样式控制依赖 CSS，但默认无视觉区分
原生 <abbr> 没有下划线、虚线边框等视觉提示，用户根本看不出它是可交互缩写。必须手动加 CSS 才能建立预期。
推荐最小可用样式：
立即学习“前端免费学习笔记（深入）”；
abbr {
text-decoration: underline dotted #888;
cursor: help;
border-bottom: 1px dotted #888;
}
-
text-decoration: underline dotted比纯下划线更符合「术语提示」直觉 - 务必加
cursor: help，否则悬停无手势反馈 - 不要仅靠颜色区分（如仅改
color: #007acc），对色觉障碍用户不友好 - 某些旧版 Safari 对
dotted支持不稳定，可降级为dashed
abbr 在屏幕阅读器中的行为取决于 title 和 aria-label
主流读屏软件（NVDA、VoiceOver）默认朗读 title 内容，而非 <abbr> 内文本。这意味着：<abbr title="JavaScript">JS</abbr> 会被读作「JavaScript」，不是「J S」。
- 如果希望先读缩写再读全称，需用
aria-label显式控制，例如：<abbr title="JavaScript" aria-label="JS，JavaScript">JS</abbr> -
aria-label会完全覆盖title的读屏行为，title仍用于鼠标悬停 - 不要同时写
aria-label和title却让二者内容相同，造成重复播报 - WCAG 2.1 要求所有缩写首次出现时提供展开，
<abbr>是最轻量合规方案
abbr 不支持嵌套，也不该用在数字/单位缩写上
<abbr> 只适用于**语言学意义上的术语缩写**，比如 HTTP、CSS、W3C。它不是通用“提示工具”，强行滥用会破坏语义和可访问性。
- 禁止嵌套：
<abbr title="Cascading Style Sheets">CSS</abbr>里不能再包另一个<abbr> - 单位如
kg、km/h、数字如v2.3不该用<abbr>，它们是符号惯例，不是术语缩略 - 品牌名缩写（如 IBM、NASA）是否用
<abbr>取决于上下文：技术文档中首次出现建议用，日常文案中可省略 - 注意英文大小写：
<abbr title="United States">US</abbr>合理，但<abbr title="us">US</abbr>（小写 title）会让读屏软件按小写单词朗读，失真
title、忽略读屏逻辑、或把它当 tooltip 替代品，都会让这个标签退化成装饰性标签。 
