概述

新标记

HTML 5提供了一些新的元素和属性

这些新标记更利于搜索引擎理解页面内容，同时也在一定程度上简化页面的编写。

1. 结构性标记

header 页面的头部或者文章的头部 footer 页面的尾部或者文章的尾部

section 网页中的一节

article 独立的文章内容

nav 导航

2.语义性标记

aside代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。 figure代表一个块级图像，还可以包含说明。

dialog表示几个人之间的对话

3.语义性内联元素

m或者mark表示文本被 “加上标志”，但是不一定要强调

time表示一个时间值，time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。，每个 time 元素都应该有一个 datetime 属性，其中包含更适合机器识别的时间值，适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。

meta表示指定范围内的数字值meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要求对元素内容应用任何特定的格式。但是，每个 meter 元素可以有最多 6 个属性，它们按照更适合机器识别的形式表示这个数量：

? ? ? ? ? ? value min low high max optimum 这些属性都应该包含一个十进制数字 progress表示一个正在进行的过程的状态，就像图形用户界面（GUI）应用程序中的进度条

4.内嵌的媒体

video用来嵌入任意视频格式

audio 用来嵌入音频格式

audio 和 video 元素可以包含额外的标记，用来描述音频和视频的内容

5.交互

details 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的摘要。details 元素的用途之一是提供脚注和尾注(收缩展开)

datagrid 元素提供一个网格控件。可以用它显示树、列表和表格，用户和脚本可以更新这些界面元素。与之相反，传统的表格主要用来显示静态数据。

menu 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它，但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中，menu包含 command 元素，每个 command 元素引发一个操作 菜单可以嵌套在其他菜单中，形成层次化的菜单结构。

新表单元素

1.新表单元素

tel、email、url电话号码 邮箱地址 网址 ：浏览器提供校验 search：搜索控件，可以看作是不同风格的文本输入控件。浏览器应该将搜索控件设置为特定于操作系统的搜索功能。除了纯粹美学方面的考虑，还可以在将来为搜索提供辅助技术或类似自动完成的功能提供接口和实现的可能性。search控件有点为未来预留搜索功能接口的味道

number：它创建了一个用于输入数字项的特殊输入框，在支持的浏览器中，你会看到一个文本输入框，其右侧附带了一个微调控件用于增加或减少输入数字的数值。

range：创建一个滑动控件从而允许选择一个范围内的数值，在以往这是一个复杂的、语义含糊的话题，但

现在通过HTML5非常简单，只需要定义一个range类型的输入控件就可以了：

date、time:日期 时间选择控件

color：颜色选择器

<datalist>和input的list特性

目前为止，我们通常使用<select>和<option>元素创建下拉列表供用户选择。如果我们需要的不仅仅是创建一个可供用户选择的列表，同时我们还允许用户通过输入来完成呢？这需要通过繁琐的Javascript编程来实现，但是现在，通过HTML5提供的input的list属性绑定一个datalist元素，可以轻松的实现我们想要的功能

2.表单元素的新特性 Placeholder

Web表单中一个经常使用的技巧是在文本域放置提示信息（placeholder），比如显示我们期望用户输入内容的提示信息，当文本域获得焦点时，隐藏这些信息。完成这样的功能需要借助Javascript（获得焦点时清除提示内容，失去焦点时再显示出来），现在我们可以通过简单的增加placeholder特性来完成这样的功能： Autofocus

另一个常用的功能是当页面加载完毕时让某个文本域获得焦点，在以前也必须借助于Javascript来实现，如今可以通过autofocus特性来完成：

min和max

顾名思义，这对特性允许为表单域设置最小和最大值，它们可以被用在number、range、time或date等类型的表单控件上。 step

step特性用来定义表单域微调的粒度。举个例子，你希望用户输入特定的时间值，但在点击微调箭头时希望按照30分钟的粒度进行增加或减少，我们可以使用step特性，注意在time类型的表单域上step值是按秒为单位的

3.验证支持 required 最常见的表单验证是必填项的校验，即表单中的某项必须输入内容才可以被提交，否则提示用户必须输入内容。这样的需求可以通过在input、select和textarea元素上增加required特性来完成。

type和pattern

正如前面我们看到的，通过为input指定不同的type，可以创建数字域、Email地址和url等，作为客户端验证的一部分，浏览器能检查用户输入是否匹配该类型表单域的预期模式。对于用户输入项不符合浏览器内建模式定义的，则给出提示。

JS的增强

查询选择器(querySelector)：JS中终于加入了查询选择器querySelector()和querySelectorAll()，其行为类似jQuery或者CSS选择器。 querySelector()返回第一个匹配元素，querySelectorAll()返回所有的匹配元素，两个选择器的查询规则类似，如：querySelector(“input.error”)，

querySelectorAll(“#results td”)等。

原生JSON支持：window.JSON ，提供parse()和stringify()方法，相比JS实现极大的提高了性能。

Canvas

Html5中的绘图技术

Web之前有三种绘图的方式，Adobe Flash，SVG(w3c)和VML(微软)。此次HTML5元素新添加的Canvas实际上是一个像素画布（bitmap canvas），和SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。

WHATWG的HTML5选择Canvas作为标准原因有二：

1、由于不用存储画出的每一个元素，所以性能更好。

2、和其他语言的二维绘图API类似，更容易实现。

对于不支持canvas的浏览器，会显示canvas标签中间的备选文字。注意：还有两点不足的地方，在canvas中绘制的图片不能设置备选文字（text alternatives）。

Canvas可以画直线，弧线，支持各种线条样式和使用纯色或图片填充，可以绘制文字和阴影等，API和一般语言的2D绘图API类似，

Canvas有两点需要注意：

1、可以以像素的方式读写Canvas对象；

2、可以跨站在canvas中载入图片，但是跨站载入的图片不可以以像素的方式编辑。也就是说跨站载入的图片可以显示，但是不能读取和复制。

地理位置

基于地理位置的应用越来越火，HTML5也提供了地理位置API。

获取地理位置的方式及其优缺点：

1、ip地址

书上说不准确，很多时候获取的是ISP机房的位置，但是获取非常方便，没有什么限制。但是实际上我觉得在中国，ip地址还是比较准确的，基本上上能精确到小区或大楼的标准。

2、GPS

非常准确，但是需要在户外，且需要很长时间搜索卫星。最主要的很多设备比如笔记本电脑基本都是不带GPS的，新的智能手机倒是都有。

3、WiFi基站的mac地址。（猜测是连接位置已知的公共WiFi的时候，通过Mac地址识别WiFi接入点，从而定位)

这种定位的精度还是很不错的，而且还可以在室内定位。不过由于这种位置公开的wifi比较少，此种方法的适用范围比较少。

4、 GSM或CDMA基站

通过基站定位，精度随基站密度变化，精度一般，还是只有手机能用。看来地理位置API还是手机上比较有实用性。

5、用户指定位置

地理位置获取流程：

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置，浏览器弹出询问窗口，询问用户是否共享地理位置。

3、假设用户允许，浏览器从设置查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

位置请求方式： 单次请求

navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);

回调函数updateLocation接受一个对象参数，表示当前的地理位置，它有如下属性： latitude——纬度

longitude——精度

accuracy——精确度，单位米

altitude——高度，单位米

altitudeAccuracy——高度的精确地，单位米

heading—运动的方向，相对于正北方向的角度 speed——运动的速度（假设你在地平线上运动），单位米/秒 回调函数handleLocationError接受错误对象，error.code是如下错误号。 UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内，你可以使用error.message获取错误详细信息。

PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置

POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置

TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。

第三个参数options是可选参数，属性如下：

enableHighAccuracy——指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。

timeout——指定获取地理位置的超时时间，默认不限时。单位为毫秒。

maximumAge——最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置。 参数使用的例子如下：

JavaScript Code复制内容到剪贴板

1. navigator.geolocation.getCurrentPosition(updateLocation,handleLocation

Error,

2. {timeout:10000});

重复请求

navigator.geolocation.watchPosition(updateLocation, handleLocationError); 使用 watchPosition可以持续获取地理位置，浏览器或多次调用updateLocation函数以便传递最新的位置。该函数返回一个watchID，使用navigator.geolocation.clearWatch(watchId)可以清除此次回调，使用不带参数的navigator.geolocation.clearWatch()清除说有watchPosition。

地址转换：

由于地理位置API返回的是经纬度，如果要计算两个位置之间的距离，可以使用著名的Haversine公式计算两个坐标在地平线上的距离。

跨文档消息机制

HTML5提供了跨文档消息机制（Cross Document Messaging），它提供了跨越frame、tabs或windows通信的能力。 PostMessage API

要接收消息的页面需要添加相应的事件监听器，在消息到来时你可以检测其来源来并判断是否处理。

发送消息：

发送消息给另一个页面：

1. window.postMessage(“Hello, world”, “”); 发送消息给iframe： 1. document.getElementsByTagName(“iframe”)[0].contentWindow.postMessage(“H

ello, world”, “”);

监听消息：

首先设置白名单，对接受到的消息进行过滤，只处理信任页面发送的消息。

var originWhiteList = [“”, “”, “”];

1. function checkWhiteList(origin) {

2. for (var i=0; i<originWhiteList.length; i++) {

3. if (origin === originWhiteList[i]) {

4. return true;

5. }

6. }

7. return false;

8. } 9. function messageHandler(e) { 10. if(checkWhiteList(e.origin)) {

11. processMessage(e.data);

12. } else {

13. // ignore messages from unrecognized origins 14. }

15. }

16. window.addEventListener(“message”, messageHandler, true);

XMLHttpRequest Level 2

HTML5中定义了XMLHttpRequest Level 2，它有两方面的增强：跨域通信，通信进度通知(progress events)

跨域通信：

XMLHttpRequest Level 2使用跨域资源共享Cross Origin Resource Sharing(CORS)来提供跨越多个域的通信。所有跨域的请求都有Origin消息头，它保存发起请求的域的信息。Origin被浏览器保护无法在代码中作出修改。Origin消息头和PostMessage消息事件中的origin本质上相同。Origin和传统的referer消息头不同的地方在于，referer是完整的URL，包括文档路径(path)。由于文档路径可能包含隐私信息，所以有时候为保护用户隐私，浏览器并不会发送referer消息头。但是只要可能，浏览器总是会发送Origin消息头。

CORS标准要求一个credentials的请求（a request with credentials）或非GET、POST的请求，一定要发送perflight选项给服务器，所以跨域通信可能需要支持CORS的服务器。 进度通知：

XMLHttpRequest Level2发送消息的时候除了传统的readyState之外，还提供了如下进度通知相关的事件：

loadstart、progress、abort、error、load、loadend。

WebSocket

从服务端推信息到客户端技术。

传统的HTTP都是基于请求响应模型的，客户端和服务器端无法实现实时通信。之前有一种模仿实时通信的技术，从轮循、长轮循到comet都不能彻底解决问题。WebSocket的出现改变了现状，上百倍的减少通信中无用的消息头，极大的提高了通信效率的同时也提供了非常低地的延时。

除了浏览器需要支持外也需要支持websocket的服务器。

开源jwebsocket框架提供了websocket请求的完整支持，包括服务端和客户端。 WebSocket请求和回复的消息头如下： From client to server: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 Origin: http://example.com [8-byte security key] From server to client: HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade WebSocket-Origin: http://example.com WebSocket-Location: ws://example.com/demo WebSocket-Protocol: sample

[16-byte hash response]

WebSocket的使用

巨简单无比，一段代码就可以说明：

XML/HTML Code复制内容到剪贴板

1. <!DOCTYPE html>

2. <title>WebSocket Test Page</title>

3. <script>

4. var log = function(s) {

5. if (document.readyState !== "complete") {

6. log.buffer.push(s);

7. } else {

8. document.getElementById("output").innerHTML += (s + "\n");

9. }

10. }

11. log.buffer = [];

12. url = "ws://localhost:8080/echo";

13. w = new WebSocket(url);

14. w.onopen = function() {

15. log("open");

16. w.send("thank you for accepting this WebSocket request");

17. }

18. w.onmessage = function(e) {

19. log(e.data);

20. }

21. w.onclose = function(e) {

22. log("closed");

23. }

24. window.onload = function() {

25. log(log.buffer.join("\n"));

26. document.getElementById("sendButton").onclick = function() {

27. w.send(document.getElementById("inputMessage").value);

28. }

29. }

30. </script>

31. <input type="text" id="inputMessage" value="Hello, WebSocket!"><butto

n

32. id="sendButton">Send</button>

33. <pre id="output"></pre>

HTML5 Web Worker API

Js的多线程技术。

众所周知，类似很多UI框架，浏览器中JavaScript在单线程中执行。如果UI线程的JS阻塞会造成界面无响应。Web Worker可以在单独的线程中执行JS代码，但由于浏览器的特性，WebWorker无法访问dom，只能通过特定的事件和postMessage API和主线程通信。Web Worker可以使用timer API，在一个Worker中也可以启动子Worker。WebWorder非常适合运算密集型的操作。

创建WebWorker

worker = new Worker(“echoWorker.js”);

主页面可以使用script标签异步加载javascript文件，但由于Web Worker无法访问dom，所以其内部可以使用如下方式异步加载js文件：

importScripts(“helper.js”, “anotherHelper.js”);

文件的加载按照参数指定的顺序进行。

和webWorker通信： 主程序：

1. document.getElementById(“helloButton”).onclick = function() {

2. worker.postMessage(“Here?s a message for you”);

3. } worker中： 1. worker.addEventListener(“message”, messageHandler, true);

2. function messageHandler(e) {

3. // process message from worker

4. }

错误处理：

在WebWorker中遇到未处理的异常，其error事件就会被触发。通常情况下我们应该监听WebWork的错误信息，方式如下：

1. function errorHandler(e) {

2. console.log(e.message, e);

3. }

4. worker.addEventListener(“error”, errorHandler, true);

停止WebWorker：

WebWorker不会自己停止。如果你想要回收WebWorker占用的资源，或者停止一个运行很长时间的WebWorker，可以调用如下方法：

1. worker.terminate();

被终止的WebWorker不再会响应其他事件，也不会执行任何运算。另外被终止的

WebWorker也不能重新启动，但是你可以使用相同的js文件重新建立一个WebWorker。

Webstorage应用

本地存储技术

HTML5中定义的WebStorage已经被广泛的支持。其中有两种类型的Storage API，一种是类似于Key-Value的存储形式，一种使用SQL的存储形式(SQLite)。Key-Value的存储形式

又继续细分为两种：sessionStorage和localStoreage。使用SQL的存储方式的书中为起了一个名字叫做Web Sql Database。

与cookie比较：

1. 存储大小：cookie大小限制为4kb，html5根据各个浏览器的实现不同，在5m以上

2. 存储内容不会随请求发送到服务器：cookie存储的内容会在每次请求时同时发送到服务

器，而html5的本地存储内容不会与服务器打交道

3. 在http请求中cookie是明文传送的

4. 更多丰富的操作接口：操作数据更简便

5. 独立的存储空间：每个域对应不同的存储空间，不会混淆

在以下情况中，体现了html5本地存储的优势

1. 存储空间不受太大限制

2. 数据保存在客户端

3. 保存在客户端的数据不会在每次请求的时候附带发送到服务段

4. 数据的生命周期可以跨越页面的刷新

用途：

缓存一些不经常变更的数据，比如导航，脚部申明等。

保存用户的一些个性化设置；用户的浏览历史等。

提供的本地存储包括：

SessionStorage：保存本次会话的信息

LocalStorage：长久保存在客户端（以键值对字符串的形式保存）

Websql：打破键值对保存形式，信息保存在浏览器附带的数据库中，通过js操作sql语句来访问本地数据库信息。标准不一。 Indexeddb：索引数据库。主要的概念是对象存储容器(object store)。所有这些概念都和传统SQL数据库编程很相似。最主要的区别在于，Object Store之上不能使用SQL语句这种结构化的查询语言。你用不着构建像SELECT * from USERS where ACTIVE = 'Y' 这样的查询。你要做的是通过object store 提供的方法在名为USERS的数据库上打开一个游标指针（cursor）来遍历所有记录，然后过滤掉那些不满足条件的记录，最后在剩下的记录上使用数据访问方法获取你所需要的数据。

缺陷与不足

Web Storage的缺陷主要集中在其安全性方面，具体体现在以下两点：

1. 浏览器会为每个域分配独立的存储空间，即脚本在域A中是无法访问到域B中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。测试地址

2. 存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏。也许需要像保存密码一样询问用户是在用私人电脑还是公共电脑来决定是否将数据保存在本地。

sessionStorage： 数据的存入：

1. window.sessionStorage.setItem(?myFirstKey?, ?myFirstValue?);

2. window.sessionStorage.myFirstKey = ?myFirstValue?; //两种形式等价。 数据的读取：

1. var ?myFirstValue? = window.sessionStorage.getItem(?myFirstKey?);

2. var ?myFirstValue?= window.sessionStorage.myFirstKey; //两种形式等价。 使用sessionStorage对象存入的数据在窗口或者tab关闭之前都有效，sessionStorage的作用域被限制在一个windows或者tab内。

其他属性：

length：对象中存储的键值对的数量。

key(index)：返回指定的key，多用来遍历存入的对象。Index从0开始。

getItem(key) ：返回指定key的value，如果key不存返回null。

setItem(key, value)：存入一个value。如果key已经存在，则替换这个key。注意，如果用户关闭离线存储功能或存储空间已经满时，此操作会抛出异常。

removeItem(key) ：删除指定的key。

clear()：删除所有数据。

存储限额：

标准建议的限额是每个origin 5M的限度，不过在数据达到限制时不同的浏览器的行为不同。有些浏览器提示用户分配更过的容量，有些浏览器则抛出QUOTA_EXCEEDED_ERR异常。 事件：

如果想在多个页面（或者web worker）中访问存储的数据，或者想在存储成功时执行一些操作都可以适用Sotrage API提供的事件。该事件会在同源的（same origin）每个页面的windows对象触发。

可以使用如下方法注册事件：

1. window.addEventListener(“storage”, displayStorageEvent, true); 事件参数又如下属性：

1. interface StorageEvent : Event { 2. readonly attribute DOMString key;

3. readonly attribute any oldValue;

4. readonly attribute any newValue;

5. readonly attribute DOMString url;

6. readonly attribute Storage storageArea;

7. };

key：发生改变的key。

oldValue：之前的数值。如果是新建数据，oldValue为null。如果是删除数据，newValue

值为null。

url：存储对象的origin。

storageArea：保存数值发生改变的sessionStorage或者localStorage对象的引用。 localStorage:

localStorage对象和sessionStorage对象几乎完全相同，不同的地方如下：

?

? sessionStorage在页面不关闭之前有效，localStorage持久存在 sessionStorage只有创建数据的页面可以访问，sessionStorage同源的页面都可以访问

locaStorage有点像c++中的静态成员变量。 例子：

1. // display the contents of a storage event

2. function displayStorageEvent(e) {

3. var logged = “key:” + e.key + “, newValue:” + e.newValue + “, oldValue:” +

4. e.oldValue +”, url:” + e.url + “, storageArea:” + e.storageArea;

5. alert(logged);

6. }

7. // add a storage event listener for this origin

8. window.addEventListener(“storage”, displayStorageEvent, true); Web Sql Database：

由于WebSqlDatabase限制使用sqlite的语法，firefox坚持不支持WebSqlDatabase。且已经有新的标准Indexed Database (WebSimpleDB)出台来取代这个标准。

使用JSON存储对象：

虽然标准规定任何sessionStorage和localStorage可以存储任何对象，但是有些浏览器仅允许字符串对象的存入，所有可以使用JSON将对象序列化之后在存储。

离线应用

Web应用和本地应用相比有很多优缺点，其中最大的一个缺点是，Web应用需要网络连接才能共工作。如果是在针对移动设备的Web应用，其中带宽的消耗较大，也是一个非常重要的问题。特别在我们国家，大部分人还在使用EDGE，带宽问题就更为凸显。HTML5提供了一个非常重要的特性，可以编写离线应用程序。所以理论上，我们可以有离线的Gmail，可以在没有网络连接的时候编写邮件在上线时发送；我们可以有离线的Google Doc，可以在离线的时候编辑邮件。对于手机，我们可以有HTML5版本的Google Reader，在有网络的时候下载新闻供离线时阅读。HTML5的离线特性介绍如下：

使用方法：

manifest属性:

在html标签中加入manifest属性，指明一个manifest文件。manifest文件中记录了浏览器需要缓存的文件列表。

1. <!DOCTYPE html> 2.

3. <html manifest=”application.manifest”>

4. 5. .

6.

7. .

8.

9. .

10.

11. </html>

manifest文件：

HTML5离线应用所需的minifest文件的MIME类型为text/cache-manifest，你需要在所使用的web服务器中添加如下文件和MIME类型的映射关系，对于apache需要在mime.types文件中加入如下配置：

text/cache-manifest manifest

manifest文件的语法很简单，它是一个以“CACHE MANIFEST”开头的文本文件。换行符的格式可以使CR,LF或者CRLF，但文件的内容必须是UTF-8编码的。minifest文件示例：

1. #comments begin with the hash symbol

2. CACHE MANIFEST

3. # files to cache

4. about.html

5. html5.css

6. index.html

7. happy-trails-rc.gif

8. lake-tahoe.JPG

9.

10. #do not cache signup page

11. NETWORK

12. signup.html

13.

14. FALLBACK

15. signup.html offline.html

16. /app/ajax/ default.html

CACHE MANIFEST小节下列出需要缓存的文件。FALLBACK小节允许你给出某个资源的备选地址，如上示例中，如果/app/ajax下或子文件夹下文件无法获取，浏览器就会去取default.html。NETWORK小节可以强制其下列出的文件必须从网络获取。

检测浏览器是否在线：

检测浏览器的联通状态，有一个如下简单的方法如下：

1. // When the page loads, set the status to online or offline

2. function loadDemo() {

3. if (navigator.onLine) {

4. log("Online");

5. } else {

6. log("Offline");

7. }

8. }

9.

10. // Now add event listeners to notify a change in online status

11. window.addEventListener("online", function(e) {

12. log("Online");

13. }, true);

14.

15. window.addEventListener("offline", function(e) {

16. log("Offline");

17. }, true);

此方法返回Online并不代表浏览器一定能访问你的服务器，但是如果访问Offline，则浏览器压根就不会去尝试联网。

applicationCache API

HTML5浏览器提供了一个新的对象window.applicationCache，用于和缓存交互。属性： 这个对象有一个枚举属性：window.applicationCache.status，它代表了当前缓存的状态。属性值如下：

window.applicationCache.status属性

当今大多数页面都没有指定manifest文件，对于这类页面window.applicationCache.status的值为UNCACHED。对于一个指定manifest文件的页面Idle表示所有需要缓存的文件都已经保存进缓存，并且没有需要升级的文件。OBSOLETE状态在如下情况出现：“ if there was at one point a valid cache but the manifest is now missing”。

事件：

window.applicationCache对象还有如下事件：

Onchecking，ondownloading, onupdateready, onsbsolete, oncached, onerror, onnoupdate, on progress等。

方法：

window.applicationCache对象有一个update方法，执行该方法将是浏览器更新所有缓存。

HTML5 File

在HTML 5里，从Web网页上访问本地文件系统变的十分的简单，那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象，你可以通过编程来选择它们，访问它们的信息. 这个File API包括：

◆一个FileList序列，代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。

◆一个Blob接口，它代表原始二进制数据，通过Blob对象你可以访问里面的字节数据。

◆一个File接口，它里面存有文件的只读属性信息，像文件名，文件类型，文件数据访问的地址。 ◆一个FileReader接口，它提供了读取一个文件的方法，和一个获取文件读取结果的事件模型。 ◆一个FileError接口和一个FileException对象，它们用来定义这个规范中的错误产生条件。

提供了以下事件： 事件

onabort

onerror

onload 描述 中断时触发 出错时触发 文件读取成功完成时触发

事件 onloadend onloadstart

onprogress

描述 读取完成触发，无论成功或失败 读取开始时触发 读取中

通过这些事件可以对上传的过程进行监控。

链接预取功能 HTML 5的链接预取功能(link prefetching)是一个埋在沙里的宝石，至今还很少人知道它的价值。你可能已经知道了那古老而又闻名的图片预加载功能，链接预取功能就是将此概念由图片扩展到了网页内容（不需要任何AJAX代码）。

它是这样工作的，在页面上添加一个像这样的链接：

1. <link rel="next" href="page2.html">

2.

这样，当你的机器空闲时，浏览器就会自动的在后台把page2.html下载下来。 当用户最终点击了page2.html的链接时，浏览器会从缓存里把这个页面取出来，所以这个页面的加载速度会出乎意料的快。

目前只有火狐浏览器支持这个功能。但是因为火狐目前是世界上拥有第二大用户群的浏览器，所以只要你在HTML页面了加上这样的一句代码，仍有相当大的一部分访问者能体验到这十分明显的页面加载速度的提高。你可以在许多情况下可以使用链接预取功能：

◆当你有一篇篇幅很长的文章，或在线教程，或图册等，需要分成多页显示时。

◆在你的网站首页预加载那些用户最可能访问的下一页。(可能是一个商品网站上“重点推荐”商品页面，或博客网站上最近的一篇博客)

◆搜索查询页面预加载搜索出来的前几条。

对于静态的内容你还可以使用rel标记实现预取功能：

1. <link rel="prefetch" href="/images/big.jpeg">

2.

这里还有其它一些有趣的事需要注意：

◆链接预取功能不久将会在Opera, Chrome 和 Safari 浏览器里实现，但对于Internet Explorer，你估计要等到20xx年。

◆如果这种功能被广泛的使用，它会影响你的网站日志和访问统计。请考虑这样的情况，你的一个页面预存取了好几个页面，可用户实际上没有访问到这几个页面。 你的服务器（或统计工具）并不知道这两者之间的区别。

为了分清这个，Firefox会在HTTP头信息里发送X-moz: prefetch信息，但你需要在服务器端有什么东西能识别这种信息。