可使用语义化<hr>标签或CSS border属性实现视觉分隔：一、<hr>用于段落章节分隔；二、border-bottom为块级元素加底部分割线；三、border-left/right实现垂直分隔；四、伪元素::after/::before绘制自定义分割线。
如果您希望在HTML5页面中对内容进行视觉上的分隔，可以使用语义化的
标签或通过CSS的border属性实现不同样式的分割线。以下是几种具体操作方式：
一、使用<hr>标签添加水平分割线
<hr>是HTML5中表示主题分隔的语义化元素，浏览器默认渲染为一条浅灰色水平线，适用于段落、章节之间的自然分隔。
1、在需要分隔的位置插入<hr>标签，例如在两个<p>段落之间。
2、可为<hr>添加class属性以便后续用CSS定制样式，如<hr class="section-divider">。
立即学习“前端免费学习笔记（深入）”；
3、若需兼容旧版浏览器并确保语义清晰，不要为<hr>设置width或align等废弃属性，应全部交由CSS控制。
二、用CSS border属性在块级元素底部加分割线
通过设置border-bottom可为<div>、<header>、<section>等容器添加精确可控的分割线，适合强调模块边界或列表项分隔。
1、为指定元素添加内联样式：<div style="border-bottom: 1px solid #ccc;">内容</div>。
2、更推荐在外部CSS文件中定义类，例如：.divider-bottom { border-bottom: 2px dashed #666; }，再在HTML中应用class="divider-bottom"。
3、注意设置padding-bottom或margin-bottom以避免文字紧贴线条，提升可读性。
三、用CSS border-left或border-right实现垂直分割线
当布局为多列或需在相邻容器间添加竖向分隔时，border-left或border-right比<hr>更适用，且支持颜色、粗细和线型自由组合。
1、对左侧容器设置border-right：<div style="border-right: 1px solid #e0e0e0; padding-right: 16px;">左栏</div>。
2、对右侧容器设置border-left，并同步调整padding-left以保持内容对齐。
3、若用于Flex或Grid布局中的子项，建议配合box-sizing: border-box防止宽度溢出。
四、使用伪元素::after或::before绘制自定义分割线
伪元素可在不增加HTML结构的前提下，动态生成分割线，支持渐变、图标嵌入、阴影等复杂效果。
1、为容器添加相对定位：<div class="custom-separator">标题</div>，并在CSS中写 .custom-separator { position: relative; }。
2、用::after生成绝对定位的线条：.custom-separator::after { content: ""; position: absolute; bottom: -10px; left: 0; width: 60px; height: 3px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); }。
3、必须声明content属性（即使为空字符串），否则伪元素不会渲染。
