HTML基础之标签(行内标签，块标签，行内块标签)

最新推荐文章于 2025-09-27 16:37:54 发布

原创最新推荐文章于 2025-09-27 16:37:54 发布 · 3.2k 阅读

6 ·

CC 4.0 BY-SA版权

本文深入解析HTML中的行内标签、块级标签及行内块级标签的特点与应用场景，包括span、p、img等标签的特性，并介绍如何通过CSS的display属性在不同类型的标签间进行转换。

一、标签分类

行内标签
块级标签
行内块级标签

可以通过效果看一下：

	下图我们可以看到，span等标签都在一行，当超过浏览器宽度时，会自动换行。但是p标签独占一行

在这里插入图片描述

 当我们为元素设置宽度和高度，这里为span,img,p设置，会发现img，p有所变化，span标签却没有任何变化

在这里插入图片描述
因此我们可以得到他们的特点

二、标签特点

行内标签：span，em，strong，a，b，u，label
特点：
	1.所有元素都在一行，超过浏览器宽度，会进行换行
	2.无法设置宽度，高度，行高，顶和底边距，由内容撑大，可设置行高属性调整这个框的高度


块级标签：p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特点：
	1.每个标签独占一行
	2.可以设置width，height，margin，padding

行内块级标签：img，input，textarea
特点：结合了行内与块的特点，元素并列一排，且可以设置width，height，padding，margin

注意：行内块元素中img，textarea垂直排列默认与baseline水平，解决办法我的另一篇博客解决image底部留白问题

互相转换

1.转化为块级标签
	display:block;
2.转化为行内标签
	display:inline;
3.转化为行内块级标签
	display:inline-block;

相互转换后，会具有对应的特点：
如下图，span标签转换为块级标签，width，height开始起到作用
而p标签转换为行内标签后，与其他元素排在一列，width,height失效

以上是我对标签的理解，希望对你们有帮助！