HTML5中实现横线分隔有五种方法：一、语义化<hr>标签；二、CSS边框属性；三、伪元素::before/::after；四、SVG矢量绘制；五、linear-gradient背景渐变模拟。
如果您希望在HTML5页面中添加横线以实现内容分隔效果，则需要使用语义化或样式化的方式完成。以下是多种实现横线与分隔线的具体方法：
一、使用 <hr> 标签创建水平分隔线
<hr> 是HTML5中专门用于表示主题分隔的语义化元素，浏览器默认渲染为一条水平横线，适用于段落、章节之间的视觉分隔。
1、在需要插入横线的位置，输入 <hr> 标签（无需闭合）。
2、可为 <hr> 添加 class 属性以便后续CSS控制，例如：<hr class="section-divider">。
立即学习“前端免费学习笔记（深入）”；
3、若需禁用默认样式并完全自定义，可在CSS中设置 <hr> 的 border 为 none，并通过 height、background 等属性重绘。
二、使用CSS边框属性绘制横线
通过为块级元素（如 <div>、<p> 或 <span>）设置单侧 border，可灵活控制横线的位置、粗细、颜色和长度，适用于非语义化场景或精确布局需求。
1、在HTML中插入一个空的 <div> 元素，例如：<div class="line"></div>。
2、在CSS中定义该类：.line { border-top: 1px solid #ccc; }，即可生成顶部横线。
3、如需居中短横线，可配合 width、margin: 0 auto 设置宽度与居中；如需虚线，将 solid 替换为 dashed。
三、使用CSS伪元素生成横线
利用 ::before 或 ::after 伪元素，可在不增加HTML结构的前提下动态插入横线，适合装饰性分隔或响应式设计中的条件渲染。
1、选择目标元素（如标题），为其添加类名，例如：<h2 class="title-with-line">简介</h2>。
2、在CSS中编写：.title-with-line::after { content: ''; display: block; width: 60px; height: 2px; background: #333; margin: 8px auto 0; }。
3、确保父元素未设置 overflow: hidden，否则伪元素可能被裁剪。
四、使用SVG绘制高精度横线
SVG提供像素级控制能力，适用于需要抗锯齿、缩放不变形或动画横线的场景，尤其适合Retina屏幕或设计系统集成。
1、在HTML中嵌入内联SVG：<svg width="100%" height="2" viewBox="0 0 100 2"><line x1="0" y1="1" x2="100" y2="1" stroke="#999" stroke-width="2"/></svg>。
2、将 width 设为 100% 可实现响应式延展，viewBox 保证线条比例恒定。
3、如需渐变横线，可用 <defs> 定义 <linearGradient> 并赋给 stroke。
五、使用CSS渐变背景模拟横线
借助 background-image 的 linear-gradient 函数，可在任意元素上通过背景方式“画出”横线，兼容性强且易于复用。
1、为一个空 <div> 设置高度为 0，但赋予 padding-bottom 或 margin-bottom 形成占位空间。
2、添加样式：background: linear-gradient(to right, transparent 50%, #666 50%, transparent 50%); background-size: 2px 2px; background-repeat: repeat-x;
3、调整 background-size 中第一个值可控制横线粗细，第二个值控制垂直位置精度。
