HTML5知识汇总，总有你不知道的o(≧v≦)o~~

html5知识点汇总

一、html5发展历程以及规划

html5从2006年开始立项，用于替代1999年的html4，历经12年，完成了第一个版本html5.0，并于2014年底发布。

在接下来的日子里，html5.1将于2016年面世，目的是去掉html5.0中不稳定的部分，加入少量更新。而在html5.2版本中则将会迎来部分新功能。w3c计划每年迭代产生html5下一子版本，这意味着html5在2022年才能全部完工(┬＿┬)。

以上句句属实，不是瞎说o(︶︿︶)o ，有链接有真相！！！

没错o(︶︿︶)o，看到这里，笔者也是才知道原来现在只是html5.0时代。但还是要提醒广大狼友一句：跟紧潮流！！！虽然有些功能（草案）尚未纳入html5.0，但有部分高大上功能还是值得我们去玩玩的，并且它们的浏览器支持度也不错了。

二、脑图汇总

思维导图下载地址：http://pan.baidu.com/s/1gdCqW8r#path=%2Fblog

三、知识点介绍

*因部分知识点在网上已有大量的介绍，所以就直接引用了（确实不是懒-_-!）。

a.表单

表单中新增内容有，新的类型type、属性attritube、元素element

感觉里面比较有趣的内容是：

• pattern和require，这两个属性用于简化表单检验，之前是通过jq插件实现，现在已经被纳入标准了。
• keygen，用于不对称加密，但支持力度不好。具体是采用公钥私钥的方法：当提交表单时，keygen产生一个公钥和私钥，私钥保存在本地，而公钥随着表单信息被提交到服务器。

--> 详细内容传送门(^__)

b.audio video canvas svg drag&drop 语义化标签

• audio与video标签的引入，替换了之前的object，并且可通过js API
  
  轻松实现一些播放控制逻辑。
• canvas非常强大，可以做游戏，目前虽然是支持2d，但经过一些处理后，也能应用于3d。通常与canvas一起的WebGL。
• svg用xml描述的方式来绘图（矢量图）。
• drag&drop拖拽行为
• 语义化标签：SEO，可用性

--> 不要问我：为啥又是w3school o(︶︿︶)o

--> drag&drop

--> 语义化标签

--> HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

c.地理定位

html5提供的定位API，在电脑中基于IP定位（可能会是服务提供商的位置），而在手机中则会采用GPS或基站定位。

一般配合百度地图使用（告诉你一个秘密(￣︶￣)↗，v1.3版本的不需要注册账号即可使用，但功能就少了些）。

--> 不用猜，还是w3school -_-!的资料

d.web存储

localStorage与sessionStorage，这个没啥好说的，就是用来保存数据，一般根据浏览器不同，有不同的容量限制，一般是5MB。

• localStorage存储的数据永久保存，除非被清除了缓存。
• sessionStorage存储的数据关闭浏览器后即被删除。

--> 点点点

e.应用缓存

给我最大的印象是，就算没网，也能打开之前的网站了！！！特别适用于离线应用，比如chm类型的网站o(≧v≦)o~~。

--> w3school资料

f.服务器发送事件

用于替代ajax轮询，大大减轻了服务器的压力。

--> 戳戳戳

g.webWorker

开启新的线程执行js文件，并提供信息传输的API。有效解决js单线程阻塞的问题。

--> 这真的是最后一份w3school资料了-_-!

h.草案

1. 全屏：js开启浏览器全屏显示，常用于网页游戏中；
2. 桌面通知：微信网页版中有使用，用于通知用户新消息；
3. 链接预加载：类似于预加载img，现在整个网页也可以预加载了；
4. webSocket：socket协议，特点是全双工通信，快快快！!!将在html5.1中成为标准；
5. 本地数据库：Web SQL Database已经被抛弃了o(︶︿︶)o，取而代之的是IndexDB，一种非关系型的数据库。相比localStorage的存储限制，本地数据库应该大得多；
6. Device API：最强大，也是支持度最参差不齐的部分-_-！但里面的js调用摄像头貌似支持度不错了，其他部分的还是作为了解吧，指不定哪天就被阉割了(+﹏+)~；

开启传送大法o(≧v≦)o~~，前方高能！！

--> 全屏

--> 桌面通知

--> 链接预加载

--> webSocket

--> web SQL Database（已经被抛弃的娃儿）

--> IndexDB

--> Device API

--> js调用摄像头一（注意要部署的本地服务器上测试）

--> js调用摄像头二（里面有在线演示，可下载源码）

--> 电池、震动等API

--> 其他Device API

如有错误，请指正_{>_<}

如有遗漏，请补充_{>_<}