HTML学习——标签分类

HTML标签分类

掌握HTML标签分类有助于，我们更好地运用HTML标签，提升对HTML理解。
闲话少说，让我们开始今天的学习吧！(☆＿☆)

标签从闭合的角度可以分为 闭合标签 和 空标签

（1） 闭合标签，因为*布唉冻*语言乏力，所以就直接上图了，如下：

大部分标签都是闭合标签、如：<div></div>、<span></span>、<p></p>、<video></video>、<audio></audio>等类型的
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML标签分类</title>
</head><body><!-- 闭合 --><p>这是闭合的标签</p><div>这也是闭合的标签</div><span>这同样是闭合的标签</span>
</body></html>

（1） 空标签
也是直接上图：

其他少数为空标签，常见的空标签有<input />、 <img />、 <area />、 <base />、 <link />等。
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML标签分类</title>
</head><body><!-- 空标签 --><img src="" alt=""><input type="text" name="" id=""><link rel="stylesheet" href="">
</body></html>

第二个分类（也是常见的分类）

块级元素

直接上图：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML标签分类</title>
</head><body><!-- 块级元素 --><h1 style="background-color: aqua;  ">h1</h1><div style="background-color: rgb(143, 236, 171); ">div</div><p style="background-color: rgb(199, 230, 117); ">p</p></body></html>

块级元素：默认情况下它的宽度是继承其父元素的宽度,高度是内容撑起来的高度,没有内容的时候高度为0.
特点：
默认的情况下,块状元素都会独占一行,块状元素会按顺序自上而下排列;
块状元素都可以直接设置宽度和高度，块级元素如果不设置宽度和高度，则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。
元素会独占一行，即元素前后都会自动换行，主要用于网页布局

常用的块状元素:div, dl,ul, ol,(h1-h6), p, form, hr, table等;

行级元素

行内元素： span、i、b、s、u、label、img、a、code，不会换行，多个元素会在一行内显示。
也是先上图：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML标签分类</title>
</head><body><!--  行级元素 --><a href="">AAAA</a><span>BBBB</span><img src="fczlm.jpg" alt=""></body></html>

特点:
内联元素后面如果是内联元素,则会在一行内逐个显示;其他行级元素共处一行 ；
内联元素现实的宽度,高度,不能直接定义,其宽度和高度由其内容自动填充。

元素之间的转化

方法：
可以在行内样式或css样式中改变元素的display将三种元素进行转换。

display:block；(将元素变为块级元素)
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML标签分类</title>
</head><body><!--  未添加display:block；(将元素变为块级元素) --><a href="#">AAAA</a><a href="#">BBBB</a><br><br><!-- 第一个<br>实现，丛BBBB的后面调到下一行，第二个<br>实现换行，形成AAAA BBBB行 与 CCCC行，中间的空白行 --><!--  添加display:block；(将元素变为块级元素) --><a href="#" style="display: block;">CCCC</a><a href="#" style="display: block;">DDDD</a></body></html>

结果图：

display:inline； (将元素变为行级元素)
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML标签分类</title>
</head><body><!--  未添加display:inline； (将元素变为行级元素) --><div style="background-color: red;">AAA</div><div style="background-color: green;">BBB</div><!--  添加display:inline；  (将元素变为行级元素) --><div style="display: inline;background-color: yellow;">CCC</div><div style="display: inline;background-color: purple;">DDD</div></body></html>

结果图：

display：inline-block；（将元素变为行级块元素）
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML标签分类</title><style>a {width: 100px;height: 100px;background-color: brown;}</style>
</head><body><!--  未添加display: inline-block;；(将元素变为块级元素) --><a href="#">AAAA</a><a href="#">BBBB</a><br><br><!-- 第一个<br>实现，丛BBBB的后面调到下一行，第二个<br>实现换行，形成AAAA BBBB行 与 CCCC行，中间的空白行 --><!--  添加display: inline-block;；(将元素变为块级元素) --><a href="#" style="display: inline-block;">CCCC</a><a href="#" style="display: inline-block;">DDDD</a></body></html>

结果图：

结束

掌握跟多的技巧，方能成就大咸鱼！
布唉冻 ╮(￣▽ ￣)╭。大家直接搜索可以了｀（∩_∩）′。
HTML入门：https://blog.csdn.net/qq_39114437/article/details/117453383