HTML5以及CSS3新增特性

HTML5以及CSS3新增特性

HTML5

1.语义化标签：

2.多媒体标签：
视频标签：<video>
语法格式如下：

<video src="文件地址"  controls=“controls”></video>

由于有些低版本浏览器对某些视频格式不支持，这时我们可以采用以下做法来进行兼容。有下面的代码，浏览器在不支持ogg格式的视频，就会采用MP4格式的视频了。

视频标签常用属性：

音频标签：<audio>
语法格式如下：

<audio src="文件地址"  controls=“controls”></audio>

同视频标签，音频标签同样也有对兼容性的处理：

音频标签常见属性：

3.新增input类型：
需要在input标签中使用type属性进行调用。

4.新增表单属性：

我们可以通过以下格式去改变placeholder属性里面的文本样式：

 input : : placeholder {
     color：red
     }

CSS3

1.属性选择器：
属性选择器可以根据元素特定属性来选择元素。这样就可以不用于借助类或者id选择器。
在我们的style标签中这样对标签样式进行设置，注意中括号不能忘记。

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

关键字设置：其中nth-child(odd/even)表示选择奇数/偶数行进行样式的设置。
公式法设置：同时，nth-child()，其小括号中还是可以根据公式来选择不同的公式来设置选取子元素。例如：n就是选择所有子元素，2n是选择偶数位的子元素，2n+1表示选择奇数 ，以此类推。其中，括号中必须是n来表示未知量，并且n是从0开始进行计算的。

nth-child与nth-type的使用效果类似，但是执行的起来却有所区别，解释如下：


例如上面的例子：
如果我们在样式设置中进行的是nth-child的方法设置的，那么section中的子元素没有一个会改变颜色。这是因为nth-child都是先把所有元素排列好，然后匹配第1个子元素再去寻找标签（如div），然后会发现p与div匹配不上，这时就不会进行样式更改。
如果我们使用的是nth-of-type来设置的，子元素中的熊大一行就会改变样式，这时因为nth-of-type是先匹配元素类型，对指定的标签中的子元素进行排序，再匹配第1个子元素的，所以就会进行样式的更改。

3.伪元素选择器：
伪元素可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

注意：
1.before和after会创建一个元素，但是属于行内元素。
2.新创建的这个元素我们在文档中是找不到的，所以我们称之为伪元素。
3.语法格式：标签名::before{}
4.before和after必须有content属性。content表示创建元素里面的内容。
5.before在父元素内容的前面创建元素，after在父元素内容的后面创建元素。

4.盒子模型：
CSS3中我们可以通过box-sizing来指定盒模型，有两个值：即是content-box和border-box。

也就是说，在padding以及border不超过width的前提下：
content-box是原来指定内容的大小不变，但是添加了padding和border会撑大盒子。
border-box是原来指定内容的大小会根据添加的padding以及border的值来缩小，而原来设置的盒子大小不变。

5.其他特性：
1.CSS3滤镜filter：
filter属性会将模糊或颜色偏移等图形效果应用于元素。
语法格式如下：

filter：函数();    /*blur模糊处理，数值越大越模糊*/

2.CSS3 calc函数：
该函数可以让你在声明CSS属性值时执行一些计算。
如：子盒子需要根据父盒子来设置宽度，就可以使用：

width：calc(100% - 30px)

3.CSS 过渡(重点 实用)：

在我们进行网页设计的时候，经常会使用到一些动态的特效，使用transition属性进行设置。需要改变的属性一般放在hover中，因此transition常与hover一起使用，transition是谁在过渡就给谁加。

语法格式如下：

运动曲线类别：