HTML 里怎么给文字加下划线
直接用 text-decoration: underline，但别只写这一行——浏览器默认下划线贴着字底，容易和字母 descender（比如 g、y、p 的下延笔画）打架，看着糊成一团。
为什么 <u></u> 标签不推荐
<u></u> 在 HTML5 里语义变了，不再是“加下划线”，而是“标注非标准文本”（比如拼写错误、专有名词注释）。用它会被屏幕阅读器读作“underline”，干扰可访问性；而且样式没法统一控制，比如不能调间距、颜色或线型。
- 语义错位：想强调内容，结果被解析成“疑似错误”
- 样式死板：
<u></u>默认是单色实线，离 baseline 太近，g和y下面那截常被盖住 - 没法单独改线颜色：比如文字黑色、下划线蓝色，
<u></u>做不到
text-decoration 的关键参数怎么配
光写 text-decoration: underline 是懒办法。真正好用的组合得带 text-underline-offset 和 text-decoration-color：
span.highlight {
text-decoration: underline;
text-decoration-color: #007bff;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
-
text-underline-offset控制线离文字的距离，建议设3px～6px，避开 descender -
text-decoration-thickness别用auto（太细），显式设1.5px或2px更稳 -
text-decoration-color必须显式声明，否则继承文字颜色，换主题时容易失效 - 老版 Safari 不支持
text-underline-offset，可以用border-bottom降级（见下条）
兼容性差时用 border-bottom 替代的坑
当要支持旧 Safari 或某些邮件客户端，border-bottom 是更稳妥的选择，但它不是“下划线”，是“底线”，行为完全不同：
立即学习“前端免费学习笔记（深入）”；
- 高度算进行高（
line-height），可能撑开段落，需手动调padding-bottom补偿 - 没法自动对齐到文字 baseline，得靠
transform: translateY()微调，比如transform: translateY(2px) - 遇到换行文字，
border-bottom会断在行尾，而text-decoration自动跨行连续 - 别用
margin-bottom模拟间距——它会把下一行也推开，破坏排版流
复杂点在于：你得根据是否需要跨行连续、是否要适配旧 Safari、是否允许微调偏移量，来决定用哪套方案。选错了，轻则下划线压字，重则整段行高崩掉。
