Html5+Css3新特性解读

HTML5新特性

Html5新增语义化标签

布局常用div来做，我们常用的div是没有语义的。为此新添入了语义化的标签。
(1)这种语义化标签针对搜索引擎，可以使用多次。
（2）在IE9中，需要把这些元素转换为块级元素。
（3）移动端更加喜欢这种标签。

音频标签

尽量选择MP3格式
语法：

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

视频标签

尽量选择MP4文件

语法：

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

常见属性：

input类型

表单类型

修改placeholder中的颜色：

input::placeholder{
  color:pink;
  }

Css3新特性

属性选择器

//必须是input并且具有value的属性值
input[value]{
  color:pink;
  }

优点：（1）不借助与类或者id选择器
（2）选择某些“属性=值”的元素，或者以某些属性值开头的元素或者以某些属性值结尾的元素
（3）类选择器，伪类选择器，属性选择器的权重都是10

结构伪类选择器

根据文档结构选择，根据父级选择子元素。

//选择ul中的第一个li

ul li:first-child{
  color:pink;
  }

//选择ul中所有偶数li
ul li:nth-child{even){
  color:pink;
  }

//选择ul中从第5个li到最后
ul li:nth-child(n+5){
  color:pink;
  }

//选择ul前五个
ul li:nth-child(-n+5){
  color:pink;
  }

note:
(1)表达式里面必须是n，不能是其他字母
(2)必须写成-n+5，不能写成5-n
(3)区别：
1）nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
2）nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E找第n个孩子

伪元素选择器

利用CSS创建新标签元素而不需要html标签，从而优化html结构。

（1）before和after创建一个元素，但是属于行内元素
（2）新创建的这个元素在文档中找不到，所以称为伪元素
（3）语法：element::before()
(4）before和after必须有content属性
（5）before在父元素的里面的前面创建元素，after在父元素的内容后面创建元素
（6）伪元素选择器和标签选择器的权重都是1
使用场景：
（1）伪元素字体图标（2）仿土豆效果
（3）伪元素清除浮动

盒子模型

CSS3可以通过box-sizing指定盒子类型，有俩个值：content-box,border-box.因此可以分为俩种情况：
（1）content-box:盒子大小是width+padding+border(默认）
（2）border-box:盒子大小是width

note:如果盒子模型改成了border-box，那么padding和border就不会再撑大盒子（前提是padding和border不会超过width宽度）

图片模糊

CSS3的滤镜filter可以把模糊或者颜色偏移等图形效果应用于元素。

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

calc计算函数

在声明css属性的时候执行一些计算，可以使用±*/

CSS过渡

过渡是指不使用js或者flash动画的前提下，当元素从一种样式变化为另外一种样式的时候为元素添加效果。
（1）过渡动画：从一个状态过渡到另外一个状态
（2）效果：让页面好看且有动感，并且不会影响页面布局
（3）我们现在经常和：hover一起搭配使用

transition:要过渡的属性 花费时间 运动曲线 何时开始

（4）简介属性特性：
属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性变化过渡，写一个all即可。
花费时间：单位是s(必须写单位）
运动曲线：默认是ease(可省略）

何时开始：单位是秒（必写单位），可以设置延迟出发时间，默认是0s
（5）实际使用
谁做过渡给谁加

div {
  width:200px;
  hight:100px;
  transition:width .5s ease 1s;
  }
div:hover {
   width:400px;
   }

如果有多个属性，利用,进行分割

transition:width .5s,height .5s;