手把手教学！HTML中这样插入水平线，hr标签样式全解析

结合linear-gradient背景。响应式设计中可设置百分比宽度与居中对齐，或通过媒体查询调整不同屏幕下的样式。合理使用

---

标签有助于页面语义化，间接提升SEO效果，但不应仅为了视觉装饰而滥用。

在HTML中插入水平线，最直接的方式就是使用

---

标签。它是一个语义化的元素，表示段落级元素之间的主题转换。当然，水平线的样式可以通过CSS进行高度自定义，以满足各种设计需求。

---

标签的使用非常简单，只需要在HTML文档中你想要插入水平线的位置添加

---

即可。例如：

<p>这是一段文字。</p>
<hr>
<p>这是另一段文字。</p>

如何使用CSS自定义水平线的样式？

默认情况下，

---

标签的样式可能比较朴素，通常只是一条灰色的细线。要改变它的外观，可以使用CSS。你可以修改颜色、高度、宽度，甚至添加阴影等效果。

例如，要将水平线变成蓝色，高度为5像素，可以这样做：

<hr   style="max-width:100%">

或者，你也可以在CSS文件中定义一个类，然后将该类应用到

---

标签上：

.custom-hr {
  color: #3498db; /* 蓝色 */
  height: 3px;
  background-color: #3498db;
  border: 0; /* 移除默认边框 */
  margin-top: 20px; /* 增加上边距 */
  margin-bottom: 20px; /* 增加下边距 */
}

<hr class="custom-hr">

---

标签有哪些常见的替代方案？

虽然

---

标签简单易用，但在某些情况下，你可能需要使用其他方法来创建水平线。例如，你可以使用一个空的