h5新增了些什么

點(diǎn)擊上方藍(lán)色字體，選擇“標(biāo)星公眾號(hào)”

優(yōu)質(zhì)文章，第一時(shí)間送達(dá)

  作者 |  jsxpang

來源 |  urlify.cn/zUFBJb

介紹

HTML5 是下一代的 HTML, 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。

起步

HTML5 是 W3C 與 WHATWG 合作的結(jié)果。

為 HTML5 建立的一些規(guī)則：

• 新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。

• 減少對(duì)外部插件的需求（比如 Flash）

• 更優(yōu)秀的錯(cuò)誤處理

• 更多取代腳本的標(biāo)記

• HTML5 應(yīng)該獨(dú)立于設(shè)備

• 開發(fā)進(jìn)程應(yīng)對(duì)公眾透明

瀏覽器支持

最新版本的 Chrome、Firefox、Safari以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。國內(nèi)的 遨游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實(shí)驗(yàn)版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。

新特性

HTML5 中新增的一些有趣的新特性：

1、語義化標(biāo)簽

 header footer nav aside section meau template article audio video canvas 等

2、webStorage 儲(chǔ)存機(jī)制 sessionStorage 和 localStorage

• webStorage: 使用HTML5可以在本地存儲(chǔ)用戶的瀏覽數(shù)據(jù)。早些時(shí)候,本地存儲(chǔ)使用的是 cookie。但是Web 存儲(chǔ)需要更加的安全與快速，這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上。它也可以存儲(chǔ)大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對(duì)存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

      Web Storage又分為兩種：sessionStorage 和localStorage ，即這兩個(gè)是Storage的一個(gè)實(shí)例。從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地。其API提供的方法有以下幾種：

setItem (key, value) ——  保存數(shù)據(jù)，以鍵值對(duì)的方式儲(chǔ)存信息。

getItem (key) ——  獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對(duì)應(yīng)的value值。

removeItem (key) ——  刪除單個(gè)數(shù)據(jù)，根據(jù)鍵值移除對(duì)應(yīng)的信息。

clear () ——  刪除所有的數(shù)據(jù)

key (index) —— 獲取某個(gè)索引的key

• localStorage：沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

      localStorage的生命周期是永久性的。假若使用localStorage存儲(chǔ)數(shù)據(jù)，即使關(guān)閉瀏覽器，也不會(huì)讓數(shù)據(jù)消失，除非主動(dòng)的去刪除數(shù)據(jù)，使用的方法如上所示。localStorage有l(wèi)ength屬性，可以查看其有多少條記錄的數(shù)據(jù)。使用方法如下：

var storage = null;                          //判斷瀏覽器是否支持localStorage
    if(window.localStorage){
        storage.setItem("name", "Rick");     //調(diào)用setItem方法，存儲(chǔ)數(shù)據(jù)
            alert(storage.getItem("name"));  //調(diào)用getItem方法，彈框顯示 name 為 Rick
            storage.removeItem("name");      //調(diào)用removeItem方法，移除數(shù)據(jù)
            alert(storage.getItem("name"));  //調(diào)用getItem方法，彈框顯示 name 為 null
    }

• sessionStorage：針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

      sessionStorage 的生命周期是在瀏覽器關(guān)閉前。也就是說，在整個(gè)瀏覽器未關(guān)閉前，其數(shù)據(jù)一直都是存在的。sessionStorage也有l(wèi)ength屬性，其基本的判斷和使用方法和localStorage的使用是一致的。需要注意的有以下幾點(diǎn)：
     (1) 頁面刷新不會(huì)消除數(shù)據(jù);
     (2) 只有在當(dāng)前頁面打開的鏈接，才可以訪sessionStorage的數(shù)據(jù)；
     (3) 使用window.open打開頁面和改變localtion.href方式都可以獲取到sessionStorage內(nèi)部的數(shù)據(jù);

3、history 對(duì)象
history 對(duì)象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起。
使用 go( ) 方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)，可以向后，也可以向前。
這個(gè)方法接受一個(gè)參數(shù)，表示向后或向前跳轉(zhuǎn)的頁面數(shù)的一個(gè)整數(shù)值。
負(fù)數(shù)表示向后跳轉(zhuǎn)（類似于單機(jī)瀏覽器的“后退”按鈕）
正數(shù)表示向前跳轉(zhuǎn)（類似于單機(jī)瀏覽器的“前進(jìn)”按鈕）

history.go(-1) // 后退一頁 
history.go(1) // 前進(jìn)一頁 
history.go(2) // 前進(jìn)兩頁 

還可以給go（）方法傳遞一個(gè)字符串參數(shù)，此時(shí)瀏覽器會(huì)跳轉(zhuǎn)到歷史記錄中包含該字符串的第一個(gè)位置-----可能前進(jìn)，也可能后退。具體看哪個(gè)位置最近。如果歷史記錄中不包含該字符串，那么這個(gè)方法什么也不做

history.go('wrox.com') // 調(diào)到最近的 wrox.com 頁面

也可以使用兩個(gè)簡寫方法 back( ) 和 forward( ) 來代替 go( ) 。這兩個(gè)方法都可以模仿瀏覽器的“后退”和“前進(jìn)”按鈕。

history.back() // 后退一頁
history.forward() // 前進(jìn)一頁

4、新增的表單元素 

input datalist datetime date month week time color number email address range tel url search 等

5、多媒體，用于回放的 video 和 audio 元素

6、用于繪畫的 canvas

粉絲福利：Java從入門到入土學(xué)習(xí)路線圖

??????

??長按上方微信二維碼 2 秒

感謝點(diǎn)贊支持下哈