必须用 abbr 而不是 b 或 span，因为 abbr 提供语义信息（通过 title 属性），使搜索引擎、屏幕阅读器和翻译工具能正确识别缩写含义，如 NASA 指 “National Aeronautics and Space Administration”。
abbr 标签是 HTML 中唯一推荐用于缩写单词的语义化标签，acronym 已被 HTML5 废弃，现在统一用 abbr。
为什么必须用 abbr 而不是 b 或 span
用 b、span 或纯文本写 “NASA” 看似没区别，但实际丢失了关键信息：这个词代表什么。搜索引擎、屏幕阅读器、翻译工具都依赖 abbr 的 title 属性理解语义。没有它，辅助技术无法告知视障用户“NASA” 指的是 “National Aeronautics and Space Administration”。
abbr 的基本写法和常见错误
正确写法只有一个模式：<abbr title="完整解释">缩写词</abbr>。所有其他变体都会导致语义失效或兼容性问题。
- 漏掉
title属性 —— 这是最常见错误，浏览器不会报错，但等于没用abbr - 把
title写成空字符串（title=""）—— 多数屏幕阅读器会跳过，等同于缺失 - 在
abbr里再嵌套strong或em—— 允许，但不要为了加粗而滥用；语义优先于样式 - 用
abbr包裹整句话（如<abbr title="...">HTML is great</abbr>）—— 错误，只应包裹缩写词本身
CSS 自定义下划线和悬停效果
浏览器默认给 abbr 加虚线下划线，但样式不可靠（比如 Safari 不显示），且颜色/粗细不统一。建议显式控制：
abbr {
text-decoration: underline dotted #666;
text-underline-offset: 2px;
cursor: help;
}
abbr:hover {
background-color: #f9f9f9;
}
注意：text-underline-offset 在旧版 Edge 和部分安卓 WebView 中不支持，可降级为 border-bottom 替代；cursor: help 是必要补充，否则用户可能意识不到这是可交互元素。
立即学习“前端免费学习笔记（深入）”；
首次出现 vs 后续复用的处理逻辑
语义规范并不要求“只在首次出现时加 abbr”，相反，保持一致性更安全：
- 所有缩写词都带
title—— 避免后续编辑遗漏、跨页面复用混乱 - 即使上下文已说明过，仍保留
abbr—— 用户可能从中间段落进入，或使用阅读模式/翻译插件 - 如果缩写词已是通用常识（如 “USA”、“UK”），是否还用
abbr？答案是：仍然建议用，因为 “USA” 在不同语境中可能指 “United States of America” 或 “Universal Serial Bus Adapter”，title可消除歧义
真正容易被忽略的是：很多团队只在设计稿评审阶段考虑缩写标注，上线后就不再维护 title 内容。一旦术语定义变更（例如公司内部缩写更新），abbr 的 title 很可能长期未同步，反而造成误导。
