介紹
HTML5 是下一代的 HTML, 將成為 HTML、XHTML 以及 HTML DOM 的新標準。
起步
HTML5 是 W3C 與 WHATWG 合作的結果。
為 HTML5 建立的一些規則:
- 新特性應該基于 HTML、CSS、DOM 以及 JavaScript。
- 減少對外部插件的需求(比如 Flash)
- 更優秀的錯誤處理
- 更多取代腳本的標記
- HTML5 應該獨立于設備
- 開發進程應對公眾透明
瀏覽器支持
最新版本的 Chrome、Firefox、Safari以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。國內的 遨游瀏覽器(Maxthon),以及基于IE或Chromium(Chrome的工程版或稱實驗版)所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。
新特性
HTML5 中新增的一些有趣的新特性:
1、語義化標簽 header footer nav aside section meau template article audio video canvas 等
2、webStorage 儲存機制 sessionStorage 和 localStorage
- webStorage: 使用HTML5可以在本地存儲用戶的瀏覽數據。早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速,這些數據不會被保存在服務器上,但是這些數據只用于用戶請求網站數據上。它也可以存儲大量的數據,而不影響網站的性能。數據以 鍵/值 對存在, web網頁的數據只允許該網頁訪問使用。
Web Storage又分為兩種: sessionStorage 和localStorage ,即這兩個是Storage的一個實例。從字面意思就可以很清楚的看出來,sessionStorage將數據保存在session中,瀏覽器關閉也就沒了;而localStorage則一直將數據保存在客戶端本地。其API提供的方法有以下幾種:
setItem (key, value) —— 保存數據,以鍵值對的方式儲存信息。
getItem (key) —— 獲取數據,將鍵值傳入,即可獲取到對應的value值。
removeItem (key) —— 刪除單個數據,根據鍵值移除對應的信息。
clear () —— 刪除所有的數據
key (index) —— 獲取某個索引的key
localStorage的生命周期是永久性的。假若使用localStorage存儲數據,即使關閉瀏覽器,也不會讓數據消失,除非主動的去刪除數據,使用的方法如上所示。localStorage有length屬性,可以查看其有多少條記錄的數據。使用方法如下:
var storage = null; //判斷瀏覽器是否支持localStorage
if(window.localStorage){
storage.setItem("name", "Rick"); //調用setItem方法,存儲數據
alert(storage.getItem("name")); //調用getItem方法,彈框顯示 name 為 Rick
storage.removeItem("name"); //調用removeItem方法,移除數據
alert(storage.getItem("name")); //調用getItem方法,彈框顯示 name 為 null
}
- sessionStorage:針對一個 session 的數據存儲
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說,在整個瀏覽器未關閉前,其數據一直都是存在的。sessionStorage也有length屬性,其基本的判斷和使用方法和localStorage的使用是一致的。需要注意的有以下幾點:
(1) 頁面刷新不會消除數據;
(2) 只有在當前頁面打開的鏈接,才可以訪sessionStorage的數據;
(3) 使用window.open打開頁面和改變localtion.href方式都可以獲取到sessionStorage內部的數據;
3、history 對象
history 對象保存著用戶上網的歷史記錄,從窗口被打開的那一刻算起。
使用 go( ) 方法可以在用戶的歷史記錄中任意跳轉,可以向后,也可以向前。
這個方法接受一個參數,表示向后或向前跳轉的頁面數的一個整數值。
負數表示向后跳轉(類似于單機瀏覽器的“后退”按鈕)
正數表示向前跳轉(類似于單機瀏覽器的“前進”按鈕)
history.go(-1) // 后退一頁
history.go(1) // 前進一頁
history.go(2) // 前進兩頁
還可以給go()方法傳遞一個字符串參數,此時瀏覽器會跳轉到歷史記錄中包含該字符串的第一個位置-----可能前進,也可能后退。具體看哪個位置最近。 如果歷史記錄中不包含該字符串,那么這個方法什么也不做
history.go('wrox.com') // 調到最近的 wrox.com 頁面
也可以使用兩個簡寫方法 back( ) 和 forward( ) 來代替 go( ) 。這兩個方法都可以模仿瀏覽器的“后退”和“前進”按鈕。
history.back() // 后退一頁
history.forward() // 前進一頁
4、新增的表單元素 input datalist datetime date month week time color number email address range tel url search 等
5、多媒體,用于回放的 video 和 audio 元素
6、用于繪畫的 canvas
以上就是Html5新增了哪些功能的詳細內容,更多關于Html5新功能的資料請關注腳本之家其它相關文章!