在网页开发中，给文本添加下划线是调整文本样式的常见操作，开发者可以选择HTML原生的u标签，也可以通过CSS的text-decoration属性实现。两种方式在语法、效果和可定制性上存在明显差异，了解这些差异能帮助开发者更合理地选择实现方案。
HTML u标签的基本用法
u标签是HTML早期提供的用于定义下划线文本的原生标签，它的语法非常简单，只需要将需要添加下划线的文本放在<u>和</u>标签之间即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>u标签示例</title>
</head>
<body>
<p>这是一段普通文本，<u>这部分文本带有下划线</u>，后续文本恢复正常。</p>
</body>
</html>u标签渲染的下划线是浏览器默认样式，颜色与文本颜色一致，线条为实线，位置和粗细由浏览器决定，开发者无法通过标签本身调整下划线的样式。
CSS text-decoration实现下划线
CSS通过text-decoration属性可以为文本添加下划线，该属性可以同时设置下划线的线型、颜色和位置，灵活性远高于u标签。
基础的下划线实现只需要设置text-decoration: underline即可，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS下划线示例</title>
<style>
.underline-text {
text-decoration: underline;
}
/* 自定义下划线颜色和样式 */
.custom-underline {
text-decoration: underline wavy #ff0000;
}
</style>
</head>
<body>
<p>这是一段普通文本，<span class="underline-text">这部分用CSS添加下划线</span>。</p>
<p>这是一段<span class="custom-underline">自定义样式的下划线文本</span>，下划线为红色波浪线。</p>
</body>
</html>text-decoration是简写属性，完整语法为text-decoration: line style color，其中line可以是underline（下划线）、overline（上划线）、line-through（删除线），style可以是solid（实线）、wavy（波浪线）、dashed（虚线）等，color可以设置任意合法的颜色值。
两种实现方式的对比
从多个维度对比u标签和CSS下划线实现的差异，具体如下表所示：
| 对比维度 | HTML u标签 | CSS text-decoration |
|---|---|---|
| 语法复杂度 | 简单，仅需要嵌套标签 | 需要定义CSS规则，稍复杂 |
| 样式可定制性 | 无，仅能使用浏览器默认下划线 | 高，可自定义颜色、线型、位置 |
| 语义含义 | 早期表示非文本注解的下划线，现在无明确语义 | 纯样式属性，无语义 |
| 兼容性 | 所有浏览器都支持 | 现代浏览器都支持，老旧浏览器可能存在部分属性不支持 |
| 适用场景 | 简单快速添加默认下划线，无样式要求 | 需要自定义下划线样式，或项目统一用CSS控制样式 |
使用注意事项
- u标签在HTML5中仍然保留，但语义上不再表示纯粹的下划线样式，而是表示与正常文本有偏移的文本，比如中文里的专有名词标注，因此不建议仅为了样式使用u标签。
- 如果只需要默认样式的下划线，且项目没有统一的样式管理要求，u标签可以快速实现需求，但如果是正式项目，更推荐用CSS实现，方便后续统一调整样式。
- 使用CSS实现下划线时，如果需要移除<a>标签默认的underline样式，可以设置
text-decoration: none。
总结
给文本添加下划线时，HTML u标签适合快速实现无样式要求的简单场景，而CSS的text-decoration属性则更适合需要自定义样式、项目样式统一管理的场景。在实际开发中，建议优先使用CSS实现下划线效果，避免纯样式用途的u标签使用，提升代码的可维护性和样式的灵活性。
HTMLu标签CSStext_decoration修改时间：2026-06-06 18:01:51