《HTML CSS JavaScript 网页制作从入门到精通第3版》—

本节书摘来异步社区《HTML CSS JavaScript 网页制作从入门到精通第3版》一书中的第2章，第2.7节，作者：刘西杰，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.7　水平线

在网页中常常看到一些水平线将段落与段落之间隔开，这些水平线可以通过插入图片实现，也可以更简单地通过标记来完成。

<hr>标记代表水平分割模式，并会在浏览器中显示一条线。```

语法：

`
说明：

在网页中输入一个

标记，就添加了一条默认样式的水平线。

举例：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>水平线</title>
</head>
<body>
<p align="center">无月的中秋 </p>
<hr>
<p>据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，这就是中秋节的来历，这就是月饼的来历，大家都会在这一天，合家团圆，吃着月饼，然后在空旷的夜空下赏月。渐渐的，也许人们会淡忘头顶的月亮，只记得这一天是个合家团聚的节日，记得这一天有月饼吃，偶尔抽空抬了下头，稍稍感慨：今天月亮还真是亮。我几乎要忘了月亮才是一切的缘由，直到发现今天看不到它 </p>
</body>
</html>```
在代码中加粗部分的标记为水平线标记，在浏览器中预览，可以看到插入的水平线效果，如图2.10所示。
<div style="text-align: center"><img src="https://yqfile.alicdn.com/e7ae90dbb5e07467b31024c51847e33f403df728.png" width="" height="">