abbr 标签用于语义化缩写词并提升可访问性，非视觉提示工具；title 属性仅作辅助且行为不可控，移动端常失效；html5 已废弃 acronym，统一用 abbr；需提示效果时须配合 css/js 或 aria 属性。
abbr 标签是给缩写词加语义和可访问性的
它不是用来“设置提示”或“实现 hover 效果”的视觉工具，而是告诉浏览器、屏幕阅读器和搜索引擎：“这个词是缩写，全称是 XXX”。title 属性只是辅助手段，且行为不可控——比如在移动端通常不触发，部分屏幕阅读器可能忽略或读错。
常见错误现象：<abbr title="HyperText Markup Language">HTML</abbr> 写了但没效果；或者以为加了 title 就等于实现了 tooltip，结果在 iOS Safari 上完全没反应。
- 必须提供有意义的
title值，不能为空或纯空格 - 不要用
abbr包裹非缩写内容（如“JavaScript”本身不是缩写，不应套<abbr>JS</abbr>） - 若需跨设备稳定提示，得额外用 CSS +
aria-label或 JS 实现，abbr本身不保证显示
title 属性在 abbr 中的行为很有限
title 是全局属性，不是 abbr 特有。它只在少数桌面浏览器中触发原生 tooltip（鼠标悬停时），且样式无法定制、位置不可控、无键盘焦点支持。
使用场景：仅作为语义补充，适合简单文档类页面，对可访问性有基础要求但不追求交互体验的场合。
- Chrome/Firefox 桌面端会显示
title提示，但延迟高、易误触消失 - Safari（尤其 iOS）基本不展示
title，也不朗读abbr的title值 - WCAG 不推荐依赖
title传递关键信息，应优先用显式文本或aria-details
真正需要提示效果时，abbr 要配合其他方案
如果目标是“鼠标悬停显示解释”，abbr 只能做语义层支撑，视觉层必须另起炉灶。否则用户在手机上点不开、键盘用户 tab 不到、屏幕阅读器可能跳过。
实操建议：
- 保留
<abbr title="Cascading Style Sheets">CSS</abbr>做语义标记 - 加 class（如
class="tooltip-trigger"），用 CSS::after+data-title模拟提示框（避免污染title） - 对键盘用户，用
tabindex="0"+aria-describedby关联隐藏解释段落 - 不要覆盖
abbr默认样式（如去掉下划线），否则视觉用户无法识别这是可交互/有含义的缩写
abbr 和 acronym 已被 HTML5 废弃，只用 abbr
<acronym></acronym> 在 HTML5 中已无效，所有缩写统一用 <abbr></abbr>。过去有人误以为 acronym 专指首字母缩略词（如 NASA），abbr 指截断缩写（如 Mr.），但标准从未这样区分。
容易踩的坑：
- 还在用
<acronym></acronym>，导致 HTML 验证失败、部分辅助技术不识别 - 把带连字符的词（如 “e-mail”）当缩写包进
abbr，其实它是拼写变体，不是缩写 - 嵌套使用（如
<abbr><abbr>...</abbr></abbr>），语义混乱且无必要
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
