Unit 3.标签的分类和嵌套规则

一.标签分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素:

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内元素:

<a> <span> <br> <i> <em> <strong> <label>

常用的行内块级元素:

<img> <input>

块级元素特点:display:block

　　1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.自己独占一行.

　　2.元素的高度,宽度,行高,顶边距和底边距都可以设置

　　3.元素的宽度在不设置的情况下,默认是本身父容器的的宽度.

行内元素(内联元素)的特点:display:inline

　　1.和其他元素在同一行上

　　2.元素的高度,宽度,顶边距和底边距都不可以设置

　　3.元素的宽度就是它包含的文字或者图片的宽度,不可改变

行内块级元素:display:inline-block

　　1.和其他元素都在一行上

　　2.元素的高度,宽度,行高,顶边距和底边距都可以设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签分类</title>
</head>
<body>
    <div class="wapper">
        <!--块状元素: <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> -->
        <div class="left">
            我的学校
            <div>我的区域
                <div style="500px;height:100px">我的爱好
                </div>
                <ul>
                    <li>
                        <h2>抽烟</h2>                        
                    </li>
                    <li>
                        <ol>
                            <li>喝酒</li>
                            <li>烫头</li>
                        </ol>

                    </li>



                </ul>
            </div>
        </div>
        <div class="right">
            <!-- 行内元素:<a> <span> <br> <i> <em> <strong> <label> -->
                <a href="#">顶部</a>
                <a href="https://www.baidu.com" target="_blank">百度</a>

        </div>
        <div class="inline-block">
            <!-- img input -->
            <img src="./homesmall.png" alt="加载失败时显示我" title="浏览时显示我">
            <!-- <img src="./homesmall2.png" alt="加载失败时显示我" title="浏览时显示我"> -->
            用户名:
            <input type="text" name="user" style="100px;height:50px">


        </div>






    </div>


    
</body>
</html>

例子

二.嵌套规则

　　1.块元素可以包含内联(行内)元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️

<a href=”#”><span></span></a> ✔️

<span><div></div></span> ❌

　　2.块级元素不能放在p标签里面，例如:

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

　　3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：　　

h1、h2、h3、h4、h5、h6、p

　　4.li元素可以嵌入ul，ol，div等标签

<ul>
        <li>
            <ul>
                <li>
                    <div>

                    </div>
                </li>
                <li>
                    <ol>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </li>
            </ul>
        </li>
    </ul>