1. 块级元素
上一篇我们讲了<p>标签，它表示一个段落，在该便签后面会自动换行。
所以<p>标签是一个块级元素，它独自形成一块，跟后面的内容不会出现在同一行。
2. 行级元素
行级元素也可以称之为内联元素，就是在行的内部进行连接。所以行级元素是可以共同出现在同一行的，行级元素之后并不会换行。
3. div标签
<div>标签是一个标准的块级元素，它的效果跟<p>标签类似，都会将内容作为单独的块显示。
如果说这两个标签有何区别的话，p标签更多的表达了段落的意义。而如果写的一段代码想让它成为单独一块，但是这一块也不是一个段落，就可以采用div。
例如，一首诗歌，每一句要断行，但是每一句其实不算是一个段落，此时可以用div标签。
<body>
<h1>春晓</h1>
<div>春眠不觉晓</div>
<div>处处闻啼鸟</div>
<div>夜来风雨声</div>
<div>花落知多少</div>
</body>
1
2
3
4
5
6
7
效果如下：
再多说一些的话，其实用p和div都行，一般来说div用的更多一点。
4. span标签
span标签是行级元素，它包裹的内容不会换行，如下代码:
<body>
我是<span>中国</span>人
</body>
1
2
3
效果如下，可以发现span包裹的内容和前后的内容同处一行，而且效果上也没啥差别。
那么此时可能就会有疑问了，要span标签有何用？就像《悟空》里面唱的，我要这铁棒有啥用捏？
设计了这个标签，那必然是得有点用的。其实span包裹起来的部分，可以单独为其设置效果。比如在后面我们学习了文字颜色设置之后，我们只想把中国二字设为红色，其余字颜色不变。
那么我们就需要span标签将中国包起来，然后对该标签应用特定的文字样式。
这就是span存在的意义，它可以区分不同的内容，以便对不同的内容应用不同的样式或者行为。
5. 小结
说了这么多，其实只需要掌握div换行、span不换行。
