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

Black—slience

于 2024-03-15 21:30:00 发布

阅读量511

点赞数 8

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_77713282/article/details/136742899

版权

本文详细介绍了HTML中的块级标签（如p、div）、行级标签（如font、b）和行级块标签（如input、img）的区别，以及div和span标签的特点。同时讨论了如何通过CSS的display属性实现行级与块级标签之间的转换。

摘要由CSDN通过智能技术生成

标签的分类：

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

例：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>

网页效果：

Black—slience

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML—标签的分类，span和div标签，不同的标签之间类型转换

标签的分类：行级标签，块级标签，行级块标签；span和div标签：为什么需要span标签和div，div标签和span标签的特点标签；行级标签和块级标签的互相转换
复制链接

扫一扫