HTML 中如何设置下划线

在网页设计中，下划线是一种常见的文本装饰效果，能突出特定内容，吸引用户注意力。在 HTML 里，设置下划线有多种方式。

最基本的方法是使用 <u> 标签。<u> 标签是 HTML 中的一个内联元素，用于对文本添加下划线。例如：<u>这是一段带有下划线的文本</u>，在浏览器中渲染后，“这是一段带有下划线的文本”就会呈现出下划线效果。不过，<u> 标签在现代网页设计中较少使用，因为它的语义不够明确，并且样式较为单一，缺乏灵活性。

CSS 的 text-decoration 属性为设置下划线提供了更强大、灵活的方式。要对某个元素添加下划线，首先需要选中该元素，然后使用 text-decoration: underline; 来实现。比如，有一个段落元素 <p id="underlineText">设置下划线的段落</p>，在 CSS 样式表中可以这样写：#underlineText { text-decoration: underline; }，这样段落文本就会出现下划线。

text-decoration 属性不仅能单纯设置下划线，还可以配合其他值实现更多效果。例如，text-decoration: underline overline; 可以同时为文本添加下划线和上划线；text-decoration: line-through; 则会给文本添加删除线。还可以设置下划线的颜色和样式。例如，text-decoration-color: red; 能将下划线颜色设为红色，text-decoration-style: dotted; 可使下划线变为虚线样式。

在链接（<a> 标签）中，默认情况下会有下划线。如果想改变链接下划线的显示效果，同样可以使用 CSS 来控制。比如，去掉链接默认的下划线可以使用 a { text-decoration: none; }，而鼠标悬停在链接上时显示下划线，则可以使用 a:hover { text-decoration: underline; }。

掌握 HTML 中设置下划线的方法，能为网页设计增添更多吸引力和交互性，满足不同的设计需求，打造出更美观、实用的网页。