HTML5新特性
1、布局标签
<header>、<nav>、<article>、<section>、<aside>、<footer>
语义化标签主要是针对搜索引擎的；
IE9中，需要把这些元素转换为块级元素
2、多媒体标签
（1）<audio src="文件地址"></audio>
- 属性：autoplay、controls
- 兼容解决：
<video width="320" height="240" controls> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp3" type="video/mpeg"> 您的浏览器不支持video标签 </video>
（2）<video src="文件地址"></video>
属性：autoplay、muted(静音)、controls(播放控件)、loop(循环)、preload(预加载)、poster(加载等待的画面图片)
兼容解决：
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持video标签 </video>
谷歌把音视频的自动播放给禁用了
3、新增表单
（1）新增类型
email、url、date、time、month、week、number、tel、search、color
（2）新增属性
required、placeholder、autofocus、autocomplete(默认开启输入历史)、multiple
（3）修改placeholder里面的字体颜色
input::placeholder {
color: #ccc;
}
CSS3新特性
1、新增选择器
（1）属性选择器
| E[att] | 选择具有att属性的E元素 |
|---|---|
| E[att=val] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=val] | 匹配具有att属性且值以val开头的E元素 |
| E[att$=val] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*=val] | 匹配具有att属性且值中含有val的E元素 |
（2）结构伪类选择器
| E:first-child | 匹配父元素的第一个字元素E |
|---|---|
| E:last-child | 匹配父元素的最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E(多种元素类型) |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
E:nth-child(n)
- n可以是数字，关键字，公式
- n如果是数字，就是选择第n个元素，n从1开始
- n可以是关键字：even偶数，odd奇数
- n可以是公式：只能是n(如果n是公式的话，则从0开始计算，第0个或者超出元素个数的会被忽略，即选中所有符合条件的标签)
- 常用公式：2n、2n+1、5n、n+5(从第5个开始)、-n+5(前5个，包含第5个)
（3）伪元素选择器（利用CSS创建新标签元素，不需要HTML标签）
| E::before | 在元素E内部的前面插入内容 |
|---|---|
| E::after | 在元素E内部的后面插入内容 |
会创建元素，但是文档树中找不到；必须具有content属性；权重为1
-
使用场景：
配合字体图标做表单的下拉三角
视频播放的遮罩层
清除浮动
/* 1.额外标签法（在浮动元素的最后添加一个块级盒子，添加clear:both;）*/ /* 2.父级添加overflow属性 */ /* 3.父级添加after伪元素 */ .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } /* 4.父级添加双伪元素 */ .clearfix:after, .clearfix:before { content: ""; display: table; /* 在一行显示 */ } .clearfix:after { clear: both; }
2、盒子模型
box-sizing: border-box(padding和border不会撑大盒子)|content-box(默认);
3、图片变模糊——CSS滤镜
filter: blur(5px) /* blur越大，图片越模糊 */
4、calc()函数
width: calc(100% - 30px) /* 比父盒子小30像素 */
5、过渡
{
transition: 过渡的属性 花费时间 运动曲线 何时开始; /* 后面2个可省略 */
/* 改变多个属性用,分割 */
transition: 属性1 时间1, 属性2 时间2;
/* 每个属性都过渡 */
transition: all 事件;
}
谁做过渡给谁加
6、2D转换(坐标：x朝右，y朝下)
- translate(移动)：不会影响其它盒子；百分比是相对于自身的；对行内标签没有效果
{
transform: translate(x, y)
transform: translateX(x)
transform: translateY(y)
}
- rotate(旋转)：顺时针或逆时针
{
/* transform: rotate(度数) */
transform: rotate(45deg) /* 顺时针旋转45度 */
}
-
transform-origin：设置元素转换的中心点
{
/* x y默认转换的中心点是元素的中心点（50% 50%） */
transform-origin: x y;
/* 还可以给x y设置像素或者方位名词（top bottom left right center） */
transform-origin: left bottom; /* 左下角 */
transform-origin: 50px 50px;
}
- scale(缩放)：
transform: scale(x, y)
{
transform: scale(1, 1) /* 宽高都放大1倍，没有放大 */
transform: scale(2, 2) /* 宽高都放大了2倍 */
transform: scale(2) /* x:2——y:2 */
transform: scale(0.5, 0.5) /* 缩小 */
/* scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其它盒子 */
}
- 综合写法
{
/*
transform: translate() rotate() scale()...
顺序会影响转换的效果（先旋转会改变坐标方向）
同时有位移和其它属性时，位移放在最前面
*/
}
7、CSS3动画（先定义再使用）
（1）先用@keyframes定义动画（类似定义类选择器）
/* 0%/100%即动画序列，设置时可以使用百分比，也可以使用from/to，等同于百分比 */
@keyframes 动画名称 {
0% {
/* 初始样式 */
}
……
100% {
/* 完结样式 */
}
}
（2）再在要使用的元素的样式中进行调用
{
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间
}
（3）CSS3动画的常见属性
{
/* 规定动画 */
@keyframes
/* 动画名称 */
animation-name
/* 动画总时长 */
animation-duration
/* 规定动画运动曲线（默认-ease 匀速-linear） */
animation-timing-function
/* 延时 */
animation-delay
/* 重复次数 infinite 无限次 */
animation-iteration-count
/* 是否逆向播放（默认-normal 反向-alternate） */
animation-direction
/* 规定动画是否正在运行或暂停（默认-running 暂停-paused） */
animation-play-state
/* 结束返回起始状态（默认返回-backwards 停止结束状态-forwards） */
animation-fill-mode
/* 简写（前两个属性必填） */
animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 是否反方向 起始结束状态;
}
（4）animation-timing-function速度曲线
{
linear 匀速
ease 低速开始，加快，结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps(n) 制定了时间函数中的间隔数量（步长）
}
8、3D转换（x-向右 y-向下 z-向外）
（1）3D移动：translate3d（3d中的x，y，z都不能省略）
{
transform: translateX(x)
transform: translateY(y)
transform: translateZ(z) /* z一般用px单位 */
trsnaform: translate3d(x, y, z)
}
（2）perspective透视/视距（单位是像素）
透视写在被观察元素的父元素上 perspective: 100px;
（3）3D旋转：rotate3d——左手准则（x, y, y表示的是矢量）
{
transform: rotateX(deg)
transform: rotateY(deg)
transform: rotateZ(deg)
trsnaform: rotate3d(x, y, z, deg)
}
（4）3D呈现：transform-style
{
/* (默认)父元素设置控制字子元素是否开启3d空间 */
transform-style: flat;
/* 父元素设置子元素开启3d空间 */
transform-style: preserve-3d;
}
9、旋转木马案例（先旋转后移动）
（1）先将面前的一个在z轴上移动
（2）找到右边第二个盒子，旋转60度，向前移动
（3）依次设置位置，开启3d
（4）设置动画旋转
10、浏览器私有前缀（兼容老版本写法）
（1）私有前缀
-moz-：代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表safari、chrome私有属性
-o-：代表Opera私有属性
（2）案例：
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
