2.4　水平线

水平线用于段落与段落之间的分隔，使文档结构清晰明了、文字的编排更整齐。水平线自身具有很多属性，如宽度、高度、颜色、排列对齐等。在HTML5中经常会用到水平线，合理使用水平线可以获取非常好的网页装饰效果。一篇内容繁杂的文档，如果合理放置几条水平线，就会变得层次分明、便于阅读。

2.4.1　水平线标签

在HTML5中使用<hr>标签创建一条水平线。水平线可以在视觉上将文档分割成几部分。在网页中输入一个<hr>标签，就添加了一条默认样式的水平线。

<hr>标签的语法格式如下：

接下来，使用<hr>水平线标签实现一个果酱制作原料的列表清单。可以使用<hr>水平线标签在段落之间进行提醒分组，同时可以使用<hr>水平线标签制作一些简单的列表清单，如餐厅菜单、食品原料等。具体代码如下：

执行上面的代码，效果如图2.13所示。

图2.13　使用水平线标签的网页效果

2.4.2　水平线标签的宽度

在默认情况下，网页中添加的水平线是100%的宽度，而在实际创建网页时，可以对水平线的宽度进行设置，具体语法格式如下：

在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口宽度值的百分比。

接下来，利用<hr>水平线标签中的宽度属性，实现一则微故事的网页文字装饰效果。首先使用<p>段落标签，将“故事是这样开始的：”文本内容放入其中。然后在<p>标签代码上方添加<hr>水平线标签，并且添加width宽度属性，属性值为120。具体代码如下：

执行上面的代码，效果如图2.14所示。

图2.14　利用<hr>水平线标签装饰文字