abbr 标签是 HTML5 中用于标记缩写词的语义化元素，通过 title 属性提供全称解释，提升可访问性与清晰度；适用于技术术语、组织名称等非常规缩写，需避免滥用并确保 title 内容准确完整。

abbr 标签是 HTML5 中专门用于标记缩写词或首字母缩略词的语义化元素，配合 title 属性，能在用户将鼠标悬停在缩写上时显示解释性文字，提升可访问性和内容清晰度。

基本用法：包裹缩写 + 设置 title

只需用 <abbr> 包裹缩写词，并在标签中添加 title 属性，其值即为完整释义：

<p>我们在项目中使用了 <abbr title="Cascading Style Sheets">CSS</abbr> 来控制样式。</p>

浏览器渲染后，“CSS”保持原样显示，但当用户悬停时，会浮现提示框显示 “Cascading Style Sheets”。

适用场景：哪些词适合用 abbr？

以下情况建议使用 abbr：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 技术术语缩写（如 HTML、API、DOM、HTTP）
• 组织或项目名称缩写（如 W3C、NASA、Vue.js）
• 专业领域内非常规缩写（如 “UX” 表示 “User Experience”，“SEO” 表示 “Search Engine Optimization”）
• 首次出现且读者可能不熟悉的缩写（后续可酌情省略，避免冗余）

注意事项与最佳实践

使用时需注意几点，确保语义准确、体验友好：

• title 值应为全称，不含额外说明或标点（例如用 “HyperText Markup Language”，而非 “HyperText Markup Language (HTML)”）
• 不要对常见、无歧义的缩写滥用（如 “Mr.”、“Dr.” 一般无需 abbr）
• 屏幕阅读器会朗读 title 内容，因此要确保表述完整、语法正确
• 移动端无悬停效果，但部分辅助技术仍可触发 title 提示，语义价值依然存在

增强可访问性的补充建议

仅靠 title 不足以覆盖所有用户，可配合其他方式强化理解：

• 首次出现缩写时，在正文中紧随其后用括号注明全称（例如：“…采用 <abbr title="Application Programming Interface">API</abbr>（Application Programming Interface）…”）
• 在文档开头或侧边栏提供缩写词表
• 避免嵌套 abbr 标签（如不在一个 abbr 内再包另一个 abbr）