abbr 标签必须配合 title 属性使用，否则对屏幕阅读器和键盘用户无效；title 应为准确全称，仅在悬停或聚焦时生效，移动端不支持长按触发，首次出现缩写时需用 abbr，重复出现可省略。
abbr 标签不是装饰性元素，它有明确的语义和可访问性职责：浏览器不会自动显示提示，全称必须靠 title 属性触发，且仅在悬停或聚焦时生效。
abbr 标签必须配 title 属性才有效
没有 title 的 abbr 对屏幕阅读器和键盘用户完全“不可见”——它只是个普通内联容器，不传递任何缩写信息。
- ✅ 正确写法：
<abbr title="HyperText Markup Language">HTML</abbr> - ❌ 无效写法：
<abbr>HTML</abbr>（无title，等于没用） - ⚠️ 注意：
title值应为完整、准确的全称，避免缩略或模糊表述（如不用 “a markup language”，而用 “HyperText Markup Language”）
title 提示只在悬停/聚焦时出现，不支持触屏长按
桌面端鼠标悬停会触发系统 tooltip；键盘用户 Tab 到该元素后也能读到 title 内容。但移动端 Safari、Chrome 等主流浏览器**不响应长按触发 title**，也不会朗读（除非配合 ARIA 属性或专门适配）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 这意味着纯靠
abbr+title无法覆盖所有用户场景 - 若目标用户含大量移动设备使用者，建议在首次出现缩写时紧接括号补充全称，例如：
<abbr title="Cascading Style Sheets">CSS</abbr> (Cascading Style Sheets) -
title文本本身不支持换行或样式，内容过长会被截断或显示为单行
与 aria-label 或 aria-expanded 混用需谨慎
不要给 abbr 同时加 aria-label，这会覆盖 title，导致屏幕阅读器忽略原意而只读 aria-label 内容，违背语义初衷。
- ✅ 推荐保持干净：
<abbr title="International Organization for Standardization">ISO</abbr> - ❌ 避免覆盖：
<abbr title="ISO" aria-label="International Organization for Standardization">ISO</abbr>（aria-label优先级更高，title失效） - 如果需要展开交互（如点击显示解释），应改用
button+dialog或带details/summary的结构，而非强行改造abbr
真正容易被忽略的是：缩写词首次出现的位置，比标签本身更重要。同一页面多次出现相同缩写时，只在第一次用 abbr + title 即可，后续直接写缩写——过度使用反而干扰阅读节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
