Html5新增了什麼

jsxpang發表於2021-04-13
HTML

h5新增了些什麼

介紹

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儲存資料，即使關閉瀏覽器，也不會讓資料消失，除非主動的去刪除資料，使用的方法如上所示。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

相關文章