HTML5中绘制直线有四种方式：一、用标签加CSS自定义样式；二、用CSS border属性在块元素上设单边框；三、用伪元素::before/::after添加装饰线；四、用SVG绘制高精度矢量直线。

如果您希望在HTML5页面中绘制一条直线以分割内容区域，可以通过原生HTML标签或CSS样式实现。以下是几种常用且有效的绘制方式：

一、使用

---

标签创建水平分隔线

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">#e0e0e0" stroke-width="2"/>。

2、viewBox确保线条在不同容器中保持比例，x1/y1与x2/y2定义起点与终点坐标。

3、stroke属性控制颜色，stroke-width设定粗细，stroke-dasharray可生成虚线模式。

4、将SVG嵌入HTML后，可通过CSS设置max-width或vertical-align调整其在行内布局中的对齐表现。