HTML5和CSS3提高

一、HTML5的新特性

增加了一些新的标签，新的表单，新的表单属性，IE9+以上版本的浏览器才支持

注意：

这些语义化标准主要针对搜索引擎的

新标签可以使用多次

在IE9中需要把这些元素转化为块级元素

新增的多媒体标签

主要包含两个

1、音频：

2、视频：

1、视频

语法：

谷歌浏览器把autoplay属性给我们禁用了，IE可以用

2、音频

新增的input类型

我们验证的时候必须添加表单域form，点击提交按钮就可以验证

新增的表单属性

二、CSS的新特性

css新增选择器

1、属性选择器

根据元素特定属性来选择元素

2、结构伪类选择器

主要根据文档结构来选择元素，常用于父级选择器里面的子元素

nth-child（n）里面的n可以是数字（选择第n个子元素，从1开始）、关键字（even偶数，odd奇数）、公式（从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

nth-child会把所有的盒子都排列序号，执行的时候首先看   ：nth-child（1） 之后回去看前面div

nth-of-type 会把指定的盒子排列序号，执行时候先看 div指定的元素  之后看  ：nth-of-type（1）第几个盒子

3、伪元素选择器

帮助我们利用CSS创建新标签元素不需要HTML标签

显示隐藏遮罩案例

伪元素选择器案例

CSS盒子模型

CSS3可以通过box-sizing 来指定盒模型，有两个值：即可指定为content-box、border-box，这样计算盒子大小的方式就发生改变

1、box-sizing： content-box 盒子大小为width +padding +border （以前默认的）

2、box-sizing： border-box 盒子大小为width

如果盒子模型我们改为了box-sizing： border-box，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）

CSS3的其他特性

1、图片变模糊

CSS3滤镜filter:

filter css 属性将模糊或颜色偏移等图形效果应用于元素

filter： 函数（）；   例如： filter： blur（5px）；模糊处理  数值越大越模糊

2、计算盒子宽度 width：calc函数

width： calc（100%-80px）；括号里面可以使用加减乘除计算

CSS3过渡 transition

过渡是CSS3中具有颠覆性的特征之一，

过渡动画：从一个状态 渐渐地过渡到另一个状态

我们现在经常和 ：hover 一起搭配使用

过渡使用口诀：谁做过渡给谁加

如果想要写多个属性利用逗号进行分割

三、广义的HTML5

广义的HTML5是HTML5+CSS3+JavaScript