一、新增事件
文件拖拽：
ondragover： 拖在上面
ondragenter： 拖进去
ondragleave： 拖出来
ondrop： 鼠标释放（如果想让ondrop事件触发就必须要先阻止ondragover的默认行为）
获取文件信息：
oEle.ondrop = function(ev){
ev.dataTransfer.files 所有的文件列表
var oFile = ev.dataTransfer.files[0]; 获取文件列表中的第一个文件
}
文件信息：
oFile.name 文件的名字
oFiles.size 文件的大小
oFiles.type 文件类型
电脑识别的文件类型是MIME-type
而不是：text/plain image/gif、jpeg、png video/avi mp4
文件内容：
借助文件读取对象：
var reader = new FileReader();
reader.readAsText(oFile); 通过文本读取，只能读取文本内容
reader.readAsDataURL(oFile); 通过Base64读取，一般来读取小的logo，icon图片，大的图片视频的数据太多
进度更改事件：
reader.onprogress = function(ev){
ev.loaded 已经加载的
ev.total 总数
}
toFixed(2); 显示几位小数，2就是2位小数
二、视频音频
视频video：
视频格式：mp4，ogg，avi，webb 其中的mp4格式各种浏览器都兼容
属性：
controls 控制台
autoplay 自动播放
loop 环路播放、循环播放
自定义video的方法：
play() 播放
pause() 暂停
自定义video的属性：
currentTime 当前播放时间
音频audio：
音频格式：mp3，ogg 其中的mp3格式各种浏览器都兼容
三、新增其他骚操作
选择器
document.querySelectorAll()[0];
document.querySelector();
自定义属性
data-自定义属性（W3C里面规定了data-永远不会被用为官方属性）
获取属性：oEle.dataset.自定义的属性
class操作
oEle.classList（里面新增了许多新的方法，常用的如下：）
.length 长度
.value 所有class
.add() 添加class
.remove() 删除class
.contains() 包含
.toggle() 切换
四、CSS3
1.浏览器前缀：
-webkit- Chrome/Safari/opear/firefox(49+)
-moz- Firefox
-ms- IE
-o- Opear(old)
不加前缀 W3C要求
2.新属性：
⑴border-radius(圆角)：
border-radius: 左上右下,右上左下;
border-radius: 左上,右上左下,右下;
border-radius: 左上,右上,右下,左下;
⑵box-shadow(盒子阴影)：
box-shadow：x偏移 y偏移 阴影范围 颜色;
box-shadow：x偏移 y偏移 阴影范围 颜色;
box-shadow：[inset(可加可不加)] x偏移 y偏移 阴影范围 颜色;
inset：内阴影
可以加多个阴影：
box-shadow: x y opacity color, x y opacity color...;
⑶text-shadow(文字阴影)：同上
⑷transition(运动)：
duration：运动的时间 1s
style-type：过渡效果 all
timing-function：运动类型 linear匀速运动
贝塞尔曲线：cubic-bezier(x1,y1,x2,y2)在百度上搜索点第一个进去就可以测试各种0到1的曲线
delay：延时(必须写在duration的后面) 1s
简写：transition:1s all ease 1s;
***运动结束事件（transitionend）：
运动结束后触发该事件，但添加必须用来事件监听来添加（addEventListener）
⑸transform(变形)：
注意点：
1.执行有先后顺序（后面的先执行）
2.行元素不能进行操作（需要块级化）
a).translate(x,y) 平移(x,y轴)
translateZ() Z轴平移
想要用translateZ:
1.父级必须变成3D：-webkit-transform-style:preserve-3d;
2.父级必须透视：
(1)如果父级有旋转效果之类的：-webkit-transform:perspective(透视值) rotateX/Y();
(2)如果父级什么效果都没有：perspective: 透视值;
b).rotate(deg)默认z轴 旋转
rotateX(); 延X轴旋转
rotateY(); 延Y轴旋转
c).scale(x的倍数,y的倍数) 缩放
d).skew(xdeg,ydeg) 拉伸、扭曲(不常用)
⑹transform-origin(x,y)设置原心位置
⑺gradient(渐变)
线性渐变
linear-gradient(颜色1,颜色2);可以多个颜色
改变方向渐变：linear-gradient(方向,颜色1,颜色2);
范围渐变：linear-gradient(color1 start, color1 end, color2 start, color2 end, color3 start, color3 end...);
跳变（平铺）：repeating-linear-gradient(color1 start, color1 end, color2 start, color2 end...);
径向渐变
radial-gradient(颜色1,颜色2);
⑻background-size(背景)，改变背景的大小
⑼background-clip(文本切片)（给文字设置随意不同的颜色）
1.给元素设置背景渐变
2.设置文本切片(必须加在背景下面)：-webkit-background-clip: text;
3.文字颜色透明
⑽perspective(透视)（方便看3D效果）
transform：perspective(透视值);
透视值：推荐800-1200 值越小看着越明显
⑾animation(高级动画)
定义一个动画：
@keyframes name{
from{}
to{}
}
调用一个动画：
animation: name duration ...;
名字：
-webkit-animation-name: toBig;
运动时长：
-webkit-animation-duration: 1s;
运动类型：
-webkit-animation-timing-function: ease;
迭代次数： infinite 无限
-webkit-animation-iteration-count: infinite;
方向： alternate
-webkit-animation-direction: alternate;
播放状态：
-webkit-animation-play-state: paused|running;
延迟：
-webkit-animation-delay:;
停在那：
-webkit-animation-fill-mode: forwards;
五、Canvas(画布)
定义：是一个用来绘制图形的容器
用法：它本身是没有绘制图形的能力的，只不过需要借助getContext()方法来获取canvas对象，来获取绘图的上下文(这里的上下文可以理解为画笔和纸):
var gd = oEle.getContext('2d');
每次在重新再一个画布上绘制图形的开始之前先写上：
gd.beginPath(); //重新开始路径
初始位置：
gd.moveTo(x,y); //所有x y的值都没有单位
目标位置：
gd.lineTo(x,y);
设置线宽：
gd.lineWidth = 10; //宽度的数字 没有单位
描边颜色：
gd.strokeStyle = 'color';
描边：
gd.stroke();
填充颜色：
gd.fillStyle = 'color';
填充：
gd.fill();
闭合路径：
gd.closePath(); //画图的时候用来执行最后一步，回到起点
现有图形简写：
rect 矩形
a) gd.rect(x,y,width,height); 或 gd.stroke(); 或 gd.fill();
b) gd.strokeRect(x,y,width,height); 或 gd.fillRect(x,y,width,height);
清屏：
gd.clearRect(x,y,width,height); //执行顺序 清屏=>改变值=>重新画另一个
做动画的计时器的帧频(1s内绘制图形的个数，个数越多越清楚，开过多的话计时器会影响性能)一般分为两种：
高帧频：16ms
低帧频：30ms
