heml5+css网页元素的控制、元素的类型、常见的块元素、常见的行内元素、span标签的用法元素类型的转换/学习笔记

最新推荐文章于 2023-01-19 17:11:14 发布

noahsark747

最新推荐文章于 2023-01-19 17:11:14 发布

阅读量605

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/No1banana/article/details/122734938

版权

本文详细介绍了HTML中的元素类型，包括常见的块元素如div和行内元素如span，强调了行内块元素img和input的特性。此外，还探讨了span标签的用法，它常用于定义特殊文本并配合CSS使用。最后，文章讨论了如何通过display属性进行元素类型的转换，并提供了演示代码。

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

一、元素的类型

1：块元素

在页面中以区域块的行书出现，每个块元素通常会独自占据一行或多行，可以对齐设置宽度、高度、对齐等属性

2：行内元素

不占据独立的区域

行内元素仅靠自身字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等

常见的块元素

<div>/<h1>/<p>/<li>/<ul>其中div是最典型的块元素

常见的行内元素

<span>/<strong>/<a>/<b>/<u>其中span标记是最典型的行内元素

注意：行内块元素：img/input/是两个特殊的行内元素，但是可以设置`宽、高`等块元素对应的属性。

二、`<span>`标签

1.span标签是一个行内标记
2.<span>与</span>之间只能包含文本和 嵌套各种行内标记。
3.span标记常用语定义网页中某些特殊显示的文本，配合class/id属性使用
4.当行其它行内标记窦不合适时，就可以使用span标记。
span标签本身没有自带结构与样式特征
<div>可以嵌套<span>标签，但<span>不可以嵌套<div>标签

span标签的用法与效果

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>span标签</title>
	<style>
		span{
			color: green;
			font-size: 20px;
		}
		.one{
			color: blue;
			font-size: 24px;
		}
		.two{
			color: red;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<span>
			<span class="one">木偶戏</span>
			是中国的一种古老的民间艺术，
			<span class="two">是中国乡土艺术的瑰宝</span>
	</span>
</body>
</html>

三、元素类型的转换

利用元素类型转换我们可以使用

1.使用方法display属性

2.display对应的属性值

属性值	含义
inline	可以将元素`转换为行内元素`，具有行内元素的属性
block	将元素`转换为块元素`，可以设置宽高等具有`块元素`的属性
Inline-block	将元素转换为`行内块元素`可以设置宽高属性，但该元素不会独占一行
none	主要用于设置一些隐藏的盒子或者弹窗,`不显示`也`不占用页面空间`

元素类型转换的演示代码

<html>
<head>
<meta charset="UTF-8">
<title>元素类型转换</title>
	<style>
		div{
			width: 200px;
			height: 50px;
			background:#0000D3;
		}
		span{
			width: 200px;
			height: 50px;
			background:#AA0306;
			display: block;/*将span标签区域转换成了块元素，即可按照块元素的方式设置样式。*/
		}
	</style>
</head>
<body>
	<div>111111</div>
	<div>222222</div>
	<div>333333</div>
	<span>AAAAAA</span>
	<span>BBBBBB</span>
	<span>CCCCCC</span>
</body>
</html>