如何控制HR标签制作的网页水平线的长度和颜色？

1、首先新建html文档，输入html5标准声明，如图所示。

2、然后输入html基本网页结构，如图所示。

3、接着输入hr标签<hr>是水平线，是单边标记，如图所示。

4、hr标签的常用属性，Size：设置水平线的粗细。

5、Width：设置水平线的宽度， Color：设置水平线的颜色，noshade：纯色显示，不带阴影效果。

6、最后运行网页，查看效果，如图所示，就完成了。

网页中制作一条水平线的HTML代码有以下的方法可以实现：

1.使用html中的border属性来设置一条水平线

<div style="width:500px border:1px solid red"></div><!--复制到html文件中就会是一条红色水平直线，线的颜色、长短、可自己调节-->   

2.使用hr标签可以制作一条水平直线

<hr/>

3.使用background-color来制作一条线，和border基本类似

<div style="width:500px height:1pxbackground-color:red"></div><!--复制到html文件中就会是一条红色水平直线，线的颜色、长短、可自己调节-->   

4.可利用背景图来实现和background-color原理一样

<div style="width:500px height:1pxbackground:url(背景图的路径) repeat-x"></div><!--复制到html文件中就会是一条红色水平直线，线的颜色、长短、可自己调节-->   

在HTML中，设置水平线高度，有两个标签border和height，用法如下：

用border属性来设置一条水平线，如代码：

<div style="width:500px border:1px solid red"></div>

<!--注：border 这里指水平线高度！-->

使用background-color来制作一条线，和border基本类似，如代码

<div style="width:500px height:1pxbackground-color:red"></div>

<!--注：height:1px 这里指水平线高度！-->

使用hr标签可以制作一条水平直线，如代码：

<hr/><!--这个标签的涵义就是一条水平的直线，但是不灵活，现在基本没人使用！-->

---