abbr 标签必须带 title 属性才具备可访问性语义，否则屏幕阅读器无法朗读、悬停无提示；HTML5 已废弃 acronym，统一使用 abbr；title 值须为标准全称且非模糊描述，是 WCAG 合规刚需。
abbr 标签必须带 title 属性才有效
浏览器不会自动显示缩写解释，abbr 标签本身不带语义提示——全靠 title 属性触发。没写 title，就等于白用，屏幕阅读器读不到，鼠标悬停也没提示。
常见错误现象：<abbr>HTTP</abbr> 页面上看起来一样，但无障碍支持失效，SEO 也丢掉关键语义。
- 正确写法：
<abbr title="HyperText Transfer Protocol">HTTP</abbr> - 使用场景：文档首次出现专业术语、机构名、技术缩写（如
DOM、API、URL）时 - 注意大小写一致性：
title值建议按标准全称写，比如"JavaScript"不要写成"javascript"，避免干扰语音合成器发音
abbr 和 acronym 已无区别，别再用 acronym
acronym 是 HTML4 里的标签，HTML5 已废弃。现在所有缩写、首字母词（包括 NASA、RSS）都统一用 abbr。
常见错误现象：老项目里还留着 <acronym>，现代浏览器虽能渲染，但校验失败，Lighthouse 会报错，部分辅助工具直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 别写：
<acronym title="Really Simple Syndication">RSS</acronym> - 改写为：
<abbr title="Really Simple Syndication">RSS</abbr> - 兼容性影响：所有现代浏览器对
abbr支持良好；IE9+ 也完全 OK，不用 polyfill
title 属性内容不是“补充说明”，而是可访问性刚需
title 不是给开发者看的备注，它是屏幕阅读器朗读的唯一依据，也是键盘用户按 Tab 到该元素时的焦点提示来源。
容易踩的坑：用模糊描述（如 "网络协议"）、缩略语嵌套（如 "HTML: HyperText Markup Language"）、或空格/换行导致截断。
- 推荐写法：
<abbr title="Cascading Style Sheets">CSS</abbr> - 避免写法：
<abbr title="样式表">CSS</abbr>（非母语用户难理解）、<abbr title="HTML: HyperText Markup Language">HTML</abbr>（冗余重复） - 性能无关，但影响 WCAG 2.1 AA 合规性 —— 缺失
title属于「感知」层面缺陷
CSS 不能替代 abbr 的语义，但可以微调提示样式
默认情况下，abbr 没有下划线或特殊样式，用户根本意识不到它是可交互元素。纯靠 CSS 加 border-bottom: 1px dotted 或 cursor: help 只是视觉暗示，不解决语义缺失问题。
真正要做的，是保留 abbr + title 结构，再用 CSS 增强体验，而不是试图“模拟”缩写效果。
- 安全增强写法：
abbr[title] { border-bottom: 1px dotted #999; cursor: help; } - 不要用 JS 动态插入
title：如果服务端没输出title，JS 补上也无法被初始爬虫或 SSR 渲染识别 - 注意：某些旧版 Safari 对
abbr的title悬停延迟较长，属浏览器行为，无法通过代码规避
abbr 却漏掉 title，等于写了注释却删掉了注释内容。这个组合从来不是“可选装饰”，而是语义链条里最基础的一环。 
