HTML简单了解（5）-CSDN博客

本文链接：https://blog.csdn.net/QQTSS/article/details/105282016

1.标签的分类

- block（块标签）： div ul ol li dl dd dt p h1 h2 …h6 …、

特点：

块是上下排列的，块是独占一行的。
块，支持CSS中的所有样式。
当块不写宽度的时候，默认的宽度是父容器的宽。
块永远都是一个矩形区域。

这是部分块标签演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box2{  width: 50px ;height: 50px;  
                border:1px black solid ; 
                background: cornflowerblue;
                }

        .box3{  width: 50px ;height: 50px;  
                border:1px black solid ; 
                background: rgb(237, 100, 230); 
                }
    </style>
</head>
<body>
        
        <div class="box2">这是div</div>
        <div class="box3">这是div</div>
        <h1>这是h1</h1>
        <h2>这是h2</h2>
        <h3>这是h3</h3>
        <ul>这是ul</ul>
        <ul>这是ul</ul>
        <p>这是p</p>
        <p>这是p</p>
</html>

在这里插入图片描述

- inline（内联标签）：span a strong em img …

特点：

内联是左右排列的，内联必须在一起
内联，有些样式是不支持的 width height margin(一部分) padding(一部分)
内联元素的宽度就是由内容决定的。
不一定总是矩形区域。（了解）
两个内联元素之间会有一个空隙（折行带来的空隙）

这是部分内联标签演示

<style>
        .box2{  width: 50px ;height: 50px;  
                border:1px black solid ; 
                background: cornflowerblue;
                }

        .box3{  width: 50px ;height: 50px;  
                border:1px black solid ; 
                background: rgb(237, 100, 230); 
                }
      
    </style>
</head>
<body>
        <span class="box2">这是span标签</span>
        <span class="box3">这是span标签</span>
        <a href="!">这是a标签</a>
        <a href="!">这是a标签</a>
        <strong>这是strong标签</strong>
        <strong>这是strong标签</strong>
</html>

在这里插入图片描述

1.1标签的嵌套

<body>
        <script>

            // 标签本身就是很多嵌套规范：
            // table tr (td、th)
            // ul li
            // dl dt dd

            //块标签可以嵌套内联标签:
                <div>     √
                    <span></span>
                </div>

            //块标签不一定能嵌套块标签:
                <div>   √
                    <div></div>
                </div>
            //特殊：
                <p>     ×
                    <div></div>
                </p>

            //内联标签不能嵌套块标签:
                <span>   ×
                    <div></div>
                </span>
            //特殊：
                <a href="">   √
                    <div></div>
                </a>

            //不能自己嵌套自己的操作：
                <a href="">   ×
                    <a href=""></a>
                </a>
                <h2>       ×
                    <h2></h2>
                </h2>

            
        </script>
</body>

2.去掉CSS默认样式

		*{ margin:0; padding:0;}
        html{ font-size:26.666667vw;}
        body{ font-size:0.16rem;}
        ul{ list-style: none;}
        a{ text-decoration: none;}
        img{ display: block;}

以上是这次的