2.4 水平线

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

2.4.1 水平线标签

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

语法如下：

接下来，使用＜hr＞水平线标签，制作一个果酱制作原料的列表清单。＜hr＞水平线标签经常用在段落之间起到提醒分组的作用，也可以使用该标签制作一些简单的列表清单，比如餐厅菜单、食品原料等。具体代码如下（实例位置：资源包\MR\源码\02\09）：

运行效果如图2.13所示。

2.4.2 水平线标签的宽度

在默认情况下，在网页中添加的水平线是100%的宽度，而在实际创建网页时，可以对水平线的宽度进行设置。

语法如下：

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

接下来，利用＜hr＞水平线标签中的宽度属性，实现一则微故事的页面文字装饰效果。首先使用＜p＞段落标签将“故事是这样开始的：”文本内容放入，然后在＜p＞标签代码上方添加＜hr＞水平线标签，并且添加 width 属性，属性值为 120。具体代码如下（实例位置：资源包\MR\源码\02\10）：

运行效果如图2.14所示。