1.新的文档类型
HTML5简化了文档类型的声明方式。
<!DOCTYPE html>
之前的文档类型的声明方式非常复杂
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
2.脚本和链接无需type
在网页中添加css或者JavaScript
HTML5中，不需要指定type属性：
< link rel="stylesheet" href="stylesheet.css" />
< script src="script.js"></script>
在XHTML或者HTML4中：
< link rel="stylesheet" href="stylesheet.css" type="text/css" />
< script type="text/javascript" src="script.js"></script>
3.新增语义化标签
<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>等。
4.占位符（Placeholder）
placeholder解决了之前需要通过js来给文本添加占位符（input的placeholder属性）
5.Audio和Video支持
新增了<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){
//支持离线应用
}
<html manifest="cache.manifest">
9.设备访问
HTML5中新增的特性中，允许通过页面来访问硬件设备，例如：摄像头、地理位置、检测方向、触控事件。
地理位置：提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问，其有三个方法：
getCurrentPosition()
// 对位置变化事件进行监听
watchPosition()
clearWatch
网友评论