标签的分类：
①块级标签：无论内容多少，会充满整个行。大小可自定义
例：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>网页效果：
