HTML 如何添加水平线

在这篇文章中，我们将向你展示如何使用HTML在网页上添加一条水平线。水平线，也被称为水平规则，是一种在网页上分隔内容的方法，可以用来吸引视觉，也可以用来表示内容的变化。

有多种方法可以在HTML中为你的网页添加横线，但最常见的方法是使用<hr>标签。<hr>标签是一个自我封闭的标签，可以在网页上创建一条水平线。这种方法简单明了，需要的代码也最少。然而，它在定制方面并没有提供太多的灵活性。使用<hr>标签创建的水平线将有一个默认的外观和感觉，它可能无法与你的网页设计很好地融合。

在HTML中添加水平线的另一种方法是使用CSS。通过使用CSS，你可以自定义水平线的外观，以配合你的网页设计。你可以改变水平线的颜色、宽度、高度和其他属性，使其无缝地融入你的网页。

我们将在本文后面的章节中用例子和代码片段详细讨论这两种方法。

方法

使用<hr>标签
使用CSS

方法1：使用`<hr>`标签

在HTML中添加横线的第一个方法是使用<hr>标签。这种方法快速而容易实现，因此非常适合于需要用一条简单的水平线来分隔网页上的内容的情况。此外，<hr>标签被所有主要的网络浏览器所支持，所以你可以确信它在你的网页上会被正确呈现。然而，<hr>标签的默认外观可能并不总是符合你的网页设计。

如果你需要对水平线的外观进行更多的控制，你可以使用CSS来定制<hr>标签，或者使用第二种使用CSS的方法。使用CSS，你可以改变横线的颜色、宽度、高度和其他许多属性，使其看起来与你的网页设计更加同步。

例子

下面是一个如何使用<hr>标签添加横线的例子 —

第1步 – 创建一个HTML文件（index.html）。

第2步 – 在你希望出现水平线的地方添加

标签。

<body>
   <h1>Welcome to Tutorials Point</h1>
   <hr>
   <p>This is some text that will appear below the horizontal line.</p>
</body>

第3步 – 保存文件并在网络浏览器中打开查看。

<!DOCTYPE html>
<html>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <hr>
   <p>This is some text that will appear below the horizontal line.</p>
</body>
</html>

方法2：使用CSS

在HTML中添加水平线的第二个方法是使用CSS。使用CSS来创建水平线，可以让你对线条的外观有更多的控制。你可以改变颜色和粗细，甚至为线条添加背景色或图像。此外，你还可以使用CSS动画和过渡，在线条上创造有趣的效果。

通过使用CSS，你可以创建一个突出的线条，为你的网页增加独特的感觉。通过CSS，你还可以创建多个具有不同风格的线条，并将它们应用于网页的不同部分，这对于在网页的不同元素之间创建视觉分隔非常有用。

例子

下面是一个如何使用CSS添加水平线的例子：

第1步 – 创建一个HTML文件（index.html）。

第2步 – 在你希望出现水平线的地方添加一个<div>标签。

<body>
   <h1>Welcome to Tutorials Point</h1>
   <div class="horizontal-line"></div>
   <p>This is some text that will appear below the horizontal line.</p>
</body>

第3步 – 在你的CSS文件（style.css）中，使用border-bottom属性来创建一条水平线。

border-bottom: 2px solid black;

第4步 – 将该类应用于<div>标签。

.horizontal-line {
   border-bottom: 2px solid black;
}

第5步 – 保存文件并在网络浏览器中打开查看。

例子

<!DOCTYPE html>
<html>
<head>
   <style>
      .horizontal-line {
         border-bottom: 2px solid black;
      }
   </style>
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <div class="horizontal-line"></div>
   <p>This is some text that will appear below the horizontal line.</p>
</body>
</html>