在公司里面说h5页面一般指的就是移动端开发

    h5{
    大纲：
    新增的属性：
    placeholder
    input标签里面的东西：Calendar，date，time，email，url，search
    ContentEditable（用来描写标签里面的内容是否可以编写）
    Draggable（可拖拽）
    Hidden（是否是隐藏的）
    Context-menu（传说中的标签）
    Data-Val（自定义的属性）
    新增的标签：
    语义化标签（一群类似div的东西）
    canvas（画板，可以画出我们用dom做不出来的一些图形）
    svg（画板）
    Audio（声音播放）
    Video（视频播放；以前想在电脑上播放视频或者玩个小游戏，那个时候页面有flash，自从h5问世之后，然后flash越来越少以至于少到Adobe停止flash的研发了）

    API：定位（需要地理位置的功能）
    重力感应（陀螺仪：保持平衡，运用于飞机、导弹、手机等，可以检测到手机是平着放还是竖着放的；比如iphone有个功能是测距仪，测距仪旁边有个水平仪的一个这么个功能，你如果桌子上是平面的它就告诉你是0度，如果不是平的，就会告诉你，倾斜的角度是多少度。它是怎么判断的？就是因为手机上面有个陀螺仪这个一个装置，我们的浏览器也可以来调用这个陀螺仪上的接口，它间接的把这些接口给我们的js代码来使用，所以我们可以用h5的API接口来使用我，可以感受到平放还是立着 || 放着 || 摇晃着）；在生活中有个具体的运用，比如说微信里面的摇一摇，晃动手机的时候，是通过陀螺仪这个重力感应而知道的。重力方向一直在变。；还有赛车游戏，我们早年的手机，诺基亚只能用左右键来控制赛车转弯，后来手机先进了，可以不用按键，就可以运用晃动手机，可以进行左转或者右转
    request-animation-frame（用来动画的优化的）；例如：之前我们操作一些div，你会感觉很卡顿，在request-animation-frame中，对它做出了一些优化，你会发现h5中的动画是非常流畅的。比我们之前进行对dom操作会细腻很多。
    History（控制浏览历史记录）学了h5之后我们就可以来控制这个历史浏览记录
    LocalStorage本地存储 || SessionStorage会话存储（比如你写了一个小游戏，打地鼠，昨天获得了100分，我今天天获得了150分，然后会提示破纪录了。那么破了什么时候的记录，是昨天的记录吧，那昨天和今天之间在哪里存储着呢，页面总不能一直不关吧~我们在页面关闭之后，还是需要一些信息是需要持久存储的。存储一些最高纪录、用户信息……这个storage就是用来存储信息的。再比如：一些聊天工具，一些网页版的，然后我和朋友的聊天记录，每次聊天的时候，都要拉取一些历史聊天记录吗？如果聊天历史记录有很多的话，我需要拉取很多，是很耗费网络资源的。聊天记录他发的信息肯定是要发给我的，你发给他的信息你肯定都知道，可以都存在这个本地，形成一个聊天记录这样的话，打开聊天器，打开聊天页面的时候，很多的历史聊天记录不用再去向服务器去请求了。localStorage不管是电脑关了还是浏览器关了，信息都会保留；但是sessionstorage只要这个窗口关了，就没了）
    WebSocket（类似一种请求，我们在浏览器上用的是http协议，http协议有一个特点就是，我发一个请求，就会得到一个响应，我发一个url就会给我一个页面，发一个请求接口的地址，就会返回一个数据。WebSocket用来做通信的。比如一些聊天室，通常使用WebSocket；比如：我发给你一句话，你回复我给我一句话，是可以的。这是符合http的，那如果我没有给你发送请求，你主动给我请求，我怎么接收到呢？ 所以WebSocket就是解决这样一个问题。解决一个通信的问题。通常用于在线聊天
    FileReader（做文件读取的；在之前有很多功能，就是你选择了这个文件之后，然后给了你一个预览图，预览图是怎么做出来的？你用之前的input标签能做的出来吗？不一定。所以在FileReader中是可以做预览的）
    WebWorker（在效果上是看不出来是做什么用的。是用来做文件的异步处理的。主要功能：提升性能，提升交互体验。）
    Fetch（传说中的要代替Ajax的东西，用它地方和公司还是比较少的，兼容性不好。）

    H5中提供的API很丰富，在很大一方面能够提升页面的表现力，所以前端发展的越来越好越来越快，前端涉及面越来越广，很大一部分的原因是来自于底层基础建设越来越完善。你会看到底层的支持越来越强大 。进而前端能够做的事情也越来越多
    }

    1.in**put标签里面的属性：
    placeholder(提示信息)，都兼容
    type（Calendar类：（1）date；兼容性不好，Chrome支持（2）时间（3）星期不常用 （4）datime-local
    number：限制我们的输入；不常用chrome支持
    email：只能输入邮箱格式 仅 Chrome 和 Firefox支持
    color：颜色选择器 仅Chrome支持
    range：调节值；样式有一条线来取值。可以设置min=””; max=”” firefox，chrome 支持
    search：有提示搜索历史记录 Safari支持一点，Chrome支持
    url：Safari 支持一点。Chrome支持）
    属性——     contenteditable：true；可以用来修改；变成了input框进行编辑；没有兼容性问题；做修改表格；属性可以继承，父级如果设置了，子级也是可以的。不想修改就可以用改为false，尽量不用嵌套；
    属性——     dragable：true；可拖拽；Chrome Safari支持；Firefox不好使；a标签默认可拖拽。img标签，标签默认可拖拽；有拖拽功能就有拖拽事件；拖拽的生命周期，按—-下拖拽开始，移动—拖拽过程，松开—拖拽结束；拖拽的组成：被拖拽的物体和目标位置； 被拖拽的物体：按下物体的瞬间是不会触发事件的必须要移动一点才可以触发事件。拖拽事件：dom.ondrag移动事件；dom.ondraged:结束事件；dom.ondragstart:开始事件；通过拖拽事件可以很容易掌握物体移动的距离。
    目标元素（目标区域）和生命周期：可以接收元素。拖拽事件（四个）：dom.ondragenter不是元素图形进入就触发的，而是鼠标进入才触发的；dom.ondragover 和 ondrag很像都是不停地触发；dom.ondragleave 离开触发事件；dom.ondrop事件，所有的标签元素当拖拽结束的时候默认事件都是回到原处。ondrop触发一定在ondragover添加一个取消默认事件。事件是由行为触发的，但是一个行为不是触发一个事件；**当我们放下的瞬间出发了之后触发了ondragover（回到原处（默认事件），执行drop事件）和ondrop事件；
    A事件 —-B事件 —c事件（默认） 阻止c事件必须在B上面做事件阻止；（责任链模式）；

    了解就好——属性：我们拖拽的时候鼠标指针就变化了，有两个属性来控制鼠标指针的变化；e.dataTrandfet.effectAllowed = ‘link’ 必须在ondragstart里面设置；e.dataTransfer.dropEffect 必须在ondrap上面可以设置。