HTML学习——标签分类_div 闭合标签-CSDN博客

本文链接：https://blog.csdn.net/qq_39114437/article/details/117587245

本文介绍了HTML标签的分类，包括闭合标签（如<div>、<span>）和空标签（如<input>、<img>），并详细阐述了块级元素（如<h1>、<div>、<p>）和行级元素（如<a>、<span>、<img>）的特点。通过修改display属性，可以实现元素间的转换，如将行级元素转换为块级元素或行级块元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>