簡介php
HTML5是HTML第五次重大修改 HTML5的8個特性： 1. 語義特性 2. 本地存儲特性（indexedDB是HTML5本地存儲最重要的技術之一） 3. 設備兼容特性 4. 鏈接特性（Server-Send Event和Websockets這兩個特性能幫助咱們實現服務器將數據推送到客戶端的功能） 5. 網頁多媒體特性 6. 三維，圖形及特效特性（基於SVG，Canvas，WebGL及CSS3的3D功能） 7. 性能與集成特性（經過XMLHttpRequest2等技術幫助web應用和網站在多樣化的環境中更快速的工做） 8. CSS3特性 w3c文檔：https://www.w3school.com.cn/html5/html5_reference.asp mdn文檔：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5
HTML5和HTML4的區別html
1. 簡化的語法 2. canvas替代flash 3. 新的header和footer標記 4. 新的section和article標記 5. 新的menu和figure標記 6. 新的audio和video標記 7. 全新的表單設計 8. 再也不使用b和font標記 9. 再也不使用frame，center，big標記等
判斷瀏覽器是否可使用HTML5html5
HTML5---標籤python
1. <article> ：規定獨立的自包含內容。
一篇文章應有其自身的意義，應該有可能獨立於站點的其他部分對其進行分發。
<article> 元素的潛在來源：
論壇帖子
報紙文章
博客條目
用戶評論
2. <aside> ：定義其所處內容以外的內容。
aside 的內容應該與附近的內容相關。
3. <audio> ：定義聲音，好比音樂或其餘音頻流。
4. <bdi> ：容許您設置一段文本，使其脫離其父元素的文本方向設置。
屬性：dir（可選。規定 <bdi> 元素內的文本的文本方向。默認值：auto）
屬性值：ltr，rtl，auto
（目前只有 Firefox 和 Chrome 支持）
5. <canvas> ：定義圖形，好比圖表和其餘圖像。
<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。
屬性：
height：設置 canvas 的高度。
width：設置 canvas 的寬度。
6. <datalist> ：定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。
請使用 input 元素的 list 屬性來綁定 datalist。
7. <dialog> 標籤訂義對話框或窗口。
屬性：open（規定 dialog 元素是活動的，用戶可與之交互。）
屬性值：open
（目前只有 Chrome 和 Safari 6 支持）
8. <embed> ：定義嵌入的內容，好比插件。
屬性：
height：設置嵌入內容的高度。
src：嵌入內容的 URL。
type：定義嵌入內容的類型。
width：設置嵌入內容的寬度。
9. <figcaption> ：定義figure元素的標題（caption）。
"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。
10. <figure> ：規定獨立的流內容（圖像、圖表、照片、代碼等等）。
figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。
11. <footer> ：定義文檔或節的頁腳。
<footer> 元素應當含有其包含元素的信息。
頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等等。
您能夠在一個文檔中使用多個 <footer> 元素。
12. <header> ：定義文檔的頁眉（介紹信息）。
13. <keygen> ：規定用於表單的密鑰對生成器字段。
當提交表單時，私鑰存儲在本地，公鑰發送到服務器。
屬性：
autofocus：使 keygen 字段在頁面加載時得到焦點。
challenge：若是使用，則將 keygen 的值設置爲在提交時詢問。
disabled：禁用 keytag 字段。
form：定義該 keygen 字段所屬的一個或多個表單。
keytype：定義 keytype。rsa 生成 RSA 密鑰。
name：定義 keygen 元素的惟一名稱。用於在提交表單時蒐集字段的值。
（Firefox, Chrome, Opera 以及 Safari 6 支持）
14. <mark>：定義帶有記號的文本。請在須要突出顯示文本時使用 <m> 標籤。
15. <meter> ：標籤訂義已知範圍或分數值內的標量測量。也被稱爲 gauge（尺度）。
例子：磁盤用量、查詢結果的相關性，等等。
<meter> 標籤不該用於指示進度（在進度條中）。若是標記進度條，請使用 <progress> 標籤。
（Firefox, Chrome, Opera 以及 Safari 6 支持 ）
16. <nav> ：定義導航連接的部分。
17. <output> ：定義不一樣類型的輸出，好比腳本的輸出。
屬性：
for：定義輸出域相關的一個或多個元素。
form：定義輸入字段所屬的一個或多個表單。
name：定義對象的惟一名稱。（表單提交時使用）
18. <progress> ：標示任務的進度（進程）。
請結合 <progress> 標籤與 JavaScript 一同使用，來顯示任務的進度。
<progress> 標籤不適合用來表示度量衡（例如，磁盤空間使用狀況或查詢結果）。如需表示度量衡，請使用 <meter> 標籤代替。
屬性：
max：規定任務一共須要多少工做。
value：規定已經完成多少任務。
19. <rp> : ruby 註釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。
ruby 註釋是中文註音或字符。
20. <rt> ：定義字符（中文註音或字符）的解釋或發音。
ruby 註釋是中文註音或字符。
21. <ruby> ：定義ruby的中文註釋（註音或字符）。
22. <section> ：定義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。
屬性：
cite：ection 的 URL，假如 section 摘自 web 的話。
23. <source> ：爲媒介元素（好比 <video> 和 <audio>）定義媒介資源。
<source> 標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
屬性：
media：規定媒體資源的類型。
src：規定媒體文件的 URL。
type：規定媒體資源的 MIME 類型。
24. <summary> ：包含 details 元素的標題，"details" 元素用於描述有關文檔或文檔片斷的詳細信息。
與 <details> 標籤一塊兒使用。標題是可見的，當用戶點擊標題時會顯示出詳細信息。
"summary" 元素應該是 "details" 元素的第一個子元素。
25. <time> ：定義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的。
屬性：
datetime：規定日期 / 時間。不然，由元素的內容給定日期 / 時間。
pubdate：指示 <time> 元素中的日期 / 時間是文檔（或 <article> 元素）的發佈日期。
26. <track> ：爲諸如 video 元素之類的媒介規定外部文本軌道。
用於規定字幕文件或其餘包含文本的文件，當媒介播放時，這些文件是可見的。
屬性：
default：規定該軌道是默認的，假如沒有選擇任何軌道。
kind：表示軌道屬於什麼文本類型。（取值：captions，chapters，descriptions，metadata，subtitles）
label：軌道的標籤或標題。
src：軌道的 URL。
srclang：軌道的語言，若 kind 屬性值是 "subtitles"，則該屬性必需的。
（Internet Explorer 10, Chrome 以及 Opera 支持）
27. <video> ：定義視頻，好比電影片斷或其餘視頻流。
屬性：
autoplay：若是出現該屬性，則視頻在就緒後立刻播放。
controls：若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
height：設置視頻播放器的高度。
loop：若是出現該屬性，則當媒介文件完成播放後再次開始播放。
muted：規定視頻的音頻輸出應該被靜音。
poster：規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。
preload：若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。（若是使用 "autoplay"，則忽略該屬性）
src：要播放的視頻的 URL。
width：設置視頻播放器的寬度。
28. <wbr> ：規定在文本中的何處適合添加換行符。
（全部瀏覽器都支持 <wbr> 標籤，除了 Internet Explorer）
HTML5---屬性mysql
1. accesskey：規定激活（使元素得到焦點）元素的快捷鍵 語法：<element `accesskey="_character_"`> 屬性值：character：規定激活（使元素得到焦點）元素的便捷按鍵。 （使用alt+character來訪問帶有快捷鍵的元素） 2. contenteditable：規定元素內容是否可編輯 語法：<element contenteditable="true|false"> 屬性值： true：規定元素可編輯。 false：規定元素不可編輯。 3. contextmenu：規定元素的上下文菜單。當用戶右鍵點擊元素時，會出現上下文菜單 contextmenu 屬性的值是要打開的 <menu> 元素的 id。 語法：<element contextmenu="_menu_id_"> 屬性值：menu_id：要打開的 <menu> 元素的 id。 （目前只有firefox支持） 4. data-*：用於存儲頁面或應用程序的私有自定義數據 data-* 屬性賦予咱們在全部 HTML 元素上嵌入自定義 data 屬性的能力。 存儲的（自定義）數據可以被頁面的 JavaScript 中利用，以建立更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。 data-* 屬性包括兩部分： 屬性名不該該包含任何大寫字母，而且在前綴 "data-" 以後必須有至少一個字符 屬性值能夠是任意字符串 語法：<element data-*="_somevalue_"> 屬性值：somevalue：規定屬性的值（以字符串）。 5. draggable：規定元素是否可拖動 語法：<element draggable="true|false|auto"> 屬性值： true：規定元素的可拖動的。 false：規定元素不可拖動。 auto：使用瀏覽器的默認行爲。 6. hidden：是布爾屬性。 若是設置該屬性，它規定元素仍未或再也不相關。 瀏覽器不該顯示已規定 hidden 屬性的元素。 hidden屬性也可用於防止用戶查看元素，直到匹配某些條件（好比選擇了某個複選框）。而後，JavaScript 能夠刪除 hidden 屬性，以使此元素可見。 語法：<element hidden> 7. spellcheck：規定是否對元素進行拼寫和語法檢查 能夠對如下內容進行拼寫檢查： 1) input 元素中的文本值（非密碼） 2) <textarea> 元素中的文本 3) 可編輯元素中的文本 語法：<element spellcheck="true|false"> 屬性值： true：對元素進行拼寫和語法檢查 false：不檢查元素。
HTML5---事件git
針對window的事件：
針對form的事件：
針對keyboard的事件：
針對mouse的事件：
針對media的事件：
HTML5---canvas畫布web
Canvas簡介： 可以幫助你實現2D繪製圖形圖像及各類動畫效果功能 實現canvas的相關功能主要依賴於JavaScript實現 Canvas特性：
Canvas的使用：
每個canvas都擁有一個上下文（context），能夠用來調用相關的畫布方法
2D類型的圖形須要調用2D context
3D類型的圖形須要調用3D圖形相關的context（如WebGL）
定義畫布：
<canvas id='mycanvas(xxx)' width='xx' height='xxx'></canvas>
獲取上下文：
var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');
Canvas畫布的座標結構：
座標(0,0)在左上方
Canvas的一些屬性設置（配合JavaScript使用）： 顏色，樣式和陰影：
線條樣式：
矩形：
路徑：
轉換：
文本：
圖像繪製：
像素操做：
合成：
其餘：
詳細用法可參考網址：https://www.w3school.com.cn/tags/html_ref_canvas.asp
HTML5---SVG正則表達式
SVG簡介： SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用於定義用於網絡的基於矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失 SVG 是萬維網聯盟的標準 SVG優點： 其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於： SVG 圖像可經過文本編輯器來建立和修改 SVG 圖像可被搜索、索引、腳本化或壓縮 SVG 是可伸縮的 SVG 圖像可在任何的分辨率下被高質量地打印 SVG 可在圖像質量不降低的狀況下被放大 定義SVG： <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">...</svg> SVG的形狀： 1. 矩形 <rect>
2. 圓形 <circle>
3. 橢圓 <ellipse>
4. 線條 <line>
5. 折線 <polyline>
6. 多邊形 <polygon>
7. 路徑 <path>
SVG的濾鏡： 用來向形狀和文本添加特殊的效果。
高斯濾鏡：
SVG的漸變： SVG 漸變必須在 <defs> 標籤中進行定義。 漸變是一種從一種顏色到另外一種顏色的平滑過渡。另外，能夠把多個顏色的過渡應用到同一個元素上。 在 SVG 中，有兩種主要的漸變類型：線性漸變，放射性漸變 線性漸變：
放射漸變：
HTML5---加強表單標籤的屬性sql
1. required：規定必須在提交以前填寫輸入域（不能爲空）。 2. placeholder：提供一種提示（hint），描述輸入域所期待的值。 placeholder適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。 提示（hint）會在輸入域爲空時顯示出現，會在輸入域得到焦點時消失。 3. autocomplete：規定 form 或 input 域應該擁有自動完成功能。 4. autofocus：規定在頁面加載時，域自動地得到焦點。 5. form：規定輸入域所屬的一個或多個表單。 6. 表單重寫屬性：
7. list：規定輸入域的 datalist。datalist 是輸入域的選項列表。
8. min、max 和 step：用於爲包含數字或日期的 input 類型規定限定（約束）
max 屬性規定輸入域所容許的最大值。
min 屬性規定輸入域所容許的最小值。
step 屬性爲輸入域規定合法的數字間隔（若是 step="3"，則合法的數是 -3,0,3,6 等）。
9. multiple：規定輸入域中可選擇多個值。
10. novalidate：規定在提交表單時不該該驗證 form 或 input 域。
11. pattern：規定用於驗證 input 域的模式（pattern）。
模式（pattern） 是正則表達式
pattern適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。
HTML5---文件操做API數據庫
幾個有關的JS對象：
1. FileList：File對象的一個集合
2. Blob對象：其實就是一個原始數據對象，它提供了slice方法能夠讀取原始數據中的某塊數據。另外有兩個屬性：size（數據的大小），type（數據的MIME類型）
3. File對象：繼承自Blob對象，指向一個具體的文件，它還有兩個屬性：name（文件名）,lastModifiedDate（最後修改時間）
4. FileReader對象：設計用來讀取文件裏面的數據，提供三個經常使用的讀取文件數據的方法，另外讀取文件數據使用了異步的方式，很是高效
三個經常使用的讀取文件數據的方法：
1) readAsBinaryString(Blob blob)
傳入一個Blob對象，而後讀取數據的結果做爲二進制字符串的形式放到FileReader的result屬性中
2) readAsText(Blob blob, optional DOMString encoding)
第一個參數：傳入Blob對象
第二個參數：傳入編碼格式
異步將數據讀取成功後放到result屬性中，讀取的內容是普通的文本字符串的形式
3) readAsDataURL(Blob blob)
傳入一個Blob對象，讀取內容能夠做爲URL屬性，就是說能夠將一個圖片的結果指向給一個img的src屬性
使用時new一個對象，再使用相關的方法
HTML5---本地存儲與本地數據庫
本地存儲：
HTML5支持兩種WebStorage：
永久性的本地存儲：localStorage
會話級別的本地存儲：sessionStorage
HTML5中數據不是由每一個服務器請求傳遞的，而是隻有在請求時使用數據
數據都存儲在客戶端
localStorage：
1. 存儲的數據沒有時間限制
2. 它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。
3. 存儲數據：localStorage.setItem('存儲的變量名','存儲的值')
4. 獲取數據：localStorage.getItem('獲取的變量名')
5. 刪除某個已保存的數據：localStorage.removeItem('要刪除的變量名')
6. 清空全部保存的數據：localStorage.clear()
7. 可利用 localStorage.pagecount 對用戶訪問頁面的次數進行計數
8. localStorage只能存儲字符串（若是存儲對象爲json，數組等，須要先序列化成字符串））
9. 存儲大小通常爲5M
10. 獲取某個索引的key值：localStorage.key(index)
11. 獲取數據的個數：localStorage.length
sessionStorage：
1. 存儲的數據僅在當前會話下有效，關閉頁面或瀏覽器後被清除
2. 它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。
3. 存儲數據：sessionStorage.setItem('存儲的變量名','存儲的值')
4. 獲取數據：sessionStorage.getItem('獲取的變量名')
5. 刪除某個已保存的數據：sessionStorage.removeItem('要刪除的變量名')
6. 清空全部保存的數據：sessionStorage.clear()
7. 可利用 localStorage.pagecount 對用戶訪問頁面的次數進行計數
8. sessionStorage只能存儲字符串（若是存儲對象爲json，數組等，須要先序列化成字符串））
9. 存儲大小通常爲5M
10. 獲取某個索引的key值：sessionStorage.key(index)
11. 獲取數據的個數：sessionStorage.length
（數據庫適合儲存大量複雜的數據）
本地數據庫---Web SQL Database（關係型數據庫）
HTML5提供了一個瀏覽器端的數據庫支持
在本地數據庫中咱們能夠直接利用JavaScript建立數據庫，並利用SQL語句執行相關的數據庫操做
1. 打開或建立數據庫：openDatabase()
可傳遞五個參數：數據庫名
數據庫版本號（可省略）
對數據庫的描述
設置分配的數據庫的大小
回調函數
2. 執行sql語句：executeSql()
可傳遞四個參數：表示查詢的字符串，使用的SQL語言是SQLite 3.6.19。
插入到查詢中問號所在處的字符串數據。
成功時執行的回調函數，返回兩個參數：tx和執行的結果。一個失敗時執行的回調函數。
返回兩個參數：tx和失敗的錯誤信息。
如：context.executeSql(‘INSERT INTO testTable(id,name) VALUES (?,?)’, [id,'xx'], function(xx,result){...}, function(xx,error){});
3. 處理事務：transaction()
可傳遞三個參數：事務內容的一個方法
執行成功的回調函數
執行失敗的回調函數（後二者能夠省略）
經過結合transaction和executeSql，咱們就可在咱們以前建立的數據庫中添加建立數據表並添加數據了，如：
myWebDatabase（數據庫）.transaction(function (context){
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
});
本地數據庫--IndexedDB：（非關係型數據庫）
IndexedDB是一個用於在瀏覽器中存儲較大數據結構的Web API，而且提供了索引功能以實現高性能查找
IndexedDB是一個事務型的數據庫系統，然而它是使用JavaScript對象，而不是列數固定的表格來存儲數據的
在indexedDB中，沒有數據表，indexedDB是使用objectStore來存儲數據的。objectStore至關於一張表，可是objectStore並不想mysql中的表同樣，具備一列一列的結構，它只有兩列，一列是keypath（鍵值），另外一列就是存儲的數據了，存儲的數據通常用JavaScript中的對象來表示。每一條數據都和一個鍵相關聯
1. 打開或者建立數據庫：indexedDB.open()
可傳遞兩個參數：數據庫的名字，必須傳入
數據庫的版本，不傳入的話默認是1
open方法並不會返回一個DB對象，而是返回了一個IDBOpenDBRequest對象，咱們一般用到的DB對象在result屬性中
2. 建立objectStore（存儲對象）：createObjectStore()
可傳遞兩個參數：objectStore的名字
建立表的鍵類型
（建立objectStore至關於修改了數據庫的模式，因此這個操做應該放到onupgradeneeded中）
DBOpenRequest.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore(dbName, {
keyPath: 'id',
autoIncrement: true
});
}
objectStore上的方法：
1) 向數據庫添加數據：objectStore.add()
2) 向數據庫刪除數據：objectStore.delete()
3) 清空數據庫:objectStore.clear()
4) 替換（更新）數據：objectStore.put() （先用objectStore.get(id)獲取對應行的對象，再進行替換更新）
5) 建立索引：objectStore.createIndex()
...（詳細的參數，方法可查看網址：https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore）
3. 在管理數據時，全部操做都要基於事務來進行，因此須要先建立一個事務：
var transaction = xx.transaction();
可傳遞兩個參數：存儲對象名
模式（三種：1.只讀：read，不能修改數據庫數據，能夠併發執行。2.讀寫：readwrite，能夠進行讀寫操做。3.版本變動：verionchange）
建立完後，打開存儲對象objectStore：
var objectStore = transaction.objectStore('存儲對象名');
而後就能夠進行對數據的操做了
web SQL Database和indexedDB的比較：
HTML5---服務器推送事件
web瀏覽器到web服務器的事件類型稱爲客戶端事件 HTML5引入了一個從web服務器到web瀏覽器的事件流，稱爲服務器推送事件（SSE） 使用SSE能夠不停地將DOM事件推送到用戶的瀏覽器中 SSE會打開一個到服務器的持久鏈接，新消息可用時發送數據到客戶端，從而再也不須要持續的輪詢 使用SSE，則須要添加一個元素：EventSource 此元素的src屬性應該指向一個URL，這個URL提供了一個HTTP持久鏈接用於發送包含事件的數據流，會指向一個持續發送事件數據的php，python或任意腳本 如： 客戶端實例：
服務器實例：（以PHP，ASP爲例）
HTML5---WebSocket和信息推送
WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議 WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。 在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。 WebSocket的優勢： 1. 事件驅動 2. 異步 3. 使用ws或wss協議的客戶端socket 4. 可以實現真正意義上的推送功能 WebSocket的缺點： 1. 少部分瀏覽器支持，瀏覽器支持的程度與方式有區別（目前支持的瀏覽器：Chrome, Mozilla, Opera 和 Safari等） 如今，不少網站爲了實現推送技術，所用的技術都是 Ajax 輪詢。 輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客戶端的瀏覽器。 這種傳統的模式帶來很明顯的缺點，即瀏覽器須要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費不少的帶寬等資源。 而HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，而且可以更實時地進行通信。
建立WebSocket對象： var Socket = new WebSocket(url, [protocol]); 參數： url：指定鏈接的 URL protocol：是可選的，指定了可接受的子協議 相關的屬性：
相關的事件：
相關的方法：
在執行相關的websocket程序前，須要建立一個支持websocket的服務：安裝pywebsocket
HTML5---應用程序緩存
應用程序緩存爲應用帶來三個優點：
1. 離線瀏覽 - 用戶可在應用離線時使用它們
2. 速度 - 已緩存資源加載得更快
3. 減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
啓用應用程序緩存：
在文檔的<html> 標籤中包含 manifest 屬性：
<!DOCTYPE HTML>
<html manifest="xxx.appcache"> //manifest文件的建議的文件擴展名是：".appcache"。
...
</html>
注：manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。
關於mainifest文件：
如：
一旦應用被緩存，它就會保持緩存直到發生下列狀況： 1. 用戶清空瀏覽器緩存 2. manifest 文件被修改（參閱下面的提示） 3. 由程序來更新應用緩存 一旦文件被緩存，則瀏覽器會繼續展現已緩存的版本，即便您修改了服務器上的文件。爲了確保瀏覽器更新緩存，您須要更新 manifest 文件。 注：瀏覽器對緩存數據的容量限制可能不太同樣（某些瀏覽器設置的限制是每一個站點 5MB）。
HTML5---地理定位
HTML5中可用Geolocation API得到用戶的地理位置 使用 getCurrentPosition() 方法來得到用戶的位置 此方法的三個參數：
getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。若是可用，則會返回其餘下面的屬性
watchPosition()：返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。 clearWatch()：中止 watchPosition() 方法