（4）页面结构分析

div标签，层次结构标签

PS：div层级标签，是最常用的标签，用来进行页面结构搭建

网页代码div标签关联解读

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
    <!--案例1-->
    <!--div层级标签，是最常用的标签，用来进行页面结构搭建-->
    <!--div下有属性，class对层级标签重命名（可重复优先选择），id是唯一标识号不能重复-->
    <!--这个是主体，最大的-->
    <div class="wrapper">

        <!--这个是头标签-->
        <div class="header"></div>

        <!--这个是导航标签-->
        <div class="nav"></div>

        <!--这个是主体内容标签-->
        <!--.left+.center+.right 通过table键可以快速创建带属性值的标签-->
        <div class="body">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        
        <!--网站底部标签-->
        <div class="foot"></div>
    </div>

    <!--案例2 ：-->
    <div class="idea">
        <h3></h3>
        <p></p>
        <p></p>
        <p>
            <b></b>
        </p>
    </div>

    <!--案例3-->
    <div class="left">
        <div class="list">
            <h3>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </h3>
        </div>
    </div>
</body>
</html>