HTML5的新特性

1.新的文档类型

HTML5简化了文档类型的声明方式。

之前的文档类型的声明方式非常复杂

2.脚本和链接无需type

在网页中添加css或者JavaScript
HTML5中，不需要指定type属性：

< link rel="stylesheet" href="stylesheet.css" />
< script src="script.js">

在XHTML或者HTML4中：

< link rel="stylesheet" href="stylesheet.css" type="text/css" />
< script type="text/javascript" src="script.js">

3.新增语义化标签

、

、

、

、

,

、

、、等。

4.占位符（Placeholder）

placeholder解决了之前需要通过js来给文本添加占位符（input的placeholder属性）

5.Audio和Video支持

新增了

6.canvas

新增canvas,实际是一个画布，可使用js来绘制图形。例如：画图、合成照片、甚至是视频的渲染处理。

7.离线和存储

HTML5提供了localStorage和sessionStorage和indexedDB加强本地存储。使用之前应先判断支持情况：

 if(window.sessionStorage){
       //浏览器支持sessionStorage
   }
   if(window.localStorage){
       //浏览器支持localStorage
   }

localStorage：在各个浏览器中存储上限不同，(>=2.6MB)
sessionStorage：基于会话，关闭浏览器之后存储消失。
indexedDB:上限是250MB，是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API
localStorage和sessionStorage没有过期时间，可以在其上添加过期时间。
localStorage和sessionStorage的坑是跨域问题，因为它们是域内安全，也就是同一个域才能对其进行存储数据，通过postMessage来解决。以下是它的常用应用场景

var userData = {
        name : 'sysuzhyupeng',
        age: 24
    }
    localStorage.setItem('userDate', JSON.stringify(userData));
    var newUserData = JSON.parse(localStorage.getItem('userData')); 
// 通过storage事件来监听存储：
 window.addEventListener('storage', showStorageEvent, true)

8.离线web应用

页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用

if(window.applicationCache){
        //支持离线应用
    }
    

9.设备访问

HTML5中新增的特性中，允许通过页面来访问硬件设备，例如：摄像头、地理位置、检测方向、触控事件。
地理位置：提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问，其有三个方法：

    getCurrentPosition()
//  对位置变化事件进行监听
    watchPosition()
    clearWatch