HTML5新增功能

如果說XHTML已經開始尋求取代HTML,那麼HTML5的實用性在於，它將兩種語法整合在一起，採用同樣有效的方式來表達HTML的抽象DOM表示。 HTML5規範結合了HTML4，XHTML1以及DOM等級2HTML，並進行了對應的更新。

HTML5取代XHTML 1成為HTML規範的XML序列化格式。開發人員既可以使用寬鬆的HTML語法，也可以使用嚴格的XML語法來設定HTML5文件的格式。

     HTML5包含以下新增與更新功能：

  1. 新增了一種HTML文件類型：
  2. 新增了一些結構化標記的元素(

，

,

,

等)
  3. 向後相容的HTML和XHTML分析規則
  4. 新增了多媒體內容的

一、繪畫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是逆時針。

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

　　　　

　　　　　　　　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);

　　　　

　　還有一些其他效果:

　　　　 曲線quadraticCurreTo

　　　　字型fillText

二、音頻audio和視頻video

　　Video也支援多個source元素，連結到不同的視訊文件，瀏覽器將使用第一個可識別的格式
　　屬性值：
　　　　autoplay=”autoplay”就緒後馬上播放完『播放

　　　　preload="預載"

　　　　muted="靜音"

　　　　volume-=0.1音量減

　　　　volume+=0.1音量加

　　　　currentTime+=10 快轉10秒

　　　　currentTime-=10 快退10秒

　　　　playbackRate=1  加速播放 （預設的播放速度）

　　audio的屬性值和video的一樣

三、儲存

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

　　　　localStorage - 沒有時間限制的資料儲存

　　　　localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後，數據仍然可用。

　　　　sessionStorage - 針對一個 session 的資料儲存

　　　　sessionStorage 方法針對一個 session 進行資料儲存。當使用者關閉瀏覽器視窗後，資料會被刪除。

四、語義化標籤

　　

標籤定義外部的內容（結構元素）

　　

定義頁面內容以外的內容。 aside的內容與article的內容有關。 （結構元素）
　　

定義一組媒介內容的分組，以及它們的標題。 （結構元素）
　　

標籤定義文件中的節（section，區段）。例如章節，頁眉，頁尾或文件中的其他部分（結構元素）

五、新的表單類型

　　1、email　　　

　　　　email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

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

　　2、url

　　　　url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

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

　　3、number

　　　　number 类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定：

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

　　4、range

　　　　range 类型用于应该包含一定范围内数字值的输入域。

　　　　range 类型显示为滑动条。还能够设定对所接受的数字的限定：

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

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

　　　　HTML5 拥有多个可供选取日期和时间的新输入类型

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

　　6、search

　　　　search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

　　7、color颜色的选择