一、新增事件

文件拖拽：
    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