JavaWeb学习之路(10)--HTML块级元素div与行级元素span

Myth丶恋晨 2022-09-11 13:16 152阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 块级元素
 *  2. 行级元素
 *  3. div标签
 *  4. span标签
 *  5. 小结

# 1. 块级元素 #

上一篇我们讲了`<p>`标签，它表示一个段落，在该便签后面会自动换行。

所以`<p>`标签是一个块级元素，它独自形成一块，跟后面的内容不会出现在同一行。

# 2. 行级元素 #

行级元素也可以称之为内联元素，就是在行的内部进行连接。所以行级元素是可以共同出现在同一行的，行级元素之后并不会换行。

# 3. div标签 #

`<div>`标签是一个标准的块级元素，它的效果跟`<p>`标签类似，都会将内容作为单独的块显示。

如果说这两个标签有何区别的话，p标签更多的表达了段落的意义。而如果写的一段代码想让它成为单独一块，但是这一块也不是一个段落，就可以采用div。

例如，一首诗歌，每一句要断行，但是每一句其实不算是一个段落，此时可以用div标签。

<body>
        <h1>春晓</h1>
        <div>春眠不觉晓</div>
        <div>处处闻啼鸟</div>
        <div>夜来风雨声</div>
        <div>花落知多少</div>
    </body>

效果如下：  
![在这里插入图片描述][f9abc9bd725f4378aaf01d4cf796c91f.png_pic_center]  
再多说一些的话，其实用p和div都行，一般来说div用的更多一点。

# 4. span标签 #

span标签是行级元素，它包裹的内容不会换行，如下代码:

效果如下，可以发现span包裹的内容和前后的内容同处一行，而且效果上也没啥差别。  
![在这里插入图片描述][c334fd51b6914630bc5fd672593bf4d0.png_pic_center]  
那么此时可能就会有疑问了，要span标签有何用？就像《悟空》里面唱的，我要这铁棒有啥用捏？

设计了这个标签，那必然是得有点用的。其实span包裹起来的部分，可以单独为其设置效果。比如在后面我们学习了文字颜色设置之后，我们只想把`中国`二字设为红色，其余字颜色不变。

那么我们就需要span标签将`中国`包起来，然后对该标签应用特定的文字样式。

这就是span存在的意义，它可以区分不同的内容，以便对不同的内容应用不同的样式或者行为。

# 5. 小结 #

说了这么多，其实只需要掌握div换行、span不换行。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[f9abc9bd725f4378aaf01d4cf796c91f.png_pic_center]: /images/20220828/870005bb5da34700b42797d03e4c4f8f.png
[c334fd51b6914630bc5fd672593bf4d0.png_pic_center]: /images/20220828/094421e738764bcba2a735f59084181f.png