（1） 離線&存儲
Html5加入了應用程序緩存，意味着web應用可以進行緩存，並可在沒有因特網連接時進行訪問。目前主瀏覽器除了IE均支持應用程序緩存。
啓用應用程序緩存，在文檔<html>標籤中包含manifest屬性，
如<html manifest=”demo.appache”>
請注意，manifest文件需要配置正確的MIME-type，即“text/cache-manifest”。必須在web服務器上進行配置。
有關Manifest文件，請參考鏈接：
http://www.w3school.com.cn/html5/html_5_app_cache.asp
（2）存儲
H5提供了兩種在客戶端存儲數據的新方法
LocalStorage-沒有時間限制的數據存儲
SessionStrorage-針對一個session的數據存儲；
localStorage 方法存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用。
localStorage.lastname="Smith";document.write(localStorage.lastname);
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。
sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);
（3） 多媒體
Audio(音頻),video（視頻），progress(進度條)，meter(條狀圖，類似進度條)
-
-
雖然
html5中的多媒體標籤有各種不好,但我們還是需要擁抱這項新的技術,因爲他的用法,真的十分簡單
-
audio標籤
在w3c中對於
audio的說明是這樣的audio標籤
|
1
2
|
<audio
src="song.ogg" controls="controls" autoplay
loop></audio> |
-
示例代碼2:
-
src:音頻的地址
-
由於音頻格式在不同瀏覽器中支持情況不同,考慮兼容性問題,我們需要使用下述代碼
-
source:指定多個音頻,如果找到了當前瀏覽器支持的,那麼會直接使用,如果所有的
source標籤格式都不支持,會顯示最後的文本內容
-
|
1
2
3
4
5
|
<audio
controls="controls"> <source
src="song.ogg" type="audio/ogg"> <source
src="song.mp3" type="audio/mpeg">你的瀏覽器不支持此種格式</audio> |
Video標籤
Video標籤用來播放視頻,用法跟audio標籤十分類似
|
1
2
|
<video
src="movie.ogg" controls
autoplay loop width = "200px" height
= "200px"></video> |
-
示例代碼2:
-
src:視頻的地址
-
由於視頻在不同瀏覽器中支持情況不同,考慮兼容性問題,我們需要使用下述代碼
-
source:指定多個視頻,如果找到了當前瀏覽器支持的,那麼會直接使用,如果所有的
source標籤格式都不支持,會顯示最後的文本內容
-
|
1
2
3
4
5
|
<video
width="320" height="240" controls="controls"><source
src="movie.ogg" type="video/ogg"><source
src="movie.mp4" type="video/mp4">你的瀏覽器不支持video標籤</video> |
兩種進度條
在html5之前如果我們想要使用進度條,可以通過一些前端框架,或者自己使用控件搭建出類似的外觀,但是在html5中推出了兩個進度條控件,接下來就讓我們來看看如何使用它們
process
-
外觀
-
如果只是定義該元素
<progress><progress/>不設置任何內容,顯示效果如下圖
-
progress.gif
-
作用:
-
用來顯示任務的進度(進程)
-
如果想要用來顯示
度量值(比如容量使用情況)請使用meter標籤
-
-
屬性:
-
max: 總工作量
-
value: 已完成工作量
-
-
兼容性:
-
爲了保證顯示效果,可以再
progress標籤中寫入內容,在當前瀏覽器無法顯示該控件時,會轉而顯示內容
-
meter
-
外觀:
-
通過屬性值的搭配能夠顯示出多重不同的變化
-
-
常見屬性:
-
high:規定較高的值
-
low:規定較低的值
-
max:規定最大值(可以超過,但是進度條已經滿了)
-
min:規定最小值
-
value:規定度量的值
-
-
示例代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE
html><html
lang="en"><head> <meta
charset="UTF-8"> <title>Title</title></head><body><meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter><br/><meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter><br/><meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter><br/><meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter><br/></body></html> |
-
顯示效果即截圖
meter.png
總結
兩種進度條都能夠用來顯示進度,由於兼容性以及語義性的問題,在實際開發中需要
結合實際情況決定是否使用它們(或者是使用對應的前端框架)。
（3） web sockets
WebSocket是HTML5開始提供的一種在單個TCP 連接上進行全雙工通訊的協議web workers;
長久以來,創建實現客戶端和用戶端之間雙工通訊的web app都會造成HTTP輪詢的濫用: 客戶端向主機不斷髮送不同的HTTP呼叫來進行詢問。
實現原理
在實現websocket連線過程中，需要通過瀏覽器發出websocket連線請求，然後服務器發出迴應，這個過程通常稱爲“握手” 。在 WebSocket API，瀏覽器和服務器只需要做一個握手的動作，然後，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。在此WebSocket 協議中，爲我們實現即時服務帶來了兩大好處：
1. Header
互相溝通的Header是很小的-大概只有 2 Bytes
2. Server Push
服務器的推送，服務器不再被動的接收到瀏覽器的請求之後才返回數據，而是在有新數據時就主動推送給瀏覽器。
詳見鏈接：http://write.blog.csdn.net/postedit/78064799
(4) history
//單純從歷史中前進一頁
History.forword();
//單純從歷史中後退一頁
History.back();
//從歷史中前進一頁或者後退一頁，如果數據發生變化那麼頁面內容也隨之改變
History.go(1|-1);
Html5中提供了兩個新方法：1、history.pushState(); 往歷史裏增加當前頁
2、history.replaceState();將歷史裏最頂層的歷史頁替換成當前頁
Canvas目前只能2d繪圖，但是通過2d繪圖也能繪出3d的效果
詳見：http://cssass.com/blog/2011/976.html
(6)新屬性
|
屬性 |
描述 |
|
規定元素內容是否可編輯。 |
|
|
規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。 |
|
|
用於存儲頁面或應用程序的私有定製數據。 |
|
|
規定元素是否可拖動。 |
|
|
規定在拖動被拖動數據時是否進行復制、移動或鏈接。 |
|
|
規定元素仍未或不再相關。 |
|
|
規定是否對元素進行拼寫和語法檢查。 |
|
|
規定是否應該翻譯元素內容。 |