在浏览器中展示的效果为：
文章插图
文章插图
5、水平线元素<hr>hr是英语单词horizon的简写，表示“水平线” 。
例如下面的HTML文档：
<!DOCTYPE html><html> <head><title>example6</title><meta charset="utf-8" /> </head> <body>静夜思<br/>李白<br/>床前明月光，<br/>疑是地上霜 。<br/>举头望明月，<br/>低头思故乡 。<br/><hr/>赋得古原草送别<br/>白居易<br/>离离原上草，一岁一枯荣 。<br/>野火烧不尽，春风吹又生 。<br/>远芳侵古道，晴翠接荒城 。<br/>又送王孙去，萋萋满别情 。<br/> </body></html>在浏览器中的展示效果为：
文章插图
6、对内容进行分块的三种元素：<span>、<div>与<p>span是英语单词，表示“跨度、范围” 。
div是英语单词division的简写，表示“分开、部分” 。
p是英语单词paragraph的简写，表示文章的“段、段落” 。
6.1、当使用<span>元素时，浏览器不会加入换行符例如下面的HTML文档：
<!DOCTYPE html><html> <head><title>example7</title><meta charset="utf-8" /> </head> <body><span>文本1</span><span>文本2</span><span>文本3</span><span>文本4</span><span>文本5</span> </body></html>在浏览器中的展示效果为：
文章插图
6.2、当使用<div>元素时，浏览器会插入换行符例如下面的HTML文档：
<!DOCTYPE html><html> <head><title>example8</title><meta charset="utf-8" /> </head> <body><div>文本1</div><div>文本2</div><div>文本3</div><div>文本4</div><div>文本5</div> </body></html>在浏览器中的展示效果为：
文章插图
6.3、当使用<p>元素时，浏览器会插入换行符，而且间距比<div>大例如下面的HTML文档：
<!DOCTYPE html><html> <head><title>example9</title><meta charset="utf-8" /> </head> <body><p>文本1</p><p>文本2</p><p>文本3</p><p>文本4</p><p>文本5</p> </body></html>在浏览器中的展示效果为：
文章插图
<span>、<div>、<p>三种元素中，用得最多的是<div>，尤其是在前端设计中 。后面会专门再写一篇关于div元素的文章 。
7、图片元素<img>img是英语单词image的简写，表示“图像、图片” 。
<img>元素中我们常用的属性有src和alt，src表示图片所在的位置，alt表示如果找不到图片，在图片位置显示的文字 。
例如下面的HTML文档：
<!DOCTYPE html><html> <head><title>example10</title><meta charset="utf-8" /> </head> <body><img src=https://www.isolves.com/it/cxkf/ydd/html5/2020-10-09/"flower.jpg" alt="花朵图片" />