HTML5的新增功能有哪些？

　　HTML5 將成爲 HTML、XHTML 以及 HTML DOM 的新標準。

新的功能：

一、用於繪畫的 canvas 元素

二、用於媒介回放的 video 和 audio 元素

三、對本地離線存儲的更好的支持

四、語意化更好的內容元素，好比 article、footer、header、nav、section

五、新的表單控件，好比 calendar、date、time、email、url、search

1、繪畫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

2、音頻audio和視頻video

　　Video也支持多個source元素，連接到不一樣的視頻文件，瀏覽器將使用第一個可識別的格式
　　屬性值：
　　　　autoplay=」autoplay」就緒後立刻播放
　　　　loop=「loop」播放完再次播放

　　　　preload="預加載"

　　　　muted="靜音"

　　　　volume-=0.1音量減

　　　　volume+=0.1音量加

　　　　currentTime+=10 快進10秒

　　　　currentTime-=10 快退10秒

　　　　playbackRate=1  加速播放 （默認的播放速度）

　　audio的屬性值和video的同樣

3、存儲

　　HTML5 提供了兩種在客戶端存儲數據的新方法：

　　　　localStorage - 沒有時間限制的數據存儲

　　　　localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。

　　　　sessionStorage - 針對一個 session 的數據存儲

　　　　sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

4、語意化標籤

　　<article>標籤訂義外部的內容（結構元素）
　　<aside>定義頁面內容以外的內容。 aside的內容與article的內容相關。（結構元素）
　　<figure>定義一組媒介內容的分組，以及它們的標題。（結構元素）
　　<section>標籤訂義文檔中的節（section，區段）。好比章節，頁眉，頁腳或文檔中的其餘部分（結構元素）

5、新的表單類型

　　一、email　　　

　　　　email 類型用於應該包含 e-mail 地址的輸入域。在提交表單時，會自動驗證 email 域的值。

　　　　E-mail: <input type="email" name="user_email" />

　　二、url

　　　　url 類型用於應該包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值。

　　　　Homepage: <input type="url" name="user_url" />

　　三、number

　　　　number 類型用於應該包含數值的輸入域。還可以設定對所接受的數字的限定：

　　　　Points: <input type="number" name="points" min="1" max="10" />

　　四、range

　　　　range 類型用於應該包含必定範圍內數字值的輸入域。

　　　　range 類型顯示爲滑動條。還可以設定對所接受的數字的限定：

　　　　<input  name="points" min="1" max="10" />type="range"

　　五、Date pickers (date, month, week, time, datetime, datetime-local)

　　　　HTML5 擁有多個可供選取日期和時間的新輸入類型

　　　　Date: <input type="date" name="user_date" />

　　六、search

　　　　search 類型用於搜索域，好比站點搜索或 Google 搜索。search 域顯示爲常規的文本域。

　　七、color顏色的選擇