最可靠方式是用 css 的 text-decoration: underline； 标签语义不清且 html5 中受限，仅适用于拼写错误等特定场景，不建议常规使用。
HTML 里怎么给文字加下划线
直接用 text-decoration: underline，这是最可靠、兼容性最好的方式。别信什么“用 <u></u> 标签就行”的老说法——它语义不清，现代 HTML5 里已被弃用（除非是纯换行或拼写错误等特定场景）。
<u></u> 标签还能不能用
技术上能渲染出下划线，但实际项目中不建议用：
-
<u></u>在 HTML5 中属于“被限制使用”的元素，仅允许用于非文本装饰目的，比如标注拼写错误（需配合spellcheck="false"）或专有名词（需加class明确语义） - 屏幕阅读器可能忽略它，或读作“underline”，影响可访问性
- 默认样式在不同浏览器里有细微差异（比如下划线离基线距离），而 CSS 更可控
用 CSS 加下划线的常见坑
看着简单，但几个参数一组合就容易翻车：
-
text-decoration是复合属性，单独设text-decoration-line: underline更安全，避免意外覆盖color或style - 下划线默认贴着文字底部，遇到
g、y这类降部字母会穿过去；想避开，得加text-underline-offset（注意：Safari 15.4+ 才支持，旧版需用padding-bottom+border-bottom替代） - 链接自带下划线，但去掉后如果没补
color和cursor: pointer，用户根本看不出它是可点击的 - 不要对整段
<p></p>直接加text-decoration，否则里面嵌套的<strong></strong>或<a></a>也会继承，得用text-decoration-skip-ink: auto（主流浏览器已支持）来跳过笔画
需要动态控制下划线时怎么办
比如 hover 显示、JS 切换状态，核心是别硬编码样式，优先走 class 控制：
立即学习“前端免费学习笔记（深入）”；
.has-underline {
text-decoration: underline;
text-decoration-color: #007bff;
}
.has-underline:hover {
text-decoration-style: wavy; /* 或 dotted、dashed */
}如果 JS 里要临时加，用 element.classList.add('has-underline')，而不是直接改 style.textDecoration——后者难维护，且容易和 CSS 里其他 text-decoration 值冲突（比如你只设了 underline，但 CSS 里原本还有 red solid，结果就丢了颜色和线型）。
真正麻烦的是跨字体、跨字号场景：同一个 text-underline-offset: 2px 在 12px 和 24px 字体下视觉效果完全不同。这时候得靠设计系统约定值，或者用 em 单位动态适配——没人真会手动调，但得知道它不是个“设了就完事”的属性。
