一、使用

---

标签

`

---

` 标签是 HTML 中专门用于创建水平线的元素。它是一个空元素，不需要关闭标签。以下是一个简单的示例：

```html

这是一个标题

这是一段普通的文本。

---

这是另一段文本，在水平线之后。

```

在上述代码中，`

---

` 标签被放置在两个段落之间，它会在页面中显示一条水平线，将前后的内容分隔开来。

二、使用 CSS 样式自定义水平线

除了使用默认的 `

---

` 标签样式，我们还可以通过 CSS 来自定义水平线的外观。可以通过设置 `border-top` 属性来创建水平线，并通过调整 `border-width`、`border-color` 等属性来改变其样式。

例如：

```html

这是一个标题

这是一段普通的文本。

---

这是另一段文本，在水平线之后。

```

在这个例子中，我们使用了 CSS 样式来设置水平线的样式。`border-top` 属性指定了线条的样式，`2px` 表示线条宽度为 2 像素，`solid` 表示实线，`#000` 表示颜色为黑色。`margin-top` 和 `margin-bottom` 属性分别设置了上方和下方的外边距，以控制水平线与周围内容的间距。

三、在表格中使用

---

标签

在 HTML 表格中，也可以使用 `

---

` 标签来创建水平线，以分隔表格的行或列。

例如：

```html

---

表格单元格 1	表格单元格 2
表格单元格 3	表格单元格 4
表格单元格 5	表格单元格 6

```

在这个表格中，`

---

` 标签被放置在两个表格行之间，它会在表格中创建一条水平线，将上下两行分隔开来。

四、使用 CSS 框架创建水平线

许多 CSS 框架，如 Bootstrap、Foundation 等，都提供了方便的方式来创建水平线。这些框架通常具有预定义的样式和类，可以轻松地在项目中使用。

以 Bootstrap 为例，以下是创建水平线的方法：

```html

这是一个标题

这是一段普通的文本。

---

这是另一段文本，在水平线之后。

```

在这个例子中，我们引入了 Bootstrap 的 CSS 文件，并使用了 `hr` 标签的 `class="my-3"` 属性来应用 Bootstrap 预定义的样式。`my-3` 类会为水平线设置一定的上下外边距，使其在页面中显示得更加美观。

在 HTML 中创建水平线非常简单，可以使用 `

---

` 标签直接创建，也可以通过 CSS 来自定义其样式。根据不同的需求和项目要求，选择合适的方法来创建水平线，以增强页面的布局和设计效果。