认识H5标签和CSS3新特性

https://developer.mozilla.org/zh-CN/docs/web/guide/HTML/HTML

HTML5新标签

语义化标签
视频标签
音频标签
input新标签及新属性

CSS3新选择器

属性选择器
结构伪类选择器

此前学习过的CSS选择器有如下：

标签选择器
类选择器
id选择器
通配符选择器
链接伪类选择器

CSS3属性

CSS3 盒子模型 border-sizing
使用后盒子大小一般情况不会被margin、padding撑开

border-sizing: border-box;

CSS3 滤镜 filter

filter: blur(5px);

使用calc();函数来计算
CSS3 过渡效果 transition（重点）
谁做过渡给谁加

    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;

            //transition: 变化的属性 花费时间 运动曲线 何时开始; 
            transition: width .5s ease 0s;

            //后面2个值可省略
            transition: width .5s;

            //如果想要写多个属性，利用逗号进行分割
            transition: width .5s, height .5s; 

            //如果想要多个属性都变化，属性写all就可以了 
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>