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