abbr属性必须加在<th>标签上，仅对表头单元格生效，用于向辅助技术表明长标题的官方缩写，加在<td>或外层容器中无效。
abbr 属性该加在哪个 HTML 标签上
abbr 属性必须加在 <th> 标签上，不能加在 <td> 或外层容器里。它只对表头单元格生效，浏览器和屏幕阅读器靠它识别“这个长标题的官方缩写是什么”。加错位置（比如写进 <table> 或 <caption>）完全无效。
常见错误现象：鼠标悬停没提示、读屏软件不读缩写、开发者工具里看到 abbr 但没反应——八成是标签用错了。
- 正确：
<th abbr="CPU">Central Processing Unit</th> - 错误：
<td abbr="CPU">...</td>（abbr在<td>上被忽略） - 错误：
<table abbr="CPU"><th>...</th></table>（属性位置非法）
缩略语内容要不要带标点或空格
缩略语本身应简洁、无歧义、符合行业惯例。不要加句号（如 "C.P.U."），不要用空格（如 "C P U"），也不要包含括号或斜杠。浏览器把 abbr 当纯文本处理，多余字符会直接朗读或显示，反而干扰理解。
使用场景举例：医疗系统表格中 <th abbr="BP">Blood Pressure</th> 比 <th abbr="B/P">Blood Pressure</th> 更可靠；财务报表里 <th abbr="ROI">Return on Investment</th> 是标准写法。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐：
abbr="DNS"、abbr="HTTP"、abbr="SSN" - 避免：
abbr="D.N.S."、abbr="HTTP / HTTPS"、abbr="Social Sec. No."
abbr 和 title 属性冲突吗
不冲突，但行为不同：title 是通用提示属性，鼠标悬停时显示；abbr 是语义化属性，主要服务辅助技术（如读屏软件），部分浏览器也会在悬停时显示 abbr 值——但这是实现差异，不能依赖。如果同时写了 title 和 abbr，读屏软件优先读 abbr 的值，title 被忽略。
性能与兼容性影响很小，但逻辑上建议只用 abbr：它更精准表达“这是缩写”，而 title 只是泛提示。混用容易让维护者困惑——到底该看哪个？
- 清晰做法：
<th abbr="API">Application Programming Interface</th> - 冗余做法：
<th abbr="API" title="App Programming Interface">...</th>（title冗余且可能误导） - 注意：
abbr不影响 CSS 样式或 JS 获取，el.getAttribute('abbr')可正常取值
哪些浏览器/读屏器真正支持 abbr
现代读屏器（NVDA、VoiceOver、JAWS）都支持 abbr，会朗读缩写而非长文本。桌面浏览器中，Chrome、Firefox、Edge 在悬停时显示 abbr 值；Safari 仅支持读屏，不显示悬停提示。移动端 Safari 和 Android Chrome 基本不触发悬停，但读屏功能正常。
容易被忽略的点：没有视觉反馈不等于无效——对无障碍用户而言，abbr 是否起作用，取决于读屏器是否启用并正确解析 DOM。别因为自己鼠标悬停没看到提示就认为它没用。
- 验证方式：用 VoiceOver（Mac）或 NVDA（Win）打开页面，聚焦到表头，听读音
- 调试技巧：在控制台执行
document.querySelector('th').getAttribute('abbr')确认属性存在 - 兼容底线：IE9+ 支持
abbr属性解析，无需 polyfill
