abbr标签用于标记缩写词或首字母缩略词，必须同时使用包裹且提供非空title属性才能实现语义化和无障碍访问。
abbr 标签是干什么用的
它用来标记缩写词或首字母缩略词，并通过 title 属性提供完整解释。浏览器不会自动显示这个解释，但鼠标悬停时会弹出提示，屏幕阅读器会朗读 title 内容——这是无障碍访问的关键支持。
怎么写才有效果
必须同时满足两个条件：使用 <abbr></abbr> 包裹缩写词，且提供非空的 title 属性。缺一不可。
-
<abbr title="Cascading Style Sheets">CSS</abbr>✅ 正确 -
<abbr>CSS</abbr>❌ 无title，失去语义和可访问性 -
<abbr title="">CSS</abbr>❌ 空title，部分屏幕阅读器会跳过或报错
常见踩坑点
很多人以为加了 <abbr></abbr> 就万事大吉，其实容易忽略这些细节：
- 缩写词本身拼写要准确，比如
<abbr title="JavaScript">JS</abbr>比<abbr title="JavaScript">Javascript</abbr>更规范（大小写敏感） - 不要嵌套其他行内元素（如
<strong></strong>）在<abbr></abbr>里，除非必要；某些旧版 IE 渲染异常 -
title值不宜过长，超过 200 字符可能被截断，建议控制在 80 字以内 - 避免对已广为人知、无歧义的缩写（如 “OK”、“USA”）强行加
<abbr></abbr>，反而干扰阅读
和 CSS 配合能做什么
单纯用 <abbr></abbr> 不会改变样式，但你可以用 CSS 做视觉强化：
abbr {
text-decoration: underline dotted #666;
cursor: help;
}
abbr[title]::after {
content: " ⓘ";
font-size: 0.8em;
color: #999;
}
注意：abbr[title] 这种选择器能精准命中带解释的缩写，避免误伤无 title 的无效标签。
真正难的是判断哪些词该标、哪些不该标——这取决于上下文和用户群体，不是语法问题，而是内容策略问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
