abbr标签用于标记缩写词或首字母缩略词，并通过title属性提供鼠标悬停提示和屏幕阅读器朗读的完整解释；必须包含非空title属性，内含准确简洁的全称，如html。
标签用于标记缩写词或首字母缩略词，并通过 title 属性提供鼠标悬停时的解释文本。浏览器会将内容渲染为普通文字，但当用户将鼠标移至其上方时，会显示 title 中设定的提示信息。
正确使用 标签的基本结构
必须包含 title 属性，否则无法触发悬停提示；标签内是缩写本身，title 值是完整展开形式：
<abbr title="HyperText Markup Language">HTML</abbr><abbr title="Cascading Style Sheets">CSS</abbr><abbr title="World Wide Web Consortium">W3C</abbr>
确保可访问性与语义清晰
屏幕阅读器会读出 title 内容，因此需保证解释准确、简洁、符合上下文：
- 避免用“即”“也就是”等冗余表述，直接写全称，如
title="American Standard Code for Information Interchange" - 同一缩写首次出现时建议使用 ，后续可省略，避免页面过度标注
- 不要嵌套其他行内元素（如 或 ）在 内，除非有明确样式或语义需求
配合 CSS 微调视觉表现（可选）
默认情况下 无特殊样式，但可通过 CSS 添加下划线、问号图标或轻微变色以提升识别度：
- 加点下划线和虚线：
abbr { text-decoration: underline dotted #666; cursor: help; } - 添加问号图标（需配合伪元素或字体图标）：
abbr::after { content: " ⓘ"; font-size: 0.8em; color: #999; } - 注意：title 提示不受 CSS 影响，纯靠浏览器原生支持
常见误区提醒
容易忽略的细节会影响功能或语义：
- 不要把 当作通用提示工具——它只适用于真正意义上的缩写或首字母缩略词，不适用于普通术语解释
- title 属性值不可为空或仅含空格，否则悬停无效
- 中文缩写也适用，例如：
<abbr title="超文本传输协议">HTTP</abbr>，但需确保用户能理解对应关系
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
