在浏览器诞生后的很长时间里，html规范都不统一，混乱，功能不全。

为解决这些问题，在2012年诞生了HTML5。HTML5即一系列新技术的总称。

HTML5的标准明细

类别	具体规范
离线	Application cache, LocalStorage, IndexedDB, 在线/离线事件
存储	Application cache, LocalStorage, IndexDB 等
连接	Web Sockets、Server-sent事件
文件访问	File Api, File System, File Writter, Progress Events
语义	各种新的元素，包括Media,structural,国际化,Link relation,属性，form类型等
音频和视频	HTML5 Video,WEB Audio, WebRTC, Video track等
3D和图形	Canvas2D, 3D CSS变换，WebGL, SVG等
展示	css 2D/3D变换，转换(transition),WebFonts等
性能	Web Worker, Http caching等
其他	鼠标和键盘事件，Shadow Dom, Css masking等

离线

Application Cache

可以通过给HTML增加 Cache Manifest 进行缓存

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容......
</body>
</html>

manifest 文件的建议的文件扩展名是：".appcache"。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整的manifest 文件示例

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

Local Storage

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的
localStorage 常用的api: getItem、setItem、clear、removeItem。

IndexedDB

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。

这里设计的一些概念和操作

数据库：IDBDatabase 对象
对象仓库：IDBObjectStore 对象
索引： IDBIndex 对象
事务： IDBTransaction 对象
操作请求：IDBRequest 对象
指针： IDBCursor 对象
主键集合：IDBKeyRange 对象

打开数据库

var request = window.indexedDB.open(databaseName, version);

request.onerror = function (event) {
  console.log('数据库打开报错');
};

var db;
request.onsuccess = function (event) {
  db = request.result;
  console.log('数据库打开成功');
};

新建数据库

request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore('person', { keyPath: 'id' });
}

判断这张表是否存在，如果不存在就创建新表，并创建字段。

request.onupgradeneeded = function (event) {
  db = event.target.result;
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}

更详细的请参考阮一峰的网络日志。 # 浏览器数据库 IndexedDB 入门教程

在线/离线事件

online，offline 事件用来监测浏览器处于在线或离线状态

window.addEventListener('online', (e) => {
    console.log(e)
})

// Event {isTrusted: true, type: 'online', target: Window, currentTarget: Window, eventPhase: 2, …}

连接

Web Sockets

WebSocket可以代替以前的 HTTP轮询，实现客户端和服务器的通话。


 // 创建一个socket连接
 var ws = new WebSocket("ws://localhost:9998/echo");
 

 ws.onopen = function() {
      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.send("发送数据");
      alert("数据发送中...");
  };
  
  ws.message = function(evt) {
      console.log(evt.data);
  }
  
  ws.onclose = function() {
      console.log('连接关闭');
  }

Server-Sent 事件

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) { 
    document.getElementById("result").innerHTML+=event.data + "<br>"; }

老生常谈的HTML5包含那些东西？