HTML5简介

大家都知道HTML5是新一代的HTML标准,那么HTML5到底包含哪一些东西了，这里我直接参考了MDN上的资料来简写一下

1、HTML5概述

MDN

上面主要分了8个部分来描述HTML的新特性

1、新的语义化

HTML 5 加了很多新的标签，使 HTML 更富有语义，如HTML5中的新的提纲和节段元素：
、
、
、
、
、
等等。
升级了 iframe 标签，使其更安全。
新增 MathML，允许直接嵌入数学公式

2、通信

Web Sockets ：允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
Server-sent events：允许服务器向主动客户端推送事件
WebRTC ：其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议

3、离线 & 储存

新增 AppCache
online 与 offline 事件
localStorage 和 sessionStorage
IndexedDB
File API

4、多媒体

Web 原生支持音视频播放
Camera API 可控制摄像头

5、2D/3D绘图 & 效果

Canvas 可绘制图像和文本
WebGL 可渲染 3D 影像
SVG ：一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。

6 、性能 & 集成

Web Workers 能够把 JavaScript 计算委托给后台线程
XMLHttpRequest 升级
History API 允许对浏览器历史记录进行操作
新增 conentEditable 属性
拖放 API、全屏 API、指针锁定 API
可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
requestAnimationFrame 允许控制动画渲染以获得更优性能。

2、HTML5表单

上面讲HTML5中常见的东西描述了下，更多细节可参考MND，下面重点写一下HTML5表单新增的一些特性（实际中应用频繁）。

表单相关

autofocus
placeholder
form
required
formaction, formenctype, formmethod, formtarget, - formnovalidate
novalidate

input新增type

email
url
number
range
Date Picker(Date\month\week\time\datatime)

其实具体在开发中需要，不断的熟悉是比较好的方式去记住和理解，这里只是简单的罗列一下常用的新增标签和属性

3、HTML5存储 localStorage

这里我们比较下cookie、LocalStorage 、SessionStorage 三者吧

cookie这个大家应该比较熟悉吧，就是当浏览器访问服务器后，服务器传给浏览器的一段数据；此后每次浏览器访问该服务器，都必须带上这段数据。

那么这里的cookie有什么作用了？
1、识别用户身份
用户A和B访问同一个域名的网站，服务器分别会传给两个不同的cookie，同时会做记录；这样当A\B下次访问的时候，就可以依据cookie值中带的内容来判断是A\B

2、记录历史
假设 a.com是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「 cart=A1,A2」，表示购物车里有 A1 和 A2 两样商品了。
这样一来，当用户关闭网页，过三天再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie,但是Cookie一般会设置一个到期时间。

localStorage:存储在 localStorage 里面的数据没有过期时间（expiration time）本地存储不会被发送到服务器上；空间约5M

使用方式

localStorage.getItem('xxx') //可以从存储中获取一个名为‘xxx’的数据项
localStorage.getItem('xxx',value)//创建新数据项和更新已存在的值。该方法接受两个参数
localStorage.removeItem() //接受一个参数,你想要移除的数据项的键
Storage.clear() //不接受参数，只是简单地清空域名对应的整个存储对象

sessionStorage : 与localStorage的区别在于存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。