html让文字横线

使用<u>

直接在文字包裹<u>标签,可快速添加默认样式的横线。

示例代码	效果预览	说明
<p><u>带下划线的文字</u></p>	带下划线的文字	标签直接生效，无需额外样式

使用CSS text-decoration属性

通过CSS设置text-decoration: underline;,可自定义下划线样式。

示例代码	效果预览	说明
<p style="text-decoration:underline;">CSS下划线</p>	CSS下划线	支持灵活调整（如颜色、样式）
<span style="text-decoration: underline red;">红色下划线</span>	红色下划线	需浏览器兼容text-decoration-color

其他方法（如border-bottom）

通过border-bottom模拟下划线,适用于块级或行内元素。

示例代码	效果预览	说明
<span style="border-bottom:1px solid #000;">边框下划线</span>	边框下划线	可控制宽度、颜色，但非真实下划线

---

注意事项

1. 语义化问题：<u>标签在HTML5中已不推荐使用,建议优先用CSS实现。
2. 兼容性：text-decoration-color在旧版浏览器中可能无效，需配合text-shadow或border替代。
3. 性能影响：大量使用复杂CSS样式可能影响渲染性能。

---

问题与解答

Q1：如何单独给一段文字中的部分字符加下划线？
A1：使用<span>标签包裹目标文字，并添加行内样式。

<p>部分<span style="text-decoration:underline;">下划线</span>文字</p>

Q2：如何让下划线与文字颜色一致？
A2：可通过CSS变量或继承样式实现。

p { color: blue; text-decoration: underline; }

或使用currentColor关键字：

p { text-decoration: underline currentColor; }