<abbr> · HTML 元素参考 · 码译 VibeCode

一句话说清

大白话：用来标记「缩写 / 首字母缩略词」的行内语义标签，比如 WWW、HTML、API 这类。它本身不换行、也不会渲染成什么特殊样子，但能告诉浏览器和读屏软件「这几个字是一组缩写」；配合 title 属性，鼠标悬停时还能给出完整展开。纯给文字上颜色/样式请用 <span>，想表达「这是个缩写」才用它。

MDN 原文：The <abbr> HTML element represents an abbreviation or acronym.

可运行示例

实时效果沙箱预览

<p>访问 <abbr title="World Wide Web">WWW</abbr> 时记得带上协议头。</p>
<style>abbr{border-bottom:1px dotted #888;cursor:help;color:#C8442E;font-weight:700}</style>

常用属性（大白话）

属性	是干嘛的
`title`	abbr 上最关键的属性：写出缩写的完整展开（如 WWW → World Wide Web）。鼠标悬停会显示成提示框。注意它必须只写完整释义，别夹带别的说明。
`class`	类名钩子，用来给这个缩写单独上样式（比如统一加一条点状下划线）
`id`	页面内唯一身份证，可用于锚点跳转或 JS 定位
`lang`	标记这个缩写是什么语言（某些缩写的大小写 / 语法跟语言相关）

新手常踩的坑

1）title 只能写「完整的展开释义」，别写成别的东西——例如写 title="World Wide Web"，不要写成 title="网页" 或夹带解释文字。2）每个 <abbr> 都是独立的：给一个 WWW 加了 title，页面上另一个相同的 WWW 不会自动继承；而且 hover 提示在手机等触屏设备上用不了，关键缩写最好在正文第一次出现时就直接把全名写出来。