<u>标签在HTML5中不用于加下划线或表示“非文本注解”，而是标记语义中性、尚未被更精确元素描述的文本，如拼写错误、待校对人名或需临时突出的中文专有词；其默认下划线仅为历史兼容残留，真实用途须配合title或aria-label传达语义。
<u> 标签在 HTML5 中**不用于加下划线样式，也不表示“非文本注解”**——这是常见误解。它的真实作用是标记一段**语义中性、尚未被更精确元素描述的文本**，比如拼写错误、待校对的人名、或中文里需临时突出但又不属于 <abbr> / <dfn> / <code> 的专有词。
为什么 <u> 不能当“下划线工具”用
浏览器默认给 <u> 加下划线，只是历史兼容残留；HTML5 明确废弃其作为格式化标签的用途。实际项目中滥用会导致：
- 屏幕阅读器可能跳过或误读该内容（它不传达强调、引用、错误等可访问语义）
- 用户看到下划线第一反应是“这是链接”，尤其在深色背景或低对比度场景下极易混淆
- CSS 重置时容易遗漏（比如
u { text-decoration: none; }没写，下划线就意外漏出） - 团队协作时，新人看到
<u>xxx</u>会困惑：这是错字？是术语？还是单纯想画条线？
真正需要下划线时，用 CSS 的哪几种写法
纯视觉下划线必须走 CSS。三种主流方案按推荐顺序排列：
-
text-decoration: underline：最简，但默认下划线位置偏低，易压到 g/y/p 的 descender；务必配text-underline-offset: 2px（支持 Chrome 89+、Firefox 84+、Safari 15.4+） -
border-bottom: 1px solid #000：完全可控，能调粗细、颜色、圆角、间距（靠padding-bottom），且不影响行高渲染 -
background-image: linear-gradient(...)：适合设计稿要求精准定位/虚线/渐变下划线，但代码冗长，维护成本高
<u> 唯一合规的使用场景
仅当你要表达「这段文字在当前语境中语义未明，但需要视觉区分」时才用，且必须配合 title 或 aria-label 补充说明：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 校对稿中标记疑似拼写错误：
<u title="疑似错字：应为'阈值'">阀值</u> - 中文技术文档中首次出现未标准化译名：
<u title="专有名词：暂无通用译法">Transformer</u> - 法律文书中需临时标出未定义术语：
<u title="本协议中特指数据处理方">受托人</u>
注意：这些用法都依赖辅助技术（如屏幕阅读器读出 title），如果只写 <u>xxx</u> 不加说明，等于没传任何有效语义。
最容易被忽略的一点：哪怕你真要用 <u> 表达语义，也得确认它和周围文本的 contrast ratio ≥ 4.5:1——因为下划线本身不是颜色，它依赖底色与文字色共同构成可读性，而多数设计师只测文字色，忘了测那条线是否看得清。
