使用<hr />标签可插入水平线，通过CSS自定义样式如颜色、高度、宽度和边框类型，实现美观的页面分隔效果。
在HTML中插入水平线，最简单的方法是使用 hr 标签。这个标签会创建一条分隔内容的水平线，默认样式由浏览器决定。但你可以通过CSS来自定义它的颜色、高度、宽度、边框和对齐方式，让页面更美观。
基本用法：插入默认水平线
直接使用 <hr> 标签即可插入一条水平线：<hr>这会在两个段落或区块之间添加一条灰色细线，常用于文章分隔、章节过渡等场景。
使用内联样式自定义水平线
你可以在 <hr> 标签中加入 style 属性，快速设置样式：<hr style="border: 1px solid red; margin: 20px 0;">常见可设置的CSS属性包括：
- border：控制线条的粗细、类型和颜色
- background-color：填充线的颜色（需配合 height 使用）
- height：设置线条厚度
- width：设置线条宽度，支持百分比或固定值
- margin：控制上下间距
- text-align：控制水平线对齐方式（通过父容器）
使用CSS类统一管理样式
如果网页多处使用水平线，推荐定义CSS类，便于维护：<style>
.custom-hr {
border: 0;
height: 2px;
background-color: #333;
width: 80%;
margin: 20px auto;
}
</style>
<hr class="custom-hr">
这种方法可以实现：
- 去掉默认边框（border: 0）
- 用背景色实现纯色线条
- 居中显示（margin: 20px auto）
- 自定义长度（width: 80%）
创建虚线或双线效果
通过修改 border-style 可以实现不同视觉效果：<hr style="border-top: 2px dashed #ccc;">
立即学习“前端免费学习笔记（深入）”；
常用 border-style 值：- dashed：虚线
- dotted：点线
- double：双线
- solid：实线（默认）
基本上就这些。用好 hr 标签加上一点CSS，就能让页面结构更清晰，视觉更舒适。关键是根据设计需求调整颜色、粗细和间距，避免生硬的默认样式。
