New features of html5: 1. Canvas element for painting; 2. Video and audio elements for media playback; 3. Better support for local offline storage; 4. New special content Elements, such as article, header, nav, etc.; 5. New form controls, such as date, time, etc.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

1. HTML5 concept:

1. What is HTML5:

(1) HTML5 will become the new standard for HTML, XHTML and HTML DOM;

(2) HTML5 is still being improved. However, most modern browsers already have some HTML5 support.

2. The start of HTML5:

(1) HTML5 is the result of the cooperation between W3C (World Wide Web Consortium, World Wide Web Consortium) and WHATWG

(2) Some rules established for HTML5:

a. New features should be based on HTML, CSS, DOM and JavaScript

b. Reduce the need for external plug-ins (such as Flash)

c. Better error handling

d. More markup to replace scripts

e. HTML5 should be device independent

f. The development process should be transparent to the public

3. New features:

(1) canvas element for painting

(2) video and audio elements for media playback

(3) Better support for local offline storage

(4) New special content elements, such as article, footer, header, nav, section

( 5) New form controls, such as calendar, date, time, email, url, search

2. HTML5 video:

1. Videos on the Web:

(1) Most videos are displayed through plug-ins (such as Flash). However, not all browsers have the same plug-ins

(2) HTML5 specifies a standard method to include videos through the video element

2. Video format:

(1) Ogg format:

Ogg files with Theora video encoding and Vorbis audio encoding

(2) MPEG4 format:

MPEG 4 files with H.264 video encoding and AAC audio encoding

(3) WebM format:

WebM file with VP8 video encoding and Vorbis audio encoding

3. How to work:

(1) Sample code:

<video src="movie.ogg" controls="controls">...</video>

(2) The controls attribute is used to add play, pause and volume controls. Width and height can be added. The content inserted between is for display by browsers that do not support the video element. The

(3) video element allows multiple source elements. The source element can link different video files. The browser will use the first recognized format:

		<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. Each browser’s support for different formats:

format 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. Attributes of the tag:

Attribute Value Description

autoplay autoplay If this attribute appears, the video will be played immediately after it is ready

controls controls If this attribute appears, then Display controls to the user, such as the play button

Height pixels Set the height of the video player

loop loop If this attribute appears, the media file will start playing again after it finishes playing

preload preload If this attribute appears, the video will be loaded when the page loads and is ready to be played. If "autoplay" is used, this attribute is ignored

src url The URL of the video to be played

width pixels Set the width of the video player

3. HTML 5 Video DOM:

1. Use DOM for control:

(1) HTML5 elements also have methods, Properties and events;

(2) method is used for playing, pausing, loading, etc. The properties (such as duration, volume, etc.) can be read or set. The DOM events can notify you, for example, that the element starts playing, has been paused, has stopped, etc.

2. Methods, properties and events:

Method Property Event

play() currentSrc play

pause() currentTime pause

load() videoWidth progress

canPlayType videoHeight error

Duration timeupdate

seeking waiting

volume loadedmetadata

height

width

在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用

四.HTML5 音頻:

1、Web 上的音頻:

（1）大多數(shù)音頻是通過(guò)插件（比如 Flash）來(lái)播放的。然而，并非所有瀏覽器都擁有同樣的插件

（2）HTML5 規(guī)定了一種通過(guò) audio 元素來(lái)包含音頻的標(biāo)準(zhǔn)方法

（3）audio 元素能夠播放聲音文件或者音頻流

2.audio 元素支持的三種音頻格式：

IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis √ √ √

MP3 √ √ √

Wav √ √ √

3.如何工作：

（1）示例代碼：

（2）control 屬性供添加播放、暫停和音量控件， 與 之間插入的內(nèi)容是供不支持 audio 元素的瀏覽器顯示的

（3）audio 元素允許多個(gè) source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式：

		<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） 標(biāo)簽的屬性：

屬性 值 描述

autoplay autoplay 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放

controls controls 如果出現(xiàn)該屬性，則向用戶(hù)顯示控件，比如播放按鈕

loop loop 如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放

preload preload 如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性

src url 要播放的音頻的 URL

五.HTML5 拖放：

1.拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分：

（1）拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置

（2）在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放

2.拖動(dòng)相關(guān)設(shè)置：

（1）設(shè)置元素為可拖放：

首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：

<img draggable="true" />

（2）規(guī)定拖動(dòng)元素：

ondragstart 和 setData()

ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)

dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類(lèi)型和值：

function drag(ev){
	ev.dataTransfer.setData("Text",ev.target.id);
}

數(shù)據(jù)類(lèi)型是 “Text”，值是可拖動(dòng)元素的 id (“drag1”)

（3）放到何處 - ondragover：

ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)；

默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。

調(diào)用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

（4）進(jìn)行放置 - ondrop：

當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件；

ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：

			function drop(ev)
			{
				ev.preventDefault();
				var data=ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(data));
			}

（5）注意點(diǎn)：

a.調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）

b.通過(guò) dataTransfer.getData(“Text”) 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類(lèi)型的任何數(shù)據(jù)

c.被拖數(shù)據(jù)是被拖元素的 id (“drag1”)

d.把被拖元素追加到放置元素（目標(biāo)元素）中

3.拖動(dòng)示例代碼：

	<!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 在網(wǎng)頁(yè)上繪制圖像

（2）畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素

（3）canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

2.創(chuàng)建canvas元素：

示例代碼：

<canvas id="myCanvas" width="200" height="100"></canvas>

3. 通過(guò) JavaScript 來(lái)繪制：

（1）canvas 元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：

		<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") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

（2）使用 id 來(lái)尋找 canvas 元素，然后，創(chuàng)建 context 對(duì)象，然后進(jìn)行繪制

（3）fillRect 方法擁有參數(shù) (0,0,150,75)：

在畫(huà)布上繪制 150x75 的矩形，從左上角開(kāi)始 (0,0)

（4）可以通過(guò)canvas繪制出點(diǎn)、線(xiàn)條、圓、漸變背景、圖像

七.內(nèi)聯(lián) SVG：

1.什么是SVG:

（1）SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

（2）SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形

（3）SVG 使用 XML 格式定義圖形

（4）SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失

（5）SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)

2.SVG 的優(yōu)勢(shì)：

（1）SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改

（2）SVG 圖像可被搜索、索引、腳本化或壓縮

（3）SVG 是可伸縮的

（4）SVG 圖像可在任何的分辨率下被高質(zhì)量地打印

（5）SVG 可在圖像質(zhì)量不下降的情況下被放大

3.把 SVG 直接嵌入 HTML 頁(yè)面：

	<!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 圖形的語(yǔ)言

（2）SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器

（3）在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形

2.Canvas：

（1）Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形

（2）Canvas 是逐像素進(jìn)行渲染的。

（3）在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象

3.Canvas 與 SVG 的比較：

（1）Canvas：

依賴(lài)分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結(jié)果圖像

最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪

（2）SVG：

不依賴(lài)分辨率

支持事件處理器

最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）

復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快）

不適合游戲應(yīng)用

九.地理定位：

1.定位用戶(hù)的位置：

（1）HTML5 Geolocation API 用于獲得用戶(hù)的地理位置

（2）鑒于該特性可能侵犯用戶(hù)的隱私，除非用戶(hù)同意，否則用戶(hù)位置信息是不可用的

2.使用地理定位：

（1）使用 getCurrentPosition() 方法來(lái)獲得用戶(hù)的位置

（2）返回用戶(hù)位置的經(jīng)度和緯度的代碼示例：

		<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）示例代碼解釋?zhuān)?/p>

檢測(cè)是否支持地理定位

如果支持，則運(yùn)行 getCurrentPosition() 方法。如果不支持，則向用戶(hù)顯示一段消息

如果getCurrentPosition()運(yùn)行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對(duì)象

showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度

3.處理錯(cuò)誤和拒絕：

（1）getCurrentPosition() 方法的第二個(gè)參數(shù)用于處理錯(cuò)誤。它規(guī)定當(dāng)獲取用戶(hù)位置失敗時(shí)運(yùn)行的函數(shù)

（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）錯(cuò)誤代碼：

Permission denied - 用戶(hù)不允許地理定位

Position unavailable - 無(wú)法獲取當(dāng)前位置

Timeout - 操作超時(shí)

4.在地圖中顯示結(jié)果：

（1）如需在地圖中顯示結(jié)果，您需要訪(fǎng)問(wèn)可使用經(jīng)緯度的地圖服務(wù)，比如谷歌地圖或百度地圖

（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=&#39;"+img_url+"&#39; />";
		}

5.getCurrentPosition() 方法 - 返回?cái)?shù)據(jù)：

（1）若成功，則 getCurrentPosition() 方法返回對(duì)象。始終會(huì)返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會(huì)返回其他下面的屬性

（2）屬性：

		屬性							描述

		coords.latitude				十進(jìn)制數(shù)的緯度

		coords.longitude				十進(jìn)制數(shù)的經(jīng)度

		coords.accuracy				位置精度

		coords.altitude				海拔，海平面以上以米計(jì)

		coords.altitudeAccuracy		位置的海拔精度

		coords.heading				方向，從正北開(kāi)始以度計(jì)

		coords.speed				速度，以米/每秒計(jì)

		timestamp					響應(yīng)的日期/時(shí)間

6.Geolocation 對(duì)象 - 其他有趣的方法：

（1）watchPosition() - 返回用戶(hù)的當(dāng)前位置，并繼續(xù)返回用戶(hù)移動(dòng)時(shí)的更新位置（就像汽車(chē)上的 GPS）

（2）clearWatch() - 停止 watchPosition() 方法

十. Web 存儲(chǔ)：

1.在客戶(hù)端存儲(chǔ)數(shù)據(jù)：

（1）HTML5 提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法：

localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

（2）之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得 cookie 速度很慢而且效率也不高

（3）在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能

（4）對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪(fǎng)問(wèn)其自身的數(shù)據(jù)

（5）HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪(fǎng)問(wèn)數(shù)據(jù)

2.localStorage 方法：

（1）localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用

（2）如何創(chuàng)建和訪(fǎng)問(wèn) localStorage：

		<script type="text/javascript">
			localStorage.lastname="Smith";
			document.write(localStorage.lastname);
		</script>

（3）對(duì)用戶(hù)訪(fǎng)問(wèn)頁(yè)面的次數(shù)進(jìn)行計(jì)數(shù)的例子：

		<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 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶(hù)關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除

（2）如何創(chuàng)建并訪(fǎng)問(wèn)一個(gè) sessionStorage：

		<script type="text/javascript">
			sessionStorage.lastname="Smith";
			document.write(sessionStorage.lastname);
		</script>

（3）對(duì)用戶(hù)在當(dāng)前 session 中訪(fǎng)問(wèn)頁(yè)面的次數(shù)進(jìn)行計(jì)數(shù)的例子：

		<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 應(yīng)用程序緩存：

1.什么是應(yīng)用程序緩存：

（1）HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒(méi)有因特網(wǎng)連接時(shí)進(jìn)行訪(fǎng)問(wèn)

（2）應(yīng)用程序緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：

a.離線(xiàn)瀏覽 - 用戶(hù)可在應(yīng)用離線(xiàn)時(shí)使用它們

b.速度 - 已緩存資源加載得更快

c.減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。

（3）使用 HTML5，通過(guò)創(chuàng)建 cache manifest 文件，可以輕松地創(chuàng)建 web 應(yīng)用的離線(xiàn)版本

2.HTML5 Cache Manifest 實(shí)例:

帶有 cache manifest 的 HTML 文檔（供離線(xiàn)瀏覽）的示例：

		<!DOCTYPE HTML>
		<html manifest="demo.appcache">
		<body>
		The content of the document......
		</body>
		</html>

3.Cache Manifest 基礎(chǔ)：

（1）如需啟用應(yīng)用程序緩存，在文檔的 標(biāo)簽中包含 manifest 屬性

（2）manifest 文件的建議的文件擴(kuò)展名是：".appcache"

（3）manifest 文件需要配置正確的 MIME-type，即 “text/cache-manifest”。必須在 web 服務(wù)器上進(jìn)行配置

4.Manifest 文件：

（1）manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）

（2）manifest 文件可分為三個(gè)部分：

a.CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

b.NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

c.FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪(fǎng)問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）

（3）CACHE MANIFEST:

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

manifest 文件列出了三個(gè)資源：一個(gè) CSS 文件，一個(gè) GIF 圖像，以及一個(gè) JavaScript 文件。當(dāng) manifest 文件加載后，瀏覽器會(huì)從網(wǎng)站的根目錄下載這三個(gè)文件。然后，無(wú)論用戶(hù)何時(shí)與因特網(wǎng)斷開(kāi)連接，這些資源依然是可用的

（4）NETWORK：

NETWORK 小節(jié)規(guī)定文件 “l(fā)ogin.asp” 永遠(yuǎn)不會(huì)被緩存，且離線(xiàn)時(shí)是不可用的：

NETWORK:
login.asp

可以使用星號(hào)來(lái)指示所有其他資源/文件都需要因特網(wǎng)連接：

NETWORK:
*

（5）FALLBACK：

FALLBACK 小節(jié)規(guī)定如果無(wú)法建立因特網(wǎng)連接，則用 “offline.html” 替代 /html5/ 目錄中的所有文件：

FALLBACK:
/html5/ /404.html

第一個(gè) URI 是資源，第二個(gè)是替補(bǔ)

5.更新緩存：

（1）一旦應(yīng)用被緩存，它就會(huì)保持緩存直到發(fā)生下列情況：

a.用戶(hù)清空瀏覽器緩存

b.manifest 文件被修改（參閱下面的提示）

c.由程序來(lái)更新應(yīng)用緩存

（2）完整的 Manifest 文件：

		CACHE MANIFEST
		# 2012-02-21 v1.0.0
		/theme.css
		/logo.gif
		/main.js

		NETWORK:
		login.asp

		FALLBACK:
		/html5/ /404.html

（3）以 “#” 開(kāi)頭的是注釋行，但也可滿(mǎn)足其他用途。應(yīng)用的緩存會(huì)在其 manifest 文件更改時(shí)被更新

（4）如果您編輯了一幅圖片，或者修改了一個(gè) JavaScript 函數(shù)，這些改變都不會(huì)被重新緩存。更新注釋行中的日期和版本號(hào)是一種使瀏覽器重新緩存文件的辦法。

6.關(guān)于應(yīng)用程序緩存的注釋?zhuān)?/strong>

（1）一旦文件被緩存，則瀏覽器會(huì)繼續(xù)展示已緩存的版本，即使您修改了服務(wù)器上的文件。為了確保瀏覽器更新緩存，您需要更新 manifest 文件

（2）瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣

十二.Web Workers：

1.什么是 Web Worker：

（1）web worker 是運(yùn)行在后臺(tái)的 JavaScript，不會(huì)影響頁(yè)面的性能

（2）當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)，頁(yè)面的狀態(tài)是不可響應(yīng)的，直到腳本已完成
（3）web worker 是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(yùn)行

2.HTML5 Web Workers 實(shí)例：

（1）檢測(cè) Web Worker 支持：

在創(chuàng)建 web worker 之前，請(qǐng)檢測(cè)用戶(hù)的瀏覽器是否支持它：

			if(typeof(Worker)!=="undefined")
			{
			// Yes! Web worker support!
			// Some code.....
			}
			else
			{
			// Sorry! No Web Worker support..
			}

（2）創(chuàng)建 web worker 文件：

在一個(gè)外部 JavaScript 中創(chuàng)建我們的 web worker

我們創(chuàng)建了計(jì)數(shù)腳本。該腳本存儲(chǔ)于 “demo_workers.js” 文件中：

		var i=0;

		function timedCount()
		{
			i=i+1;
			postMessage(i);
			setTimeout("timedCount()",500);
		}
		timedCount();

（3）創(chuàng)建 Web Worker 對(duì)象：
下面的代碼檢測(cè)是否存在 worker，如果不存在，- 它會(huì)創(chuàng)建一個(gè)新的 web worker 對(duì)象，然后運(yùn)行 “demo_workers.js” 中的代碼：

			if(typeof(w)=="undefined")
			{
				w=new Worker("demo_workers.js");
			  }

然后我們就可以從 web worker 發(fā)生和接收消息了。向 web worker 添加一個(gè) “onmessage” 事件監(jiān)聽(tīng)器：

			w.onmessage=function(event){
				document.getElementById("result").innerHTML=event.data;
			};

（4）終止 Web Worker：

當(dāng)我們創(chuàng)建 web worker 對(duì)象后，它會(huì)繼續(xù)監(jiān)聽(tīng)消息（即使在外部腳本完成之后）直到其被終止為止。

如需終止 web worker，并釋放瀏覽器/計(jì)算機(jī)資源，請(qǐng)使用 terminate() 方法：

w.terminate();

3.Web Workers 和 DOM：

由于 web worker 位于外部文件中，它們無(wú)法訪(fǎng)問(wèn)下例 JavaScript 對(duì)象：

window 對(duì)象、document 對(duì)象、parent 對(duì)象

十三.服務(wù)器發(fā)送事件：

1.Server-Sent 事件 - 單向消息傳遞：

（1）Server-Sent 事件指的是網(wǎng)頁(yè)自動(dòng)獲取來(lái)自服務(wù)器的更新

（2）以前也可能做到這一點(diǎn)，前提是網(wǎng)頁(yè)不得不詢(xún)問(wèn)是否有可用的更新。通過(guò)服務(wù)器發(fā)送事件，更新能夠自動(dòng)到達(dá)。

例子：Facebook/Twitter 更新、估價(jià)更新、新的博文、賽事結(jié)果等。

（3）HTML5 服務(wù)器發(fā)送事件（server-sent event）允許網(wǎng)頁(yè)獲得來(lái)自服務(wù)器的更新

2.接收 Server-Sent 事件通知：

（1）EventSource 對(duì)象用于接收服務(wù)器發(fā)送事件通知：

		var source=new EventSource("demo_sse.php");
		source.onmessage=function(event)
		{
			document.getElementById("result").innerHTML+=event.data + "<br />";
		};

（2）例子解釋?zhuān)?/p>

創(chuàng)建一個(gè)新的 EventSource 對(duì)象，然后規(guī)定發(fā)送更新的頁(yè)面的 URL（本例中是 “demo_sse.php”）

每接收到一次更新，就會(huì)發(fā)生 onmessage 事件

當(dāng) onmessage 事件發(fā)生時(shí)，把已接收的數(shù)據(jù)推入 id 為 “result” 的元素中

3.檢測(cè) Server-Sent 事件支持：

檢測(cè)服務(wù)器發(fā)送事件的瀏覽器支持情況：

	事件				描述

	onopen			當(dāng)通往服務(wù)器的連接被打開(kāi)

	onmessage		當(dāng)接收到消息

	onerror			當(dāng)錯(cuò)誤發(fā)生

十四.Input 類(lèi)型：

1.新的 Input 類(lèi)型：

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 類(lèi)型 - email：

（1）email 類(lèi)型用于應(yīng)該包含 e-mail 地址的輸入域，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 email 域的值

（2）代碼示例：

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

4.Input 類(lèi)型 - url:

（1）url 類(lèi)型用于應(yīng)該包含 URL 地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 url 域的值

（2）代碼示例：

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

5.Input 類(lèi)型 - number：

（1）number 類(lèi)型用于應(yīng)該包含數(shù)值的輸入域。您還能夠設(shè)定對(duì)所接受的數(shù)字的限定

（2）示例代碼：

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

（3）下面的屬性來(lái)規(guī)定對(duì)數(shù)字類(lèi)型的限定：

		屬性			值			描述

		max			number		規(guī)定允許的最大值

		min			number		規(guī)定允許的最小值

		step		number		規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）

		value		number		規(guī)定默認(rèn)值

6.Input 類(lèi)型 - range：

（1）range 類(lèi)型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域，range 類(lèi)型顯示為滑動(dòng)條，您還能夠設(shè)定對(duì)所接受的數(shù)字的限定

（2）代碼示例：

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

7.Input 類(lèi)型 - Date Pickers（日期選擇器）：

（1）HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類(lèi)型：

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時(shí)間（小時(shí)和分鐘）

datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間）

datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）

（2）代碼示例：

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

8.Input 類(lèi)型 - search：

（1）search 類(lèi)型用于搜索域，比如站點(diǎn)搜索或 Google 搜索。

（2）search 域顯示為常規(guī)的文本域

十五.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 元素規(guī)定輸入域的選項(xiàng)列表，列表是通過(guò) datalist 內(nèi)的 option 元素創(chuàng)建的；

（2）如需把 datalist 綁定到輸入域，請(qǐng)用輸入域的 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 元素永遠(yuǎn)都要設(shè)置 value 屬性

4.keygen 元素：

（1）keygen 元素的作用是提供一種驗(yàn)證用戶(hù)的可靠方法

（2）keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰，一個(gè)公鑰

私鑰（private key）存儲(chǔ)于客戶(hù)端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后驗(yàn)證用戶(hù)的客戶(hù)端證書(shū)（client certificate）。

（3）目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。

（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 元素用于不同類(lèi)型的輸出，比如計(jì)算或腳本輸出：

（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 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能

（2）autocomplete 適用于 標(biāo)簽，以及以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color

（3）當(dāng)用戶(hù)在自動(dòng)完成域中開(kāi)始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫(xiě)的選項(xiàng)：

		<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 屬性規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。

（2）autofocus 屬性適用于所有 標(biāo)簽的類(lèi)型

（3）代碼示例：

		User name: <input type="text" name="user_name"  autofocus="autofocus" />

5.form 屬性：

（1）form 屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單

（2）form 屬性適用于所有 標(biāo)簽的類(lèi)型

（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.表單重寫(xiě)屬性：

（1）表單重寫(xiě)屬性（form override attributes）允許您重寫(xiě) form 元素的某些屬性設(shè)定

（2）表單重寫(xiě)屬性有：

formaction - 重寫(xiě)表單的 action 屬性

formenctype - 重寫(xiě)表單的 enctype 屬性

formmethod - 重寫(xiě)表單的 method 屬性

formnovalidate - 重寫(xiě)表單的 novalidate 屬性

formtarget - 重寫(xiě)表單的 target 屬性

（3）表單重寫(xiě)屬性適用于以下類(lèi)型的 標(biāo)簽：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 屬性規(guī)定用于 image 類(lèi)型的 input 標(biāo)簽的圖像高度和寬度

（2）height 和 width 屬性只適用于 image 類(lèi)型的 標(biāo)簽

（3）代碼示例：

<input type="image" src="img_submit.gif" width="99" height="99" />

8.list 屬性：

（1）list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項(xiàng)列表

（2）list 屬性適用于以下類(lèi)型的 標(biāo)簽：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 屬性用于為包含數(shù)字或日期的 input 類(lèi)型規(guī)定限定（約束）

（2）max 屬性規(guī)定輸入域所允許的最大值。

min 屬性規(guī)定輸入域所允許的最小值。

step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果 step=“3”，則合法的數(shù)是 -3,0,3,6 等）

（3）min、max 和 step 屬性適用于以下類(lèi)型的 標(biāo)簽：date pickers、number 以及 range

（4）代碼實(shí)例：

Points: <input type="number" name="points" min="0" max="10" step="3" />

10.multiple 屬性：

（1）multiple 屬性規(guī)定輸入域中可選擇多個(gè)值

（2）multiple 屬性適用于以下類(lèi)型的 標(biāo)簽：email 和 file

（3）代碼實(shí)例：

Select images: <input type="file" name="img" multiple="multiple" />

11.novalidate 屬性：

（1）novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域

（2）novalidate 屬性適用于 以及以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email, password, date pickers, range 以及 color.

（3）代碼示例：

		

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

12.pattern 屬性：

（1）pattern 屬性規(guī)定用于驗(yàn)證 input 域的模式（pattern）

（2）模式（pattern） 是正則表達(dá)式

（3）pattern 屬性適用于以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email 以及 password

（4）下面的例子顯示了一個(gè)只能包含三個(gè)字母的文本域（不含數(shù)字及特殊字符）：

		Country code: <input type="text" name="country_code"
		pattern="[A-z]{3}" title="Three letter country code" />

13.placeholder 屬性：

（1）placeholder 屬性提供一種提示（hint），描述輸入域所期待的值

（2）placeholder 屬性適用于以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email 以及 password。

（3）提示（hint）會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，會(huì)在輸入域獲得焦點(diǎn)時(shí)消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

14.required 屬性：

（1）required 屬性規(guī)定必須在提交之前填寫(xiě)輸入域（不能為空）

（2）required 屬性適用于以下類(lèi)型的 標(biāo)簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

（3）代碼示例：

Name: <input type="text" name="usr_name" required="required" />

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程視頻??！

The above is the detailed content of What are the new features of html5. For more information, please follow other related articles on the PHP Chinese website!