应避免用<u>标签仅作下划线装饰，因其在HTML5中有特定语义（如拼写错误、专有名词），滥用会损害可访问性、SEO及协作效率；推荐用<span>配合text-decoration等CSS属性实现语义清晰、样式可控的下划线效果。
直接用 text-decoration: underline，但 <u> 标签在 HTML5 中已不再是纯表现性标签，它有明确语义（比如拼写错误、专有名词、非标准文本），乱用会破坏可访问性和 SEO。
为什么不用 <u> 直接套文字
HTML5 规范里 <u> 的语义是“未标注的文本”——典型场景是中文里需要加下划线但又不属于链接、强调或删除的内容，比如人名拼音、外来词、拼写建议。浏览器默认渲染虽带下划线，但屏幕阅读器可能忽略或误读；如果只是想加个装饰线，语义错位反而让代码更难维护。
- 用
<u>做样式装饰，审查元素时看到的是“拼写错误标记”，协作时容易引发误解 - 某些 CSS 重置库（如 Normalize.css）会主动取消
<u>的下划线，导致样式不一致 - SEO 工具可能对滥用
<u>发出警告，尤其在正文主干中高频出现
推荐做法：用 <span> + text-decoration
把下划线当作纯粹视觉修饰，就该用通用容器配合 CSS 控制。这样语义干净、样式可控、调试直观。
- 基础写法：
<span style="text-decoration: underline;">这段文字带下划线</span>
- 要控制线型/颜色/距离：
<span style="text-decoration: underline wavy red; text-underline-offset: 4px;">波浪红线</span>
（注意text-underline-offset在 Safari 15.4+ 和 Chrome 99+ 才稳定支持） - 避免影响行高：下划线默认紧贴基线，若字体下沉明显（如思源黑体），加
text-underline-offset可防遮挡
text-decoration 常见坑点
这个属性看着简单，实际在多行、混合字体、RTL 文本中容易出意外。
- 多行文本下划线会断开：默认
text-decoration是按行绘制的，不会跨行连贯；需用box-decoration-break: clone配合display: inline-block模拟（但兼容性有限） - 中英文混排时下划线位置飘移：不同字体的
baseline和underline-position不同，建议统一设置font-family或用text-underline-offset微调 - 与
line-through/overline共存时必须写全：text-decoration: underline line-through，只写一个会被覆盖 - 不要用
border-bottom替代：虽然能控粗细和间距，但 border 会撑开行高、无法响应字体缩放、在 subpixel 渲染下易发虚
真正麻烦的不是“怎么加线”，而是“线加在哪、加多长、离字多远、换行怎么续”。这些细节在设计稿里常被忽略，但上线后用户一眼就能感觉到别扭。
