HTML5新特性總結大全
一.HTML5概念：
1.什麼是HTML5：
（1）HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準；
（2）HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支援。
2.HTML5的起步：
（1）HTML5 是 W3C（World Wide Web Consortium，全球資訊網聯盟） 與 WHATWG 合作的結果
（2）為 HTML5 建立的一些規則：
a.新特性應該基於 HTML、CSS、DOM 以及 JavaScript
b.減少對外部外掛的需求（比如 Flash）
c.更優秀的錯誤處理
d.更多取代指令碼的標記
e.HTML5 應該獨立於裝置
f.開發程序應對公眾透明
3.新特性：
（1）用於繪畫的 canvas 元素
（2）用於媒介回放的 video 和 audio 元素
（3）對本地離線儲存的更好的支援
（4）新的特殊內容元素，比如 article、footer、header、nav、section
（5）新的表單控制元件，比如 calendar、date、time、email、url、search
二.HTML5視訊：
1.Web 上的視訊：
（1）大多數視訊是通過外掛（比如 Flash）來顯示的，然而，並非所有瀏覽器都擁有同樣的外掛
（2）HTML5 規定了一種通過 video 元素來包含視訊的標準方法
2.視訊格式：
（1）Ogg格式：
帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案
（2）MPEG4格式：
帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案
（3）WebM格式：
帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案
3.如何工作：
（1）示例程式碼：
<video src="movie.ogg" controls="controls">...</video>
（2）controls 屬性供新增播放、暫停和音量控制元件，可加入寬度和高度， 與 之間插入的內容是供不支援 video 元素的瀏覽器顯示的
（3）video 元素允許多個 source 元素。source 元素可以連結不同的視訊檔案。瀏覽器將使用第一個可識別的格式：
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
4.各瀏覽器對不同格式的支援情況：
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
5. 標籤的屬性：
屬性 值 描述
autoplay autoplay 如果出現該屬性，則視訊在就緒後馬上播放
controls controls 如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕
height pixels 設定視訊播放器的高度
loop loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放
preload preload 如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性
src url 要播放的視訊的 URL
width pixels 設定視訊播放器的寬度
三.HTML 5 Video + DOM：
1.使用 DOM 進行控制：
（1）HTML5 元素同樣擁有方法、屬性和事件；
（2）方法用於播放、暫停以及載入等。其中的屬性（比如時長、音量等）可以被讀取或設定。其中的 DOM 事件能夠通知您，比方說， 元素開始播放、已暫停，已停止，等等
2.方法、屬性以及事件：
方法 屬性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width
在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視訊的元資料已載入後，其他屬性才可用
四.HTML5 音訊:
1.Web 上的音訊:
（1）大多數音訊是通過外掛（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的外掛
（2）HTML5 規定了一種通過 audio 元素來包含音訊的標準方法
（3）audio 元素能夠播放聲音檔案或者音訊流
2.audio 元素支援的三種音訊格式：
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
3.如何工作：
（1）示例程式碼：
<audio src="song.ogg" controls="controls"></audio>
（2）control 屬性供新增播放、暫停和音量控制元件， 與 之間插入的內容是供不支援 audio 元素的瀏覽器顯示的
（3）audio 元素允許多個 source 元素。source 元素可以連結不同的音訊檔案。瀏覽器將使用第一個可識別的格式：
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
（4） 標籤的屬性：
屬性 值 描述
autoplay autoplay 如果出現該屬性，則音訊在就緒後馬上播放
controls controls 如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕
loop loop 如果出現該屬性，則每當音訊結束時重新開始播放
preload preload 如果出現該屬性，則音訊在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性
src url 要播放的音訊的 URL
五.HTML5 拖放：
1.拖放（Drag 和 drop）是 HTML5 標準的組成部分：
（1）拖放是一種常見的特性，即抓取物件以後拖到另一個位置
（2）在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放
2.拖動相關設定：
（1）設定元素為可拖放：
首先，為了使元素可拖動，把 draggable 屬性設定為 true ：
<img draggable="true" />
（2）規定拖動元素：
ondragstart 和 setData()
ondragstart 屬性呼叫了一個函式，drag(event)，它規定了被拖動的資料
dataTransfer.setData() 方法設定被拖資料的資料型別和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
資料型別是 “Text”，值是可拖動元素的 id (“drag1”)
（3）放到何處 - ondragover：
ondragover 事件規定在何處放置被拖動的資料；
預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。
呼叫 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
（4）進行放置 - ondrop：
當放置被拖資料時，會發生 drop 事件；
ondrop 屬性呼叫了一個函式，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
（5）注意點：
a.呼叫 preventDefault() 來避免瀏覽器對資料的預設處理（drop 事件的預設行為是以連結形式開啟）
b.通過 dataTransfer.getData(“Text”) 方法獲得被拖的資料。該方法將返回在 setData() 方法中設定為相同型別的任何資料
c.被拖資料是被拖元素的 id (“drag1”)
d.把被拖元素追加到放置元素（目標元素）中
3.拖動示例程式碼：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
六.Canvas：
1.什麼是Canvas：
（1）HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像
（2）畫布是一個矩形區域，您可以控制其每一畫素
（3）canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法
2.建立canvas元素：
示例程式碼：
<canvas id="myCanvas" width="200" height="100"></canvas>
3. 通過 JavaScript 來繪製：
（1）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>
//getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法
（2）使用 id 來尋找 canvas 元素，然後，建立 context 物件，然後進行繪製
（3）fillRect 方法擁有引數 (0,0,150,75)：
在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)
（4）可以通過canvas繪製出點、線條、圓、漸變背景、影象
七.內聯 SVG：
1.什麼是SVG:
（1）SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
（2）SVG 用於定義用於網路的基於向量的圖形
（3）SVG 使用 XML 格式定義圖形
（4）SVG 影象在放大或改變尺寸的情況下其圖形質量不會有損失
（5）SVG 是全球資訊網聯盟的標準
2.SVG 的優勢：
（1）SVG 影象可通過文字編輯器來建立和修改
（2）SVG 影象可被搜尋、索引、指令碼化或壓縮
（3）SVG 是可伸縮的
（4）SVG 影象可在任何的解析度下被高質量地列印
（5）SVG 可在影象質量不下降的情況下被放大
3.把 SVG 直接嵌入 HTML 頁面：
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
八.Canvas vs SVG：
1.SVG：
（1）SVG 是一種使用 XML 描述 2D 圖形的語言
（2）SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器
（3）在 SVG 中，每個被繪製的圖形均被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形
2.Canvas：
（1）Canvas 通過 JavaScript 來繪製 2D 圖形
（2）Canvas 是逐畫素進行渲染的。
（3）在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件
3.Canvas 與 SVG 的比較：
（1）Canvas：
依賴解析度
不支援事件處理器
弱的文字渲染能力
能夠以 .png 或 .jpg 格式儲存結果影象
最適合影象密集型的遊戲，其中的許多物件會被頻繁重繪
（2）SVG：
不依賴解析度
支援事件處理器
最適合帶有大型渲染區域的應用程式（比如谷歌地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用
九.地理定位：
1.定位使用者的位置：
（1）HTML5 Geolocation API 用於獲得使用者的地理位置
（2）鑑於該特性可能侵犯使用者的隱私，除非使用者同意，否則使用者位置資訊是不可用的
2.使用地理定位：
（1）使用 getCurrentPosition() 方法來獲得使用者的位置
（2）返回使用者位置的經度和緯度的程式碼示例：
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
（3）示例程式碼解釋：
檢測是否支援地理定位
如果支援，則執行 getCurrentPosition() 方法。如果不支援，則向用戶顯示一段訊息
如果getCurrentPosition()執行成功，則向引數showPosition中規定的函式返回一個coordinates物件
showPosition() 函式獲得並顯示經度和緯度
3.處理錯誤和拒絕：
（1）getCurrentPosition() 方法的第二個引數用於處理錯誤。它規定當獲取使用者位置失敗時執行的函式
（2）示例程式碼：
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
（3）錯誤程式碼：
Permission denied - 使用者不允許地理定位
Position unavailable - 無法獲取當前位置
Timeout - 操作超時
4.在地圖中顯示結果：
（1）如需在地圖中顯示結果，您需要訪問可使用經緯度的地圖服務，比如谷歌地圖或百度地圖
（2）示例程式碼：
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}
5.getCurrentPosition() 方法 - 返回資料：
（1）若成功，則 getCurrentPosition() 方法返回物件。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下面的屬性
（2）屬性：
屬性 描述
coords.latitude 十進位制數的緯度
coords.longitude 十進位制數的經度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米計
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，從正北開始以度計
coords.speed 速度，以米/每秒計
timestamp 響應的日期/時間
6.Geolocation 物件 - 其他有趣的方法：
（1）watchPosition() - 返回使用者的當前位置，並繼續返回使用者移動時的更新位置（就像汽車上的 GPS）
（2）clearWatch() - 停止 watchPosition() 方法
十. Web 儲存：
1.在客戶端儲存資料：
（1）HTML5 提供了兩種在客戶端儲存資料的新方法：
localStorage - 沒有時間限制的資料儲存
sessionStorage - 針對一個 session 的資料儲存
（2）之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高
（3）在 HTML5 中，資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能
（4）對於不同的網站，資料儲存於不同的區域，並且一個網站只能訪問其自身的資料
（5）HTML5 使用 JavaScript 來儲存和訪問資料
2.localStorage 方法：
（1）localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後，資料依然可用
（2）如何建立和訪問 localStorage：
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
（3）對使用者訪問頁面的次數進行計數的例子：
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
3.sessionStorage 方法：
（1）sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後，資料會被刪除
（2）如何建立並訪問一個 sessionStorage：
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
（3）對使用者在當前 session 中訪問頁面的次數進行計數的例子：
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
十一.HTML 5 應用程式快取：
1.什麼是應用程式快取：
（1）HTML5 引入了應用程式快取，這意味著 web 應用可進行快取，並可在沒有因特網連線時進行訪問
（2）應用程式快取為應用帶來三個優勢：
a.離線瀏覽 - 使用者可在應用離線時使用它們
b.速度 - 已快取資源載入得更快
c.減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源。
（3）使用 HTML5，通過建立 cache manifest 檔案，可以輕鬆地建立 web 應用的離線版本
2.HTML5 Cache Manifest 例項:
帶有 cache manifest 的 HTML 文件（供離線瀏覽）的示例：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
3.Cache Manifest 基礎：
（1）如需啟用應用程式快取，在文件的 標籤中包含 manifest 屬性
（2）manifest 檔案的建議的副檔名是：".appcache"
（3）manifest 檔案需要配置正確的 MIME-type，即 “text/cache-manifest”。必須在 web 伺服器上進行配置
4.Manifest 檔案：
（1）manifest 檔案是簡單的文字檔案，它告知瀏覽器被快取的內容（以及不快取的內容）
（2）manifest 檔案可分為三個部分：
a.CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取
b.NETWORK - 在此標題下列出的檔案需要與伺服器的連線，且不會被快取
c.FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）
（3）CACHE MANIFEST:
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
manifest 檔案列出了三個資源：一個 CSS 檔案，一個 GIF 影象，以及一個 JavaScript 檔案。當 manifest 檔案載入後，瀏覽器會從網站的根目錄下載這三個檔案。然後，無論使用者何時與因特網斷開連線，這些資源依然是可用的
（4）NETWORK：
NETWORK 小節規定檔案 “login.asp” 永遠不會被快取，且離線時是不可用的：
NETWORK:
login.asp
可以使用星號來指示所有其他資源/檔案都需要因特網連線：
NETWORK:
*
（5）FALLBACK：
FALLBACK 小節規定如果無法建立因特網連線，則用 “offline.html” 替代 /html5/ 目錄中的所有檔案：
FALLBACK:
/html5/ /404.html
第一個 URI 是資源，第二個是替補
5.更新快取：
（1）一旦應用被快取，它就會保持快取直到發生下列情況：
a.使用者清空瀏覽器快取
b.manifest 檔案被修改（參閱下面的提示）
c.由程式來更新應用快取
（2）完整的 Manifest 檔案：
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
（3）以 “#” 開頭的是註釋行，但也可滿足其他用途。應用的快取會在其 manifest 檔案更改時被更新
（4）如果您編輯了一幅圖片，或者修改了一個 JavaScript 函式，這些改變都不會被重新快取。更新註釋行中的日期和版本號是一種使瀏覽器重新快取檔案的辦法。
6.關於應用程式快取的註釋：
（1）一旦檔案被快取，則瀏覽器會繼續展示已快取的版本，即使您修改了伺服器上的檔案。為了確保瀏覽器更新快取，您需要更新 manifest 檔案
（2）瀏覽器對快取資料的容量限制可能不太一樣
十二.Web Workers：
1.什麼是 Web Worker：
（1）web worker 是執行在後臺的 JavaScript，不會影響頁面的效能
（2）當在 HTML 頁面中執行指令碼時，頁面的狀態是不可響應的，直到指令碼已完成
（3）web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行
2.HTML5 Web Workers 例項：
（1）檢測 Web Worker 支援：
在建立 web worker 之前，請檢測使用者的瀏覽器是否支援它：
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
（2）建立 web worker 檔案：
在一個外部 JavaScript 中建立我們的 web worker
我們建立了計數指令碼。該指令碼儲存於 “demo_workers.js” 檔案中：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
（3）建立 Web Worker 物件：
下面的程式碼檢測是否存在 worker，如果不存在，- 它會建立一個新的 web worker 物件，然後執行 “demo_workers.js” 中的程式碼：
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
然後我們就可以從 web worker 發生和接收訊息了。向 web worker 新增一個 “onmessage” 事件監聽器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
（4）終止 Web Worker：
當我們建立 web worker 物件後，它會繼續監聽訊息（即使在外部指令碼完成之後）直到其被終止為止。
如需終止 web worker，並釋放瀏覽器/計算機資源，請使用 terminate() 方法：
w.terminate();
3.Web Workers 和 DOM：
由於 web worker 位於外部檔案中，它們無法訪問下例 JavaScript 物件：
window 物件、document 物件、parent 物件
十三.伺服器傳送事件：
1.Server-Sent 事件 - 單向訊息傳遞：
（1）Server-Sent 事件指的是網頁自動獲取來自伺服器的更新
（2）以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過伺服器傳送事件，更新能夠自動到達。
例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。
（3）HTML5 伺服器傳送事件（server-sent event）允許網頁獲得來自伺服器的更新
2.接收 Server-Sent 事件通知：
（1）EventSource 物件用於接收伺服器傳送事件通知：
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
（2）例子解釋：
建立一個新的 EventSource 物件，然後規定傳送更新的頁面的 URL（本例中是 “demo_sse.php”）
每接收到一次更新，就會發生 onmessage 事件
當 onmessage 事件發生時，把已接收的資料推入 id 為 “result” 的元素中
3.檢測 Server-Sent 事件支援：
檢測伺服器傳送事件的瀏覽器支援情況：
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}
4.伺服器端程式碼例項：
（1）為了讓上面的例子可以執行，您還需要能夠傳送資料更新的伺服器（比如 PHP 和 ASP）
（2）伺服器端事件流的語法是非常簡單的。把 “Content-Type” 報頭設定為 “text/event-stream”
5.EventSource 物件：
事件 描述
onopen 當通往伺服器的連線被開啟
onmessage 當接收到訊息
onerror 當錯誤發生
十四.Input 型別：
1.新的 Input 型別：
email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color
2.瀏覽器支援：
nput type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No
3.Input 型別 - email：
（1）email 型別用於應該包含 e-mail 地址的輸入域，在提交表單時，會自動驗證 email 域的值
（2）程式碼示例：
E-mail: <input type="email" name="user_email" />
4.Input 型別 - url:
（1）url 型別用於應該包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值
（2）程式碼示例：
Homepage: <input type="url" name="user_url" />
5.Input 型別 - number：
（1）number 型別用於應該包含數值的輸入域。您還能夠設定對所接受的數字的限定
（2）示例程式碼：
Points: <input type="number" name="points" min="1" max="10" />
（3）下面的屬性來規定對數字型別的限定：
屬性 值 描述
max number 規定允許的最大值
min number 規定允許的最小值
step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value number 規定預設值
6.Input 型別 - range：
（1）range 型別用於應該包含一定範圍內數字值的輸入域，range 型別顯示為滑動條，您還能夠設定對所接受的數字的限定
（2）程式碼示例：
<input type="range" name="points" min="1" max="10" />
7.Input 型別 - Date Pickers（日期選擇器）：
（1）HTML5 擁有多個可供選取日期和時間的新輸入型別：
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鐘）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間）
（2）程式碼示例：
Date: <input type="date" name="user_date" />
8.Input 型別 - search：
（1）search 型別用於搜尋域，比如站點搜尋或 Google 搜尋。
（2）search 域顯示為常規的文字域
十五.HTML5 表單元素：
1.HTML5 的新的表單元素：
datalist、keygen、output
2.瀏覽器支援：
Input type IE Firefox Opera Chrome Safari
datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No
3.datalist 元素：
（1）datalist 元素規定輸入域的選項列表，列表是通過 datalist 內的 option 元素建立的；
（2）如需把 datalist 繫結到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
（3）option 元素永遠都要設定 value 屬性
4.keygen 元素：
（1）keygen 元素的作用是提供一種驗證使用者的可靠方法
（2）keygen 元素是金鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰
私鑰（private key）儲存於客戶端，公鑰（public key）則被髮送到伺服器。公鑰可用於之後驗證使用者的客戶端證書（client certificate）。
（3）目前，瀏覽器對此元素的糟糕的支援度不足以使其成為一種有用的安全標準。
（4）程式碼示例：
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
5.output 元素：
（1）output 元素用於不同型別的輸出，比如計算或指令碼輸出：
（2）程式碼示例：
<output id="result" onforminput="resCalc()"></output>
十六.HTML5 表單屬性：
1.HTML5 的新的表單屬性：
（1）新的 form 屬性：
autocomplete、novalidate
（2）新的 input 屬性：
autocomplete、autofocus、form、form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、height 和 width、list、min, max 和 step、multiple、pattern (regexp)、placeholder、required
2.瀏覽器支援：
Input type IE Firefox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
autofocus No No 10.0 3.0 4.0
form No No 9.5 No No
form overrides No No 10.5 No No
height and width 8.0 3.5 9.5 3.0 4.0
list No No 9.5 No No
min, max and step No No 9.5 3.0 No
multiple No 3.5 No 3.0 4.0
novalidate No No No No No
pattern No No 9.5 3.0 No
placeholder No No No 3.0 3.0
required No No 9.5 3.0 No
3.autocomplete 屬性：
（1）autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能
（2）autocomplete 適用於 標籤，以及以下型別的 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color
（3）當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
4.autofocus 屬性：
（1）autofocus 屬性規定在頁面載入時，域自動地獲得焦點。
（2）autofocus 屬性適用於所有 標籤的型別
（3）程式碼示例：
User name: <input type="text" name="user_name" autofocus="autofocus" />
5.form 屬性：
（1）form 屬性規定輸入域所屬的一個或多個表單
（2）form 屬性適用於所有 標籤的型別
（3）form 屬性必須引用所屬表單的 id
（4）程式碼示例：
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
6.表單重寫屬性：
（1）表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定
（2）表單重寫屬性有：
formaction - 重寫表單的 action 屬性
formenctype - 重寫表單的 enctype 屬性
formmethod - 重寫表單的 method 屬性
formnovalidate - 重寫表單的 novalidate 屬性
formtarget - 重寫表單的 target 屬性
（3）表單重寫屬性適用於以下型別的 標籤：submit 和 image
（4）程式碼示例：
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
7.height 和 width 屬性：
（1）height 和 width 屬性規定用於 image 型別的 input 標籤的影象高度和寬度
（2）height 和 width 屬性只適用於 image 型別的 標籤
（3）程式碼示例：
<input type="image" src="img_submit.gif" width="99" height="99" />
8.list 屬性：
（1）list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表
（2）list 屬性適用於以下型別的 標籤：text, search, url, telephone, email, date pickers, number, range 以及 color。
（3）程式碼示例：
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
9.min、max 和 step 屬性：
（1）min、max 和 step 屬性用於為包含數字或日期的 input 型別規定限定（約束）
（2）max 屬性規定輸入域所允許的最大值。
min 屬性規定輸入域所允許的最小值。
step 屬性為輸入域規定合法的數字間隔（如果 step=“3”，則合法的數是 -3,0,3,6 等）
（3）min、max 和 step 屬性適用於以下型別的 標籤：date pickers、number 以及 range
（4）程式碼例項：
Points: <input type="number" name="points" min="0" max="10" step="3" />
10.multiple 屬性：
（1）multiple 屬性規定輸入域中可選擇多個值
（2）multiple 屬性適用於以下型別的 標籤：email 和 file
（3）程式碼例項：
Select images: <input type="file" name="img" multiple="multiple" />
11.novalidate 屬性：
（1）novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域
（2）novalidate 屬性適用於 以及以下型別的 標籤：text, search, url, telephone, email, password, date pickers, range 以及 color.
（3）程式碼示例：
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
12.pattern 屬性：
（1）pattern 屬性規定用於驗證 input 域的模式（pattern）
（2）模式（pattern） 是正則表示式
（3）pattern 屬性適用於以下型別的 標籤：text, search, url, telephone, email 以及 password
（4）下面的例子顯示了一個只能包含三個字母的文字域（不含數字及特殊字元）：
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
13.placeholder 屬性：
（1）placeholder 屬性提供一種提示（hint），描述輸入域所期待的值
（2）placeholder 屬性適用於以下型別的 標籤：text, search, url, telephone, email 以及 password。
（3）提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：
<input type="search" name="user_search" placeholder="Search W3School" />
14.required 屬性：
（1）required 屬性規定必須在提交之前填寫輸入域（不能為空）
（2）required 屬性適用於以下型別的 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file
（3）程式碼示例：
Name: <input type="text" name="usr_name" required="required" />