在HTML页面设计中，分隔不同内容区域是提升页面可读性的重要操作，水平分割线就是最常用的分隔方式。很多刚接触HTML的开发者会疑惑，HTML水平分割线怎么添加？其实最原生、最简单的实现方式就是使用HTML的hr标签。
hr标签的基本用法
hr是HTML的原生标签，全称为Horizontal Rule，意思是水平规则，也就是我们常说的水平分割线。它是自闭合标签，不需要写结束标签，直接在需要添加分割线的位置插入<hr>即可。
下面是一个最简单的使用示例，在两个段落之间插入水平分割线：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>hr标签基本示例</title>
</head>
<body>
<h3>第一部分内容</h3>
<p>这是页面的第一个内容区域，主要介绍HTML基础语法。</p>
<!-- 插入水平分割线 -->
<hr>
<h3>第二部分内容</h3>
<p>这是页面的第二个内容区域，主要介绍CSS样式设置。</p>
</body>
</html>hr标签的常用属性设置
默认的hr标签样式比较朴素，是灰色的细实线，实际开发中我们通常会通过属性或者CSS来调整它的样式，适配页面的整体设计风格。
HTML原生属性（不推荐，建议用CSS）
早期的HTML中hr标签支持width、size、color、align等属性，但现在这些属性已经被HTML5废弃，不建议使用，这里仅做了解：
width：设置分割线的宽度，可以是像素值或者百分比size：设置分割线的高度，单位是像素color：设置分割线的颜色align：设置分割线的对齐方式，可选left、center、right
CSS样式设置（推荐）
现在更推荐通过CSS来控制hr标签的样式，灵活性更高，下面是一个自定义分割线样式的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义hr样式示例</title>
<style>
.custom-hr {
width: 80%; /* 宽度为父容器的80% */
height: 2px; /* 高度为2像素 */
background-color: #409eff; /* 背景色为蓝色 */
border: none; /* 去掉默认边框 */
margin: 20px auto; /* 上下边距20px，水平居中 */
}
</style>
</head>
<body>
<h3>第一部分内容</h3>
<p>这是页面的第一个内容区域。</p>
<hr class="custom-hr">
<h3>第二部分内容</h3>
<p>这是页面的第二个内容区域。</p>
</body>
</html>hr标签的使用注意事项
虽然hr标签使用很简单，但实际开发中也有一些需要注意的点：
- hr标签是语义化标签，它代表的是内容主题的分隔，不要仅仅为了视觉效果使用hr，如果只需要视觉上的线条，更推荐用CSS的border属性实现，避免干扰页面的语义结构。
- 如果不需要默认的hr样式，一定要记得设置
border: none，否则可能会保留默认的边框样式，导致自定义样式不生效。 - hr标签是块级元素，默认会占据一整行的宽度，如果需要调整宽度，通过设置width属性即可，不需要额外添加其他容器包裹。
替代实现方案
如果不需要语义化的分隔标识，只是想要视觉上的分割线，也可以通过其他元素结合CSS实现，比如用div元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>div实现分割线示例</title>
<style>
.divider {
width: 100%;
height: 1px;
background-color: #e5e5e5;
margin: 15px 0;
}
</style>
</head>
<body>
<h3>第一部分内容</h3>
<p>这是页面的第一个内容区域。</p>
<div class="divider"></div>
<h3>第二部分内容</h3>
<p>这是页面的第二个内容区域。</p>
</body>
</html>这种方式仅做视觉分隔，没有语义含义，适合不需要告诉浏览器这里是内容主题分隔的场景，开发者可以根据实际需求选择合适的实现方式。