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>

网页效果：