html中标签的分类

html中标签(元素)的分类

1.块级元素

1.1 语法

display:block;
/*
设置元素(标签)类型的关键词(样式名)为display
设置块级元素的样式值为block
*/
1
2
3
4
5

1.2 特点

1.2.1 独占一行

a.具体体现

该元素独占一行,后面紧跟着的兄弟标签会在下方显示.

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素的特点</title>
    <style type="text/css">
       .A{
         width: 100px;
         height: 100px;
         background-color: red;
       }
       .B{
         width: 100px;
         height: 100px;
         background-color: pink;
       }
    </style>
</head>
<body>
    <div class="A"></div>   
    <div class="B"></div>   
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

c.展示效果

在这里插入图片描述

1.2.2 可设置宽高

a.具体体现

可以对该元素进行width和height的设置

如果该元素没有设置宽度,会继承父级的宽度

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素的特点</title>
    <style type="text/css">
       .A{
         width: 400px;
         height: 300px;
         background-color: seagreen;
       }
    </style>
</head>
<body>
    <div class="A"></div>   
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

c.展示效果

在这里插入图片描述

2.行内元素

2.1 语法

display:inline;
/*
设置元素(标签)类型的关键词(样式名)为display
设置行内元素的样式值为inline
*/
1
2
3
4
5

2.2 特点

2.2.1 不独占一行

a.具体体现

该元素不独占一行,后面紧跟着的兄弟元素(后面紧挨着的)若是属于行内元素或者行内块元素,会和它显示在同一行,若超过了父级元素就会换行

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的特点</title>
    <style type="text/css">
       .A{
          background-color: rebeccapurple;
       }
       .B{
          background-color: orangered;
       }
    </style>
</head>
<body>
    <span class="A">文明</span>   
    <span class="B">友好</span>   
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

c.展示效果

在这里插入图片描述

1.2.2 不可设置宽高

a.具体体现

不可以对该元素进行width和height的设置

其宽高由元素(标签)里面的内容决定

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的特点</title>
    <style type="text/css">
       .A{
          background-color: skyblue;
          width: 400px;
          height: 400px;
       }
       .B{
          background-color: saddlebrown;
          /*行内元素设置宽高是无效的*/
          width: 400px;
          height: 400px;
       }
    </style>
</head>
<body>
    <span class="A">文明</span>   
    <span class="B">友好</span>   
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

c.展示效果

设置宽度和高度前
在这里插入图片描述

设置宽度和高度后
在这里插入图片描述

1.2.3 换行符和空格在浏览器中都会解析成一个空格

a.具体表现

换行符指的是源代码中兄弟标签(紧邻着的后一个标签)之间的回车换行符（一个),在浏览器中会解析成一个空格

空格指的键盘输入的多个空格,无论你在一行输入多少个空格，都会在浏览器中解析成一个空格

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的特点</title>
    <style type="text/css">
       .A{
          background-color: skyblue;
       }
       .B{
          background-color: saddlebrown;
       }
    </style>
</head>
<body>
    <span class="A">文                      明</span>   
    <span class="B">友好</span>   
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

c.展示效果

在这里插入图片描述

1.2.4 行内元素的外边距一半有效,一半无效

a.具体表现

行内元素的上外边距(margin-top)和下外边距(margin-bottom)设置了也不会改变其元素的位置

行内元素的左外边距(margin-left)和右外边距(margin-right)设置了,会改变元素的位置

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的特点</title>
    <style type="text/css">
      /* 清除默认样式 */
       *{
         padding: 0px;
         margin: 0px;
         /* 清除源代码中的换行符被解析成空格的影响*/
         font-size: 0px;
       }
       .A,.B{
         font-size: 16px;
       }
       .A{
          background-color: skyblue;
          /* margin-top无效果,margin-right有效果 */
          margin-top:100px;
          margin-right: 100px;
       }
       .B{
          background-color: saddlebrown;
       }
    </style>
</head>
<body>
    <span class="A">文                      明</span>   
    <span class="B">友好</span>   
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

c.展示效果

设置上外边距和右外边距之前:
在这里插入图片描述

设置上外边距和右外边距之后:
在这里插入图片描述

3.行内块元素

3.1 语法

display:inline-block;
/*
设置元素(标签)类型的关键词(样式名)为display
设置行内块元素的样式值为inline-block
*/
1
2
3
4
5

3.2 特点

3.2.1 不独占一行

a.具体表现

该元素不独占一行,后面紧跟着的兄弟元素(后面紧挨着的)若是属于行内元素或者行内块元素,会和它显示在同一行,若超过了父级元素就会换行。

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的特点</title>
    <style type="text/css">
      /* 清除默认样式 */
       *{
         padding: 0px;
         margin: 0px;
         /* 清除源代码中的换行符被解析成空格的影响*/
         font-size: 0px;
       }
       div{
         width: 400px;
         height: 400px;
         /* 设置背景颜色,使div所占区域更加显眼 */
         background-color: red;
       }
       img{
         width: 150px;
         height: 200px;
       }
    </style>
</head>
<body>
   <div>
     <img src="img/sangqi.webp" alt="">
     <img src="img/sangqi.webp" alt="">
     <img src="img/sangqi.webp" alt="">
     <img src="img/sangqi.webp" alt="">
     <img src="img/sangqi.webp" alt="">
   </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

c.展示效果

在这里插入图片描述

3.2.2 可设置宽高

a.具体表现

可以对该元素进行width和height的设置

如果该元素没有设置宽度,不会继承父级元素的宽度,其宽度由内容决定

若设置了高度,未设置宽度,那么

图片显示宽度=图片设置高度/图片原高度*图片原宽度

例如下面所给的源代码例子中,图片的宽度和高度如下所示
在这里插入图片描述

设置了图片高度为200px,那么在浏览器中,图片显示宽度=200/156*295=378.02px

浏览器中图片显示的大小如下所示:
在这里插入图片描述

同理可知:若未设置图片高度,设置了图片宽度,那么

图片显示高度=图片设置宽度/图片原宽度*图片原高度

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的特点</title>
    <style type="text/css">
      /* 清除默认样式 */
       *{
         padding: 0px;
         margin: 0px;
         /* 清除源代码中的换行符被解析成空格的影响*/
         font-size: 0px;
       }
       div{
         width: 400px;
         height: 400px;
         /* 设置背景颜色,使div所占区域更加显眼 */
         background-color: red;
       }
       img{
         height: 200px;
       }
    </style>
</head>
<body>
   <div>
     <img src="img/sangqi.webp" alt="">
     <img src="img/sangqi.webp" alt="">
     <img src="img/sangqi.webp" alt="">
   </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

c.展示效果

在这里插入图片描述

4.补充

a.行内元素的紧邻着的兄弟元素(后一个)是行内块元素时,两标签会在同一行显示(不超过父盒子的宽度)

b.标签是有默认类型的

常见的块级元素有div、p、标题标签(h1…)、form表单标签、ol有序、ul无序、table标签、hr标签、li标签

常见的行内标签有span标签、a标签、字体修饰标签(i斜体,b加粗,u下划线,del删除线、mark标记)、font标签、br标签、input标签

常见的行内块标签有img、video、audio

相关阅读:
javascript的AMD模式
 【SQL】SQL常见窗口函数整理汇总大全（用到over的场景）
【华为OD机试真题 JS】字符串分割（二）
网络安全（黑客）自学
 Vue2 如何优雅的解决v-for和v-if同时出现
 【运维语音播报】Zabbix告警语音声光播报的实现
 力扣记录：动态规划5子序列问题(2)编辑距离——392 判断子序列，115 不同的子序列，583 两个字符串的删除操作，72 编辑距离
 iframe通过postMessage进行跨域通信以及在Angular中使用
 大数据-之LibrA数据库系统告警处理（ALM-12039 GaussDB主备数据不同步）
Java毕设项目飞机订票管理系统计算机（附源码+系统+数据库+LW）
原文地址：https://blog.csdn.net/SSS4362/article/details/125470578