HTML5中绘制直线有四种方式：一、用标签加CSS自定义样式；二、用CSS border属性在块元素上设单边框；三、用伪元素::before/::after添加装饰线；四、用SVG绘制高精度矢量直线。
如果您希望在HTML5页面中绘制一条直线以分割内容区域，可以通过原生HTML标签或CSS样式实现。以下是几种常用且有效的绘制方式：
一、使用
标签创建水平分隔线
是HTML5中语义化表示主题分隔的空元素，浏览器默认渲染为一条水平线，适用于段落、章节之间的视觉分隔。
1、在需要插入分隔线的位置，直接输入
标签，无需闭合。
2、可通过添加class属性为该标签绑定自定义CSS样式，例如
。
立即学习“前端免费学习笔记（深入）”；
3、在CSS中设置height、background-color、border等属性，可改变线条粗细、颜色与边框样式。
4、若需去除默认外边距，可在CSS中添加margin: 0;以精确控制垂直间距。
二、使用CSS border属性在块级元素上绘制直线
通过为div、section等容器设置单侧border，可灵活控制直线的位置（顶部、底部、左侧、右侧）、长度及对齐方式，适合需要精准布局的场景。
1、创建一个空的
2、在CSS中定义该类：.line-bottom { border-bottom: 1px solid #000; }。
3、如需控制线条宽度，可调整border-bottom-width值；如需虚线效果，将solid替换为dashed或dotted。
4、若仅需局部线条（如居中短横线），可配合width、margin: 0 auto;及height: 0;使用。
三、使用CSS伪元素::before或::after绘制定制化直线
利用伪元素可在不增加HTML结构的前提下，为任意元素添加装饰性直线，支持绝对定位、旋转、渐变等高级效果。
1、选择目标元素，例如
标题
。2、在CSS中定义.title-with-line::after { content: ""; display: block; width: 60px; height: 2px; background: #337ab7; margin-top: 8px; }。
3、添加position: relative;到父元素，再为伪元素设置position: absolute;与left/right/top/bottom值，实现精确定位。
4、若需倾斜直线，可加入transform: rotate(45deg);并配合origin调整旋转基点。
四、使用SVG绘制高精度可控直线
SVG提供vector级直线路径，支持响应式缩放、滤镜、动画及无障碍语义，适合对图形质量或交互有较高要求的场景。
1、插入内联SVG代码：svg width="100%" height="2" viewBox="0 0 100 2">
2、viewBox确保线条在不同容器中保持比例，x1/y1与x2/y2定义起点与终点坐标。
3、stroke属性控制颜色，stroke-width设定粗细，stroke-dasharray可生成虚线模式。
4、将SVG嵌入HTML后，可通过CSS设置max-width或vertical-align调整其在行内布局中的对齐表现。
