标签在HTML5中不是视觉下划线工具，而是语义化标签，专用于标记拼写错误、专有名词等与常规文本风格不同的内容，需配合title或ARIA说明语义，禁用默认下划线以避免混淆和可访问性问题。
<u></u> 标签在 HTML5 中**不是用来加下划线的视觉工具**，而是语义化标签，专用于标记“与常规文本风格不同的内容”，比如拼写错误、专有名词、中文人名/地名等。直接用它实现纯样式下划线，属于误用，且易被屏幕阅读器误解、与 <a></a> 链接混淆。
为什么浏览器还显示下划线？
因为所有主流浏览器（Chrome、Firefox、Safari、Edge）仍为 <u></u> 保留了默认样式 text-decoration: underline —— 这是向后兼容行为，不是语义支持。HTML5 规范明确指出：该默认样式**不应被依赖**。
- 它不保证跨浏览器一致（例如某些辅助技术会忽略或重解释）
- 它无法控制下划线颜色、距离、粗细等细节
- 若未来规范调整或 UA 样式移除，页面可能突然“失妆”
替代方案：用 CSS 实现可控下划线
真正需要下划线样式时，应使用 span + 自定义 class，配合 text-decoration 相关属性。这样语义清晰、样式可维护、无障碍友好。
- 基础下划线：
text-decoration: underline - 指定颜色：
text-decoration-color: #007bff - 控制距离：
text-underline-offset: 2px（支持现代浏览器） - 控制粗细：
text-decoration-thickness: 2px（同上） - 完全替换默认下划线（如避免与链接冲突）：
text-decoration: underline wavy red
示例：
<span class="highlight">关键术语</span>配 CSS：
.highlight { text-decoration: underline; text-decoration-color: #28a745; text-underline-offset: 3px; }
立即学习“前端免费学习笔记（深入）”；
什么场景下才该用 <u></u>？
仅当内容本身具有明确语义差异，且你希望向辅助技术传达这种差异时才用。HTML5 明确定义了两个合法用途：
- 拼写错误的单词（如校对稿中）：
<u>recieve</u>（正确应为 receive） - 中文专有名词（如古籍、方言标注）：
<p>《<u>水浒传</u>》成书于元末明初</p>
注意：<u></u> 不应包裹链接、按钮、交互控件；也不应用于标题、导航项等已有明确语义的结构中。
最常被忽略的一点：即使你坚持用 <u></u>，也必须配合 title 属性或 ARIA 注释说明其语义意图，否则对屏幕阅读器用户毫无意义。纯靠下划线视觉提示，在无障碍场景下等于没提示。
