html5中新增了哪些新特性

小編給大家分享一下html5中新增了哪些新特性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

html5的新特性：1、用于繪畫的canvas元素；2、用于媒介回放的video和audio元素；3、對本地離線存儲的更好的支持；4、新的特殊內容元素，比如article、header、nav等；5、新的表單控件，比如date、time等。

一、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 事件支持：

檢測服務器發送事件的瀏覽器支持情況：

	事件				描述

	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" />

以上是“html5中新增了哪些新特性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！