<!doctype html><!--声明文档类型 网页文档-->
<html><!--根目录标签 父级-->
    <head><!--网页的头部 用户看不见的-->
        <meta charset='UTF-8'><!--国际编码 字符的编码格式-->

        <!--网页三要素  title keywords description-->
        <title>咸鱼联盟</title><!--网页的标题-->
        <meta name='keywords' content='关键的搜索字符'><!--让搜索引擎找到网页-->
        <meta name='description' content='这是一个简单的模板文件'><!--网页的描述-->
        <style type="text/css">
            .box-one{    /* .+名字  class选择器 */
                width:300px;
                height:150px;
                background:yellow;
            }
            .box-two{
                width:300px;
                height:75px;
                background:deeppink;
            }
            #text{     /* #+名字 id选择器 */
                width:300px;
                height:100px;
                background:purple;
                color:yellow;    /* 设置文字颜色 */
            }
            .box-three{
                width:300px;
                height:100px;
                background:pink;
            }
            .box-three .box-four{    /*后代选择器*/
                width:150px;
                height:50px;
                background:yellow;
            }
            .box-three+.box-four{    /* 相邻(下面的)兄弟选择器 */
                width:300px;    /* 可以用~代替+选中下边所有的兄弟 */
                height:100px;
                background:green;
            }
            body .box-four{
                width: 100px;
                height: 100px;
                background: greenyellow;
            }
            .box-five{
                width: 300px;
                height: 100px;
                background: antiquewhite;
            }
            .box-five>.box-six{    /* 子代选择器 */
                width: 100px;
                height: 50px;
                background: purple;
            }
            *{        /* 通配符选择器 */
            }
        </style>
    </head>


    <body><!--网页的身体 用户可视化区域-->
        <div class="box-one"></div>
        <div class="box-two"></div>
        <p id='text'>咸鱼联盟</p>
        <div class="box-four"></div>
        <div class="box-three">    <!--父级-->
            <div class="box-four"></div>    <!--子级-->
        </div>
        <div class="box-four"></div>    <!--兄弟-->
        <div class="box-four"></div>
        <div class="box-five">
        <div class="box-six"></div>
        </div>
        <!--
            命名规范
                统一使用单引号
                不允许出现数字开头结尾
                html中不出现'_',选用'-'
                取名要规范,百度有
            选择器
                标签选择器 div p ul li
                class选择器   .+名字
                id选择器   #+名字
                后代选择器   只要有空格就是后代选择器
                相邻兄弟选择器  .box-three+.box-four仅是下一个兄弟
                普通兄弟选择器  .box-three~.box-four下边的兄弟都可以选的到
                后代选择器    body .box-four   但是这个的优先级要比class选中的低
                子代选择器    .box-five>.box-six  选择儿子辈的东西
            选择器的权重
                id选择器>class选择器>标签选择器>通配符选择器
                权重高的选择器会覆盖权重低的重复属性(就是都有的属性)
                id选择器>后代选择器>class选择器
        -->
    </body>
</html>