黑马程序员前端基础笔记：前端基础提高H5C3 01

一、比div语义更强    
    <!-- 头部 -->
    <header></header>
    <!-- 导航栏 -->
    <nav></nav>
    <!-- 侧边栏 -->
    <aside></aside>
    <!-- 内容 -->
    <article></article>
    <!-- 片段 -->
    <section></section>
    <!-- 底部 -->
    <footer></footer>
二、视频标签
    <!-- controls:控件，autoplay：自动播放，muted：静音播放，loop：循环播放，poster：封面 -->
    <video src="images/mi.mp4" controls autoplay muted loop poster="images/mi9.jpg"></video>
    <audio src="images/music.mp3" controls autoplay loop></audio>
三、input拓展
    邮箱：<input type="email">
    网址：<input type="url">
    日期：<input type="date">
    时间：<input type="time">
    数量：<input type="number">
    手机号码：<input type="tel">
    搜索：<input type="search">
    颜色：<input type="color">
    提交：<input type="submit" value="提交">
四、属性选择器
    <style>
        /* 选择input里的type属性值为text的标签，[]里可以跟任何属性 */
        input[type="text"] {
            background-color: #44d79a;
        }
        /* 选择类名以icon开头的div标签 */
        div[class^="icon"] {
            background-color: rgb(219, 81, 81);
        }
        /* 选择类名以data结尾的section标签 */
        section[class$="data"] {
            background-color: rgb(181, 70, 198);
        }
    </style>
    
    <input type="text" name="username" id="">
    <input type="password" name="password" id="">

    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>

    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>
五、结构伪类选择器
    /* 第一个 */
    ul li:first-child {
        background-color: rgb(215, 104, 104);
    }
    /* 最后一个 */
    ul li:last-child {
        background-color: rgb(205, 76, 217);
    }
    /* 第二个 */
    ul li:nth-child(2) {
        background-color: rgb(56, 196, 227);
    }
    /* 偶数个 */
    ul li:nth-child(even) {
        background-color: rgb(57, 213, 179);
    }
    /* 奇数个 */
    ul li:nth-child(odd) {
        background-color: rgb(104, 227, 38);
    }
    /* 2的倍数个 */
    ul li:nth-child(2n) {
        background-color: rgb(210, 219, 81);
    }
    /* 3及3以后的 */
    ul li:nth-child(n+3) {
        background-color: rgb(239, 113, 22);
    }
    /* 3及3以前的 */
    ul li:nth-child(-n+3) {
        background-color: rgb(233, 75, 75);
    }    
    
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
六、伪元素选择器
    div {
        width: 200px;
        height: 200px;
        background-color: rgb(235, 118, 118);
        position: relative;
    }
    /* 在div内部第一个位置添加一个伪元素，类似一个子标签 */
    div::before {
        content: '我';
        width: 30px;
        height: 30px;
        display: inline-block;
        background-color: rgb(77, 146, 211);
    }
    /* 在div内部最后一个位置添加一个伪元素，类似一个子标签 */
    div::after {
        content: '吃';
        width: 30px;
        height: 30px;
        display: inline-block;
        background-color: rgb(71, 205, 34);
        position: absolute;
        bottom: 0;
        right: 0;
    }
    必须有content属性
七、过渡效果
    /* 过渡效果，all是指全部，也可以写width等 .5s是时间  */
    transition: all .5s;
    要加在起始状态的选择器里
八、过渡效果进度条
    .box {
        width: 200px;
        height: 13px;
        margin: 50px auto;
        border: 1px solid red;
        border-radius: 7px;
        /*隐藏after溢出的角*/
        overflow: hidden;
    }
    .box::after {
        content: '';
        display: block;
        height: 100%;
        width: 20%;
        background-color: red;
        transition: width 1s;
    }
    .box:hover::after {
        width: 100%;
        height: 100%;
        background-color: red;
    }
九、2D动画
    div {
        margin: 300px auto;
        width: 200px;
        height: 200px;
        background-color: rgb(223, 111, 111);
        transition: all 2s;
        /*设置圆心*/
        transform-origin: left top;
    }
    /* 平移 */
    body:hover div {
        transform: translate(200px/*只移动X轴*/);
        transform: translate(200px,100px);
    }
    /* 放大 *//*倍数*/
    body:hover div {
        transform: scale(2);
        transform: scale(2,1/*宽,高*/);
    }
    /* 旋转 */
    div:hover {
        transform: rotate(1800deg);
    }