abbr 标签必须加 title 属性才能实现悬停提示和无障碍支持，仅写 HTTP 无效；title 还供屏幕阅读器朗读，是语义与可访问性刚需，非可选装饰。
abbr 标签怎么写才让鼠标悬停显示提示
必须加 title 属性，否则悬停什么都不会出现。浏览器只认这个属性，不是 alt、不是 data-tip，也不是 CSS 的 ::after 伪元素。
常见错误是只写 <abbr>HTTP</abbr>，没加 title，结果用户完全看不出这是缩写，辅助技术也读不出全称。
-
<abbr title="HyperText Transfer Protocol">HTTP</abbr>✅ 正确 -
<abbr>HTTP</abbr>❌ 悬停无反应，语义缺失 -
<abbr data-title="HyperText Transfer Protocol">HTTP</abbr>❌ 浏览器忽略
abbr 和 title 属性在不同场景下的表现差异
桌面端悬停显示 tooltip 是默认行为，但移动端基本不触发——iOS Safari 和 Android Chrome 都不支持 title 悬停提示，这点常被忽略。
辅助技术（如屏幕阅读器）会读出 title 内容，所以它不只是“提示”，更是可访问性必需项。如果省略，视障用户就无法得知缩写含义。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 桌面 Chrome/Firefox/Edge：悬停几秒后显示小黄框 tooltip
- iOS Safari：
title完全不生效，也不会朗读（除非配合 ARIA） - NVDA/JAWS：默认读
title，但需确保abbr没被 CSS 隐藏或aria-hidden="true"
为什么不能用 span + CSS tooltip 替代 abbr
因为语义丢失。用 <span class="tooltip">HTTP</span> 再加 JS 或 CSS 模拟提示，视觉上可能差不多，但对无障碍和 SEO 是硬伤。
搜索引擎和爬虫依赖 HTML 语义标签理解内容结构。abbr 明确告诉解析器“这是缩写”，而 span 什么也不说。同样，AT（辅助技术）不会主动为 span 查找或播报解释性文本。
- SEO：Google 会识别
abbr并可能增强富摘要（如知识图谱中展开术语） - 维护成本：CSS tooltip 需额外 JS 控制显示逻辑、焦点管理、键盘支持；
abbr开箱即用 - 兼容性：所有现代浏览器原生支持
abbr+title，无需 polyfill
abbr 常见坑：样式、嵌套和空格问题
默认 abbr 是行内元素，但有些 CSS 重置会把它设成 text-decoration: underline dotted，反而干扰阅读。更麻烦的是，它不支持直接嵌套另一个 abbr，也不能包裹块级元素。
另外，title 中的多余空格、换行会被压缩成单个空格，且不支持 HTML 实体以外的富文本（比如加粗、链接都无效）。
- 避免写
<abbr title="Cascading Style Sheets"><abbr title="Style">S</abbr>heets</abbr>❌ 嵌套非法 - 别用
<abbr title="JavaScript (JS)">JS</abbr>里带括号——部分旧版 IE 解析异常，建议用逗号或破折号 - 如果需要强调缩写本身（如加粗），用
<abbr title="..."><strong>API</strong></abbr>✅ 允许，但别把strong放到title里
abbr 就得配 title，少一个字都不算完成。移动端没 tooltip 不代表可以跳过——可访问性和语义是刚性需求，不是“有更好”的装饰项。 
