标签在html5中不用于加下划线或表示“非文本注解”，而是标记语义中性、尚未被更精确元素描述的文本，如拼写错误、待校对人名或需临时突出的中文专有词；其默认下划线仅为历史兼容残留，真实用途须配合title或aria-label传达语义。

<u></u> 标签在 HTML5 中**不用于加下划线样式，也不表示“非文本注解”**——这是常见误解。它的真实作用是标记一段**语义中性、尚未被更精确元素描述的文本**，比如拼写错误、待校对的人名、或中文里需临时突出但又不属于 <abbr></abbr> / <dfn></dfn> / <code> 的专有词。

为什么 <u></u> 不能当“下划线工具”用

浏览器默认给 <u></u> 加下划线，只是历史兼容残留；HTML5 明确废弃其作为格式化标签的用途。实际项目中滥用会导致：

• 屏幕阅读器可能跳过或误读该内容（它不传达强调、引用、错误等可访问语义）
• 用户看到下划线第一反应是“这是链接”，尤其在深色背景或低对比度场景下极易混淆
• CSS 重置时容易遗漏（比如 u { text-decoration: none; } 没写，下划线就意外漏出）
• 团队协作时，新人看到 <u>xxx</u> 会困惑：这是错字？是术语？还是单纯想画条线？

真正需要下划线时，用 CSS 的哪几种写法

纯视觉下划线必须走 CSS。三种主流方案按推荐顺序排列：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 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></u> 唯一合规的使用场景

仅当你要表达「这段文字在当前语境中语义未明，但需要视觉区分」时才用，且必须配合 title 或 aria-label 补充说明：

• 校对稿中标记疑似拼写错误：<u title="疑似错字：应为'阈值'">阀值</u>
• 中文技术文档中首次出现未标准化译名：<u title="专有名词：暂无通用译法">Transformer</u>
• 法律文书中需临时标出未定义术语：<u title="本协议中特指数据处理方">受托人</u>

注意：这些用法都依赖辅助技术（如屏幕阅读器读出 title），如果只写 <u>xxx</u> 不加说明，等于没传任何有效语义。

最容易被忽略的一点：哪怕你真要用 <u></u> 表达语义，也得确认它和周围文本的 contrast ratio ≥ 4.5:1——因为下划线本身不是颜色，它依赖底色与文字色共同构成可读性，而多数设计师只测文字色，忘了测那条线是否看得清。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！