HTML5开发系列（5）之标签的类型以及类型转换

最新推荐文章于 2022-10-07 16:23:41 发布

启之灵

最新推荐文章于 2022-10-07 16:23:41 发布

阅读量734

点赞数

分类专栏： Html 5

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/82391578

版权

Html 5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

html标签一般分为块标签和行内标签和行内块元素三种

1.块元素：

常见的标签有：<h1>~<h6>、<p> ,<div> ,<ul> ,<ol>, <li> 等；

特点：1.块元素通常会都占一行或者多行，

2.可以对其设置宽高，对齐等属性，常用于网页的布局和结构的搭建；

3.可以容纳内联元素和其他块元素；

4.默认宽度是容器的100%。

ps：文字类块元素中不能在放块元素了， p ， h1--h6 ，dt中不能再放块元素了；

2.行内元素

常见的行内元素有：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

特点：1.不占有独立的区域，区域是包裹内容

2.不可以设置宽高和对齐，常用于控制页面中文本样式；

3. 只能容纳文本或者其他的行内元素；（<a>比较特殊除外）

ps：a 中不能再放了a了

3.行内块元素

常用的元素：<img>,<input>,<td>

特点：1.和相邻的行内元素，行内块元素在一行上，但是之间有空隙；

2.默认宽高是它本身内容的宽高；

3.高度，行高，外边距以及内边距都是可以控制的；

其实上面三种元素类型在显示的时候可以互相转换显示模式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				display: inline;	/*将块元素的显示模式转换成行内元素的显示模式;*/
			}
			
			span{
				width: 100px;
				height: 100px;
				background-color: orange;
				display: block;		/*将行内元素的显示模式切换成块元素的显示模式;*/
			}
			
			a{
				width: 100px;
				background-color: green;
				display: inline-block;		/*将行内元素的显示模式切换成行内块元素的显示模式;*/
			}
		</style>
	</head>
	<body>
		<div>块元素</div>
		<div>块元素</div>
		<hr />
		
		<span>行内元素</span>
		<span>行内元素</span>
		<hr />
		
		<a href="#">行内元素转行内块</a>
		<a href="#">行内元素转行内块</a>

	</body>
</html>