应使用css的text-decoration: underline而非标签，因语义过时且渲染不可控；需配合text-underline-offset、text-decoration-skip-ink和text-decoration-color精细控制，并注意ie兼容性及多场景实测。
HTML 里怎么给文字加下划线
直接用 text-decoration: underline，别碰 <u></u> 标签——它语义过时，还容易被浏览器默认样式或用户 CSS 干扰。
为什么不用 标签
<u></u> 在 HTML5 里虽然没被删，但语义只剩“非文本标注”（比如拼写错误、专有名词），不是“我要加下划线”。实际效果不可控：
- 部分浏览器会给
<u></u>加额外间距或颜色 - 屏幕阅读器可能跳过或误读它的意图
- 如果全局重置了
u { text-decoration: none }，它就彻底失效
text-decoration 的关键参数和坑
光写 text-decoration: underline 很容易出问题。真正要用好，得管住三件事：
- 下划线位置：默认贴底，但中文/数字常被截断，加
text-underline-offset: 2px（支持现代浏览器）或用text-decoration-skip-ink: auto避开笔画 - 下划线颜色：不写的话继承文字色，要单独控制就加
text-decoration-color: #007bff - 兼容性：IE 完全不支持
text-underline-offset和text-decoration-skip-ink，老项目得用border-bottom替代（但会撑高行高）
示例：
span.highlight {
text-decoration: underline;
text-decoration-color: #ff6b6b;
text-decoration-skip-ink: auto;
text-underline-offset: 3px;
}
需要动态控制下划线时怎么办
比如 hover 显示、JS 切换状态，别用 class 切换整套样式，容易重复或漏掉 offset：
立即学习“前端免费学习笔记（深入）”；
- 统一用一个基础类定义下划线行为，比如
.has-underline - 用
:hover或 JS 操作style.textDecoration，只改underline开关，其他属性保持不变 - 避免在 JS 里拼接字符串写
element.style.cssText = "text-decoration: underline ..."，会覆盖已有内联样式
JS 控制示例：
el.style.textDecoration = el.classList.contains('active')
? 'underline'
: 'none';
下划线看着简单，但中英文混排、字体差异、缩放、高对比度模式下表现很分裂——别依赖默认值，每个项目最好实测几款主流字体和字号下的实际渲染效果。
