html5新增了哪些特性

這篇文章將為大家詳細講解有關html5新增了哪些特性，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

html5新增的特性：1、語義化標簽（header、footer、nav等）；2、webStorage儲存機制；3、history對象；4、表單類型（email、tell、date等）；5、媒體元素video和audio；6、canvas。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

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、表單元素的升級

傳統的表單元素：form、laber、textarea、select、button...

input（text、password、radio、checkbox、file、submit、reset、button）

Html5給input新增加一些類型（search、email、number、tell、range、color、date）

升級：給表單元素新增加屬性placeholder（給表單元素設置提示信息）

升級：提供了新的下拉框方式

5、多媒體

用于回放的 video 和 audio 元素

6、用于繪畫的 canvas

<canvas>定義圖形,繪制路徑，矩形，圓形，字符以及添加圖像的方法 。

　　首先創建canvas元素，并規定元素的id、寬度和高度撒的：

　　　　　　<canvas id="myCanvas" width="200" height="100"></canvas>
　然后通過javas來繪制。Canvas元素本身沒有繪圖能力，所有的繪制工作必須在javascript內部完成漸變。
　　　　　　<script type="text/javascript">
　　　　　　　　　　var c=document.getElementById("myCanvas");
　　　　　　　　　　var cxt=c.getContext("2d");
　　　　　　　　　　cxt.fillStyle="#FF0000";
　　　　　　　　　　cxt.fillRect(0,0,150,75);
　　　　　　</script>

　　JavaScript 使用 id 來尋找 canvas 元素：

　　　　　　var c=document.getElementById("myCanvas");

　　然后，創建 context 對象：

　　　　　　var cxt=c.getContext("2d");

　　getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

　　下面的兩行代碼繪制一個紅色的矩形：

　　　　　　cxt.fillStyle="#FF0000";
　　　　　　cxt.fillRect(0,0,150,75);

　　fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

　　下面的兩行代碼繪制一條直線：

　　　　　　cxt.moveTo(100,100);

　　　　　　cxt.lineTo(200,200);

　　下面的一行代碼是畫一個圓：

　　　　　　cxt.arc(70,18,15,0,Math.PI*2,false);

　　這些屬性值分別對應的是什么，70,18分別是X軸和Y軸，15是這個圓的半徑，0是角度,Math.PI*2是圓周率，false代表順時針而true是逆時針。

　　顏色的漸變效果也是可以實現的：

　　　　<script type="text/javascript">
　　　　　　　　var c=document.getElementById("myCanvas");
　　　　　　　　var cxt=c.getContext("2d");
　　　　　　　　var grd=cxt.createLinearGradient(0,0,175,50);
　　　　　　　　grd.addColorStop(0,"#FF0000");
　　　　　　　　grd.addColorStop(1,"#00FF00");
　　　　　　　　cxt.fillStyle=grd;
　　　　　　　　cxt.fillRect(0,0,175,50);
　　　　 </script>

　　還有一些其他效果:

　　　　曲線quadraticCurreTo

　　　　字體fillText

關于“html5新增了哪些特性”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。