最直接的方法是用 css 的 text-decoration: underline；需注意它不继承、块级元素换行会断线、a 标签需重置 :visited 状态，精细控制应拆用 text-decoration-line、-thickness、-color、-style 等独立属性。
用 text-decoration 加下划线最直接
HTML 本身没有专门的下划线标签，<u></u> 虽然存在，但语义是“非标准文本”（比如拼写错误、专有名词注音），不是用来做样式装饰的。现代开发中，该用 CSS 控制。
最稳妥的做法是给元素加 text-decoration: underline：
span.highlight {
text-decoration: underline;
}注意两点：一是别只写 text-decoration，它默认会带 text-decoration-color 和 text-decoration-style 的浏览器默认值；二是如果用了 text-decoration: none 又想恢复下划线，得显式重置所有子属性，否则可能被继承干扰。
text-decoration 的常见翻车点
下划线不显示？大概率是这几个原因：
立即学习“前端免费学习笔记（深入）”；
-
text-decoration不会继承，父元素设了，子元素得自己加 - 行内元素（如
<span></span>）加了没问题，但块级元素（如<div>）里文字换行后，下划线会断开——这是正常行为，不是 bug<li>如果用了 <code>text-decoration: underline solid red，但颜色没生效，检查是否被其他规则（比如text-decoration-color单独覆盖）干扰 -
a标签默认有下划线，但用户点击后变成紫色且仍带下划线，常被误认为“失效”，其实是:visited状态未重置 -
text-decoration-line: underline—— 指定画哪条线（overline/line-through也支持） -
text-decoration-thickness: 2px—— 控制粗细（支持auto、from-font，但兼容性略差） -
text-decoration-color: #007bff—— 改颜色 -
text-decoration-style: wavy—— 改样式（dotted、dashed、wavy）
要控制下划线位置或粗细，得拆开写
text-decoration 是简写，真要精细控制，必须用独立属性：
例如让链接下划线离文字远一点：
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* 跳过升部字母（如 f、l）的笔画 */
text-underline-offset: 4px; /* 下划线和文字底边的距离 */
}旧项目还在用 <u></u>？先确认语义
<u></u> 在 HTML5 中被“平反”了，但语义很窄：仅用于需要人工标注的、非常规文本，比如中文拼音、日文振假名、拼写纠错提示。W3C 明确说：不能 用来替代 CSS 下划线。
如果你在代码里看到：
<u>重要条款</u>
这其实违反可访问性原则——屏幕阅读器会读成“underline 重要条款”，造成干扰。换成：
<span aria-label="重要条款">重要条款</span>
再配 CSS 下划线，才是正确路径。
真正难处理的是那些嵌套在富文本编辑器输出里的 <u></u>，它们往往没 class、没上下文，只能靠 CSS 强制重置：u { text-decoration: underline !important; }，但得小心影响其他语义化用途。
