标签必须配合title属性才能实现语义化缩写功能，否则仅为普通内联元素；title需为简洁纯文本，提供准确全称，且不可含html或冗余描述。
用 <abbr></abbr> 标签时，title 属性是唯一能触发浏览器提示的机制
没有 title，<abbr></abbr> 就只是个普通内联元素，鼠标悬停不会显示任何解释，屏幕阅读器也大概率跳过其含义。HTML 规范明确要求：缩写必须通过 title 提供完整展开形式，否则语义失效。
常见错误是把解释写在标签内容里，比如 <abbr>HTTP (HyperText Transfer Protocol)</abbr> —— 这既破坏可访问性，又让 CSS 控制文本样式变得混乱。
-
title值必须是纯文本，不解析 HTML，也不支持换行或格式 - 值应简洁准确，避免冗余，例如
title="Cascading Style Sheets"比title="The language used to style web pages, called Cascading Style Sheets"更合适 - 中英文混排时注意空格和标点，如
<abbr title="JavaScript Object Notation">JSON</abbr>，不要写成title="JavaScript Object Notation（JSON）"
<abbr></abbr> 的 title 在不同场景下的行为差异
桌面端浏览器（Chrome/Firefox/Safari）悬停时显示 tooltip，但位置、延迟、样式完全由系统/浏览器控制，无法用 CSS 调整；移动端 Safari 仅在长按时短暂弹出，Android Chrome 则基本不触发 —— 所以不能依赖它做核心信息传达。
真正稳定起作用的是辅助技术：title 会被 NVDA、VoiceOver 等读屏软件朗读，且在 DOM 中可通过 JavaScript 读取：document.querySelector('abbr').title。
- SEO 不直接抓取
title内容，但正确使用<abbr></abbr>+title有助于语义化结构识别 - 若缩写首次出现，建议紧邻其后加一次完整拼写（非
title），例如：<abbr title="Application Programming Interface">API</abbr> (Application Programming Interface) - 重复出现的缩写，后续可省略
title，但规范仍建议保留，尤其当上下文跨页面时
哪些情况不该用 <abbr></abbr> + title
不是所有“看起来像缩写”的东西都适合 <abbr></abbr>。它的语义前提是“该词在当前文档中属于被广泛接受的缩写形式，且读者可能不熟悉其全称”。
- 专有名词缩写但已成通用词汇（如
laser、radar）无需标注，现代浏览器甚至会忽略其title - 代码标识符（如变量名
usr、函数名initDB）不是语言学意义上的缩写，用<abbr></abbr>反而误导辅助技术 - 带数字或符号的简写（如
v2、APIv3）不属于缩写范畴，应使用<span></span>或直接文本 - 中文拼音首字母组合（如 “GDP” 对应 “国内生产总值”）可以，但纯中文简称（如 “人社部”）不符合 HTML 中
<abbr></abbr>的设计预期，W3C 推荐用<span></span>配合 ARIA
替代方案与兼容性兜底思路
如果项目需要稳定可控的缩写提示（比如统一 tooltip 样式、支持移动端点击展开），<abbr></abbr> + title 就不够用，得自己实现。
简单做法是用 <span></span> 包裹缩写，再通过 data-full 存全称，配合少量 JS 绑定事件；复杂点可用 <details><summary></summary></details> 实现可点击展开，兼容性好且无需 JS。
- 不要覆盖原生
<abbr></abbr>的默认行为来“增强”，容易破坏读屏逻辑 - 若必须自定义 tooltip，记得为键盘用户添加
tabindex="0"并监听Enter/Space - 服务端渲染时注意：部分 SSR 框架（如 Next.js）对
title属性有特殊处理，需验证是否被剥离
<abbr></abbr>，先想清楚用户到底需不需要知道它代表什么。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
