在html中花一条线的方法是有很多的，一般可以直接使用html代码实现或者借助css代码来实现都是可以的。
方法1、使用<hr>标签画线
<html><body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
结果如下：
方法2：使用css的border进行画线
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>float</title>
</head>
<div id="div1"></div>
<style>
#div1{
width: 500px
border-bottom: 1px solid red
}
</style>
</html>
结果如下：
一、普通1、横线
2、居中横线
<hr align=center width=300 color=#987cb9 size=1>
align 线条位置（可选left、right、center）；width线条长度；color颜色；size厚度
二、特效（效果并不是孤立的，可相互组合）
1、两头渐变透明
<hr style="filter: alpha(opacity=100, finishopacity=0, style=3)" width="80%" color=#987cb9 SIZE=3>
2、纺锤形
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>
3、右边渐变透明
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>
4、左边渐变透明
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>
5、虚线
<HR style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>
6、双线
<HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>
7、立体效果
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>
8、钢针效果
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>
9、垂直分割线
<table border="1px" cellpadding="0" cellspacing="0" style="height:265pxborder-left-style:solidborder-bottom-style:noneborder-right-style:noneborder-top-style:none">
想用它来划竖线，一般可以直接使用html代码实现或借助css代码来实现都可以。
方案一:<html>、<body>、<p>hr 标签定义水平线：</p>、<hr />、<p>这是段落。</p>、<hr />、<p>这是段落。</p>、<hr />、<p>这是段落。</p>、</body>、</html>
方案二:<!DOCTYPE html>、<html>、<head>、<meta charset="UTF-8">：<title>float</title、</head>、<div id="div1"></div>、<style>、#div1{、width: 500px、border-bottom: 1px solid red、}、</style>、</html>
