HTML—标签的分类，span和div标签，不同的标签之间类型转换

标签的分类：

①块级标签：无论内容多少，会充满整个行。大小可自定义

例：p，h1，ul，ol，hr 等

②行级标签：自身的大小就是标签的大小，不会占一整行。大小不可调

例：font，b，i，a 等

③行级块标签：自身的大小就是标签的大小，不会占一整行。大小可自定义

例：input，img 等

三种标签的演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p {width: 200px;height: 200px;background-color: red;}b {width: 200px;height: 200px;background-color: green;}img {width: 500px;height: 200px;}</style></head><body><p>块级标签</p><b>行级标签</b><img src="day03/img/jd-head.png" /></body>
</html>

网页效果：

div标签和span标签的特点：

先来看一段代码的效果：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p {background-color: red;}div {background-color: green;}</style></head><body><p>p标签</p><p>p标签</p><div>div标签</div><div>div标签</div></body>
</html>

网页效果：

div标签和span标签的特点，即为什么需要div标签和span标签

div是一个块级标签，span是一个行级标签

观察上图可以看到在两个p标签之间有一段间隙，而两个div标签之间没有。这是因为p标签作为段落标签有一些他自己的默认格式，而div标签没有。

同理对于行级标签，如b标签你选中某一个词，但是却并不想对这个词进行加粗操作，就需要程序员手动的再调整字体格式。如果使用span标签不会对内容产生影响。

综上所述：对于一般的标签或多或少都有一些他自己默认的格式，而div标签是一个纯净的块级标签，span标签是一个纯净的行级标签。编程人员可以使用div标签和span标签对指定内容进行修饰，而不需要先去删除原来的格式。

行级标签和块级标签的互相转换：

关键字：display

值：

块转行：inline

行转块：block

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span {display: block;/* 将行级标签修改为块级标签 */background-color: red;}div {display: inline;/* 将块级标签修改为行级标签 */background-color: green;}</style></head><body><span>span标签</span><span>span标签</span><div>div标签</div><div>div标签</div></body>
</html>

网页效果：