HTML5中绘制直线分隔内容块有五种方法：一、用标签语义化分隔；二、用CSS border属性在块级元素上绘制；三、用伪元素::before/::after添加装饰线；四、用SVG实现精确坐标控制；五、用linear-gradient背景创建多样式线条。
如果您希望在HTML5页面中绘制直线以分隔内容块，则可以通过原生HTML标签或CSS样式实现。以下是几种可行的方法：
一、使用
标签绘制水平线
是HTML5中语义化表示主题分隔的空元素，浏览器默认渲染为一条水平线，适用于逻辑上划分不同内容区域的场景。
1、在需要分隔的位置插入
标签，例如两个段落之间。
2、可添加全局属性如class或id以便后续样式控制，如
。
立即学习“前端免费学习笔记（深入）”；
3、若需去除默认边框阴影和外边距，可通过CSS重置：设置margin: 0; border: none; height: 1px; background-color: #000;。
二、使用CSS border属性在块级元素上绘制直线
通过为div、section等容器设置单边border，可灵活控制直线的位置、粗细、颜色与长度，适合需要精确布局或非水平方向线条的情况。
1、创建一个空的
2、为其添加内联样式或外部CSS类，例如style="border-top: 1px solid #333;"。
3、若需仅显示部分长度，可配合width、margin-left或max-width限制显示范围。
三、使用CSS伪元素::before或::after绘制定制化直线
利用伪元素可在不增加HTML结构的前提下生成线条，适用于标题下方装饰线、卡片分割线等设计需求。
1、为目标元素（如h2）添加position: relative;。
2、使用::after伪元素设置content: ""; display: block; width: 100%; height: 1px; background: #666;。
3、通过transform: translateY()或top值调整线条垂直位置，避免影响原有布局流。
四、使用SVG的元素绘制精确坐标直线
SVG提供像素级控制能力，适合需要斜线、虚线、渐变色或响应式缩放的直线场景。
1、插入svg width="100%" height="2">容器，高度设为线条视觉厚度。
2、在其中添加
3、确保父容器有明确宽度，或使用viewBox适配响应式环境。
五、使用CSS linear-gradient背景绘制多样式直线
借助background-image的渐变函数，可生成双色分界线、带透明过渡的细线，或嵌入图标符号的复合分割线。
1、为一个高度为1px的空div设置background-image: linear-gradient(to right, #ccc, #ccc);。
2、通过重复渐变或color-stop控制起始/结束颜色，例如linear-gradient(to right, transparent 40%, #000 40%, #000 60%, transparent 60%);可生成居中粗线。
3、结合background-size与background-repeat实现点线、虚线效果，无需额外图片资源。
