最简单的方法是使用
标签，它是一个空标签，无需闭合，浏览器会自动渲染为一条横线。1. 可通过内联样式或css自定义水平线的外观，如颜色、粗细、长度和阴影效果，例如
可创建一条蓝色、2像素粗、宽度为页面50%并居中且上下间距20像素的水平线。2. 使用border-top属性可实现更精细控制，如
可创建灰色虚线水平线。3.
标签在语义化html中表示内容主题的分割，应用于区分不同内容块，但不应滥用，仅在逻辑分隔时使用。4. 除
外，还可使用通过css边框模拟水平线，适用于段落底部或其他元素的装饰性分隔。5. 更高级的方法是利用伪元素::before或::after创建动态水平线，如通过绝对定位在文本前后添加背景线，实现标题居中覆盖于线条上的视觉效果，此法灵活性高但实现较复杂。
在HTML中插入水平线，最简单直接的方法就是使用
解决方案
立即学习“前端免费学习笔记（深入）”；
如何自定义水平线的样式？
默认的水平线可能比较单调。想要让它更符合你的网页风格，可以使用CSS来修改它的样式。例如，你可以改变它的颜色、粗细、长度，甚至添加一些阴影效果。
这段代码会创建一个蓝色的、2像素粗的、长度为页面50%的水平线，并且上下留有20像素的空白。margin: 20px auto;让水平线居中显示。
你还可以使用更高级的CSS属性，比如border-style来改变线条的样式，比如虚线、点线等等。
这会创建一个灰色的虚线水平线。注意这里我们使用了border-top而不是border，因为我们只想修改顶部的边框样式。
比如，你在一篇文章中，写完了一个主题，想要开始写另一个主题，就可以使用
但是，要注意的是，不要滥用
除了
当然有。你可以使用CSS的border-bottom属性来给任何元素添加一个底边框，从而模拟水平线的效果。
这会在一个空的div元素底部添加一条灰色的实线边框，看起来就像一条水平线。
这种方法的优点是，你可以更灵活地控制水平线的位置和样式。比如，你可以给一个段落的底部添加一条水平线，而不需要在段落之间插入一个
另外，你还可以使用伪元素::before或::after来创建水平线。
标题
这段代码会在div元素的内容之前创建一个水平线。通过调整position、left、top等属性，你可以精确地控制水平线的位置。这种方法更加灵活，但也更复杂。
