<source id="uuuae"><button id="uuuae"></button></source>
  • <table id="uuuae"><button id="uuuae"></button></table>
  • <fieldset id="uuuae"></fieldset>
  • \n\n\t<\/div>\n\t\n\n\t<\/body>\n\t<\/html><\/pre>

    六.Canvas:<\/strong><\/span><\/p>

    1.什么是Canvas:<\/strong><\/p>

    (1)HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像<\/p>

    (2)畫布是一個矩形區(qū)域,您可以控制其每一像素<\/p>

    (3)canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法<\/p>

    2.創(chuàng)建canvas元素:<\/strong><\/p>

    示例代碼:<\/p>

    <\/canvas><\/pre>

    3. 通過 JavaScript 來繪制:<\/strong><\/p>

    (1)canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成:<\/p>

    \t\t
    	
    
    
    
    
    
    
    

    国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

    ? ? ????? H5 ???? html5? ??? ??? ?????

    html5? ??? ??? ?????

    Mar 30, 2021 pm 01:44 PM
    html5

    HTML5? ??? ??: 1. ???? ?? ??? ?? 2. ??? ??? ?? ??? ? ??? ?? 3. ?? ???? ??? ?? ?? ?? 4. ??, ??, ?? ?? ?? ??? ?? ??? ?? 5. ??, ?? ?? ?? ??? ?? ???

    html5? ??? ??? ?????

    ? ????? ?? ??: Windows 7 ???, HTML5 ??, Dell G3 ???.

    1. HTML5 ??:

    1. HTML5? ?????:

    (1) HTML5? HTML, XHTML ? HTML DOM? ??? ??? ? ????.

    (2) HTML5? ?? ?? ????. . ??? ???? ?? ?????? ?? HTML5? ?? ???? ????.

    2. HTML5? ??:

    (1) HTML5? W3C(World Wide Web Consortium, World Wide Web Consortium)? WHATWG ?? ??? ?????.

    (2) HTML5? ?? ??? ? ?? ??:

    a. ??? ??? HTML, CSS, DOM ? JavaScript? ???? ?? ???.

    b. ?? ????(Flash ?)? ???? ????.

    c. ? ?? ?? ??

    d.

    e. HTML5? ????? ?????? ???.

    f. ?? ????? ???? ???? ???.

    3. ??? ??:

    (1) ???? ?? ??? ??

    (2) ??? ? ??? ?? ??? ??

    (3) ? ?? ???? ???? ?? ? ?? ??

    (4) ??, ???, ???, ??, ??? ?? ??? ?? ??? ??

    (5) ??, ??, time, email, url, search

    2. HTML5 ???:

    1. ??? ???:

    (1) ???? ???? ????(?: Flash)? ?? ?????, ?? ????? ??? ????? ?? ?? ????.

    (2) HTML5? ??? ??? ?? ???? ???? ?? ??? ?????.

    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) ??? ??? ??, ?? ?? ? ?? ???? ???? ? ?????. ??? ??? ???? ???? ????.

    (3) ??? ??? ??? ??? ????? ???? ?? ?? ??? ?????. ?? ??? ??? ??? ??? ??? ? ????. ????? ? ?? ?? ???

    		<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? ?????. ? ????? ??? ?? ??:

    Format IE Firefox Opera Chrome Safari

    Ogg ??? 3.5+ 10.5+ 5.0+ ???

    ? ? ? ? ? ? ? ? ? ? ? ?> ? ??? ???? ??? ?? ??

    ??? ??? ?? ?? ? ??? ???? ?? ??? ?? ???? ????? ?????.

    ?? ?? ??? ????? ?? ??

    ?? ?? ? ??? ???? ??? ??? ??? ?? ? ?? ??? ?????.

    preload preload ? ??? ???? ???? ???? ??? ??? ?? ???? ?????. "autoplay"? ???? ? ??? ?????.

    src url ??? ???? URL

    ?? ?? ??? ????? ?? ??

    3. HTML 5 ??? + DOM:

    1. ??? ?? DOM ??:

    (1) HTML5 ???? ???, ?? ? ???? ????.

    (2) ???? ??, ?? ??, ?? ?? ?????. ??(?: ??, ?? ?)? ??? ??? ? ????. DOM ???? ?? ?? ??? 2 ?? ??, ?? ??, ?? ? ???? ????? ??? ? ????. ???, ?? ? ??? Pause() Currenttime Pause

    Load() Videowidth Progress CanplayType VideoHeht ??

    ?? ?? ????

    ??? EERROR ??

    ?? ??? ?? ?? Mut ED EMPTIEDm

    seeking waiting

    volume loadedmetadata

    height

    width

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

    四.HTML5 音頻:

    1、Web 上的音頻:

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

    (2)HTML5 規(guī)定了一種通過 audio 元素來包含音頻的標(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 元素允許多個 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) 標(biāo)簽的屬性:

    屬性 值 描述

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

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

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

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

    src url 要播放的音頻的 URL

    五.HTML5 拖放:

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

    (1)拖放是一種常見的特性,即抓取對象以后拖到另一個位置

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

    2.拖動相關(guān)設(shè)置:

    (1)設(shè)置元素為可拖放:

    首先,為了使元素可拖動,把 draggable 屬性設(shè)置為 true :

    <img draggable="true" />

    (2)規(guī)定拖動元素:

    ondragstart 和 setData()

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

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

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

    數(shù)據(jù)類型是 “Text”,值是可拖動元素的 id (“drag1”)

    (3)放到何處 - ondragover:

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

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

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

    event.preventDefault()

    (4)進行放置 - ondrop:

    當(dāng)放置被拖數(shù)據(jù)時,會發(fā)生 drop 事件;

    ondrop 屬性調(diào)用了一個函數(shù),drop(event):

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

    (5)注意點:

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

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

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

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

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

    (2)畫布是一個矩形區(qū)域,您可以控制其每一像素

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

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

    示例代碼:

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

    3. 通過 JavaScript 來繪制:

    (1)canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 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") 對象是內(nèi)建的 HTML5 對象,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

    (2)使用 id 來尋找 canvas 元素,然后,創(chuàng)建 context 對象,然后進行繪制

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

    在畫布上繪制 150x75 的矩形,從左上角開始 (0,0)

    (4)可以通過canvas繪制出點、線條、圓、漸變背景、圖像

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

    1.什么是SVG:

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

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

    (3)SVG 使用 XML 格式定義圖形

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

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

    2.SVG 的優(yōu)勢:

    (1)SVG 圖像可通過文本編輯器來創(chuàng)建和修改

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

    (3)SVG 是可伸縮的

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

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

    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 對象的屬性發(fā)生變化,那么瀏覽器能夠自動重現(xiàn)圖形

    2.Canvas:

    (1)Canvas 通過 JavaScript 來繪制 2D 圖形

    (2)Canvas 是逐像素進行渲染的。

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

    3.Canvas 與 SVG 的比較:

    (1)Canvas:

    依賴分辨率

    不支持事件處理器

    弱的文本渲染能力

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

    最適合圖像密集型的游戲,其中的許多對象會被頻繁重繪

    (2)SVG:

    不依賴分辨率

    支持事件處理器

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

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

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

    九.地理定位:

    1.定位用戶的位置:

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

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

    2.使用地理定位:

    (1)使用 getCurrentPosition() 方法來獲得用戶的位置

    (2)返回用戶位置的經(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)示例代碼解釋:

    檢測是否支持地理定位

    如果支持,則運行 getCurrentPosition() 方法。如果不支持,則向用戶顯示一段消息

    如果getCurrentPosition()運行成功,則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象

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

    3.處理錯誤和拒絕:

    (1)getCurrentPosition() 方法的第二個參數(shù)用于處理錯誤。它規(guī)定當(dāng)獲取用戶位置失敗時運行的函數(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)錯誤代碼:

    Permission denied - 用戶不允許地理定位

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

    Timeout - 操作超時

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

    (1)如需在地圖中顯示結(jié)果,您需要訪問可使用經(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() 方法 - 返回數(shù)據(jù):

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

    (2)屬性:

    		屬性							描述
    
    		coords.latitude				十進制數(shù)的緯度
    
    		coords.longitude				十進制數(shù)的經(jīng)度
    
    		coords.accuracy				位置精度
    
    		coords.altitude				海拔,海平面以上以米計
    
    		coords.altitudeAccuracy		位置的海拔精度
    
    		coords.heading				方向,從正北開始以度計
    
    		coords.speed				速度,以米/每秒計
    
    		timestamp					響應(yīng)的日期/時間

    6.Geolocation 對象 - 其他有趣的方法:

    (1)watchPosition() - 返回用戶的當(dāng)前位置,并繼續(xù)返回用戶移動時的更新位置(就像汽車上的 GPS)

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

    十. Web 存儲:

    1.在客戶端存儲數(shù)據(jù):

    (1)HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法:

    localStorage - 沒有時間限制的數(shù)據(jù)存儲

    sessionStorage - 針對一個 session 的數(shù)據(jù)存儲

    (2)之前,這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲,因為它們由每個對服務(wù)器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高

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

    (4)對于不同的網(wǎng)站,數(shù)據(jù)存儲于不同的區(qū)域,并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)

    (5)HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)

    2.localStorage 方法:

    (1)localStorage 方法存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后,數(shù)據(jù)依然可用

    (2)如何創(chuàng)建和訪問 localStorage:

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

    (3)對用戶訪問頁面的次數(shù)進行計數(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 方法針對一個 session 進行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器窗口后,數(shù)據(jù)會被刪除

    (2)如何創(chuàng)建并訪問一個 sessionStorage:

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

    (3)對用戶在當(dāng)前 session 中訪問頁面的次數(shù)進行計數(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)用可進行緩存,并可在沒有因特網(wǎng)連接時進行訪問

    (2)應(yīng)用程序緩存為應(yīng)用帶來三個優(yōu)勢:

    a.離線瀏覽 - 用戶可在應(yīng)用離線時使用它們

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

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

    (3)使用 HTML5,通過創(chuàng)建 cache manifest 文件,可以輕松地創(chuàng)建 web 應(yīng)用的離線版本

    2.HTML5 Cache Manifest 實例:

    帶有 cache manifest 的 HTML 文檔(供離線瀏覽)的示例:

    		<!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 文件的建議的文件擴展名是:".appcache"

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

    4.Manifest 文件:

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

    (2)manifest 文件可分為三個部分:

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

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

    c.FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面(比如 404 頁面)

    (3)CACHE MANIFEST:

    第一行,CACHE MANIFEST,是必需的:

    CACHE MANIFEST

    /theme.css

    /logo.gif

    /main.js

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

    (4)NETWORK:

    NETWORK 小節(jié)規(guī)定文件 “l(fā)ogin.asp” 永遠不會被緩存,且離線時是不可用的:

    NETWORK:
    login.asp

    可以使用星號來指示所有其他資源/文件都需要因特網(wǎng)連接:

    NETWORK:
    *

    (5)FALLBACK:

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

    FALLBACK:
    /html5/ /404.html

    第一個 URI 是資源,第二個是替補

    5.更新緩存:

    (1)一旦應(yīng)用被緩存,它就會保持緩存直到發(fā)生下列情況:

    a.用戶清空瀏覽器緩存

    b.manifest 文件被修改(參閱下面的提示)

    c.由程序來更新應(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)以 “#” 開頭的是注釋行,但也可滿足其他用途。應(yīng)用的緩存會在其 manifest 文件更改時被更新

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

    6.關(guān)于應(yīng)用程序緩存的注釋:

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

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

    十二.Web Workers:

    1.什么是 Web Worker:

    (1)web worker 是運行在后臺的 JavaScript,不會影響頁面的性能

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

    2.HTML5 Web Workers 實例:

    (1)檢測 Web Worker 支持:

    在創(chuàng)建 web worker 之前,請檢測用戶的瀏覽器是否支持它:

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

    (2)創(chuàng)建 web worker 文件:

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

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

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

    (3)創(chuàng)建 Web Worker 對象:
    下面的代碼檢測是否存在 worker,如果不存在,- 它會創(chuàng)建一個新的 web worker 對象,然后運行 “demo_workers.js” 中的代碼:

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

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

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

    (4)終止 Web Worker:

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

    如需終止 web worker,并釋放瀏覽器/計算機資源,請使用 terminate() 方法:

    w.terminate();

    3.Web Workers 和 DOM:

    由于 web worker 位于外部文件中,它們無法訪問下例 JavaScript 對象:

    window 對象、document 對象、parent 對象

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

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

    (1)Server-Sent 事件指的是網(wǎng)頁自動獲取來自服務(wù)器的更新

    (2)以前也可能做到這一點,前提是網(wǎng)頁不得不詢問是否有可用的更新。通過服務(wù)器發(fā)送事件,更新能夠自動到達。

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

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

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

    (1)EventSource 對象用于接收服務(wù)器發(fā)送事件通知:

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

    (2)例子解釋:

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

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

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

    3.檢測 Server-Sent 事件支持:

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

    	事件				描述
    
    	onopen			當(dāng)通往服務(wù)器的連接被打開
    
    	onmessage		當(dāng)接收到消息
    
    	onerror			當(dāng)錯誤發(fā)生

    十四.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 類型用于應(yīng)該包含 e-mail 地址的輸入域,在提交表單時,會自動驗證 email 域的值

    (2)代碼示例:

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

    4.Input 類型 - url:

    (1)url 類型用于應(yīng)該包含 URL 地址的輸入域。在提交表單時,會自動驗證 url 域的值

    (2)代碼示例:

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

    5.Input 類型 - number:

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

    (2)示例代碼:

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

    (3)下面的屬性來規(guī)定對數(shù)字類型的限定:

    		屬性			值			描述
    
    		max			number		規(guī)定允許的最大值
    
    		min			number		規(guī)定允許的最小值
    
    		step		number		規(guī)定合法的數(shù)字間隔(如果 step="3",則合法的數(shù)是 -3,0,3,6 等)
    
    		value		number		規(guī)定默認(rèn)值

    6.Input 類型 - range:

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

    (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 域顯示為常規(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ī)定輸入域的選項列表,列表是通過 datalist 內(nèi)的 option 元素創(chuàng)建的;

    (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 元素永遠都要設(shè)置 value 屬性

    4.keygen 元素:

    (1)keygen 元素的作用是提供一種驗證用戶的可靠方法

    (2)keygen 元素是密鑰對生成器(key-pair generator)。當(dāng)提交表單時,會生成兩個鍵,一個是私鑰,一個公鑰

    私鑰(private key)存儲于客戶端,公鑰(public key)則被發(fā)送到服務(wù)器。公鑰可用于之后驗證用戶的客戶端證書(client certificate)。

    (3)目前,瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標(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 元素用于不同類型的輸出,比如計算或腳本輸出:

    (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)該擁有自動完成功能

    (2)autocomplete 適用于 標(biāo)簽,以及以下類型的 標(biāo)簽:text, search, url, telephone, email, password, datepickers, range 以及 color

    (3)當(dāng)用戶在自動完成域中開始輸入時,瀏覽器應(yī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ī)定在頁面加載時,域自動地獲得焦點。

    (2)autofocus 屬性適用于所有 標(biāo)簽的類型

    (3)代碼示例:

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

    5.form 屬性:

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

    (2)form 屬性適用于所有 標(biāo)簽的類型

    (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 元素的某些屬性設(shè)定

    (2)表單重寫屬性有:

    formaction - 重寫表單的 action 屬性

    formenctype - 重寫表單的 enctype 屬性

    formmethod - 重寫表單的 method 屬性

    formnovalidate - 重寫表單的 novalidate 屬性

    formtarget - 重寫表單的 target 屬性

    (3)表單重寫屬性適用于以下類型的 標(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 類型的 input 標(biāo)簽的圖像高度和寬度

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

    (3)代碼示例:

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

    8.list 屬性:

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

    (2)list 屬性適用于以下類型的 標(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 類型規(guī)定限定(約束)

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

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

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

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

    (4)代碼實例:

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

    10.multiple 屬性:

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

    (2)multiple 屬性適用于以下類型的 標(biāo)簽:email 和 file

    (3)代碼實例:

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

    11.novalidate 屬性:

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

    (2)novalidate 屬性適用于 以及以下類型的 標(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ī)定用于驗證 input 域的模式(pattern)

    (2)模式(pattern) 是正則表達式

    (3)pattern 屬性適用于以下類型的 標(biāo)簽:text, search, url, telephone, email 以及 password

    (4)下面的例子顯示了一個只能包含三個字母的文本域(不含數(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 屬性適用于以下類型的 標(biāo)簽:text, search, url, telephone, email 以及 password。

    (3)提示(hint)會在輸入域為空時顯示出現(xiàn),會在輸入域獲得焦點時消失:

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

    14.required 屬性:

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

    (2)required 屬性適用于以下類型的 標(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)知識,請訪問:編程視頻??!

    ? ??? html5? ??? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!

    ? ????? ??
    ? ?? ??? ????? ???? ??? ??????, ???? ?????? ????. ? ???? ?? ???? ?? ??? ?? ????. ???? ??? ???? ???? ??? ?? admin@php.cn?? ?????.

    ? AI ??

    Undresser.AI Undress

    Undresser.AI Undress

    ???? ?? ??? ??? ?? AI ?? ?

    AI Clothes Remover

    AI Clothes Remover

    ???? ?? ???? ??? AI ?????.

    Video Face Swap

    Video Face Swap

    ??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!

    ???

    ??? ??

    ???++7.3.1

    ???++7.3.1

    ???? ?? ?? ?? ???

    SublimeText3 ??? ??

    SublimeText3 ??? ??

    ??? ??, ???? ?? ????.

    ???? 13.0.1 ???

    ???? 13.0.1 ???

    ??? PHP ?? ?? ??

    ???? CS6

    ???? CS6

    ??? ? ?? ??

    SublimeText3 Mac ??

    SublimeText3 Mac ??

    ? ??? ?? ?? ?????(SublimeText3)

    ???

    ??? ??

    ??? ????
    1601
    29
    PHP ????
    1502
    276
    ???
    HTML5 ??-??? ???? ?? ?? ? ??? ?????. HTML5 ??-??? ???? ?? ?? ? ??? ?????. Jul 03, 2025 am 02:28 AM

    HTML5SSE? ???? ?? ? ?? ? ??? ???? ???? ??? ?????. 1. ?? ? ?? ????? ??????. ??? ??? ????? ??? ?? ? ? 3 ? ?? ? ?????. ??? ??? ?? ??? ??? ?? ? ? ????. 2. ?? ???? ?? ?? ?? ?? ?? ?? ??? ???? ?? ??? ???? ?? ? ??? ???? ???? ??, ?? ?? ? ?? ?? ? ?? ?? TOKEN? ?? ?? ??? ?????. 3. ??? ???? ?? ????, ?? ??? ?? ?? ????, Navigator.online? ???? ??? ???? ?? ??? ????? ? ? ?? ??? ????? ??????. ??? ??? ?? ???? ???? ??? ??? ???? ? ????.

    CSS ? JavaScript? HTML5 ??? ????? ?????. CSS ? JavaScript? HTML5 ??? ????? ?????. Jul 12, 2025 am 03:01 AM

    HTML5, CSS ? JavaScript? ??? ??, ???? ?? ?? ? ???? ??? ????? ????????. 1. SEO ? ????? ???? ????? ??? ??? ? ?? ??? ??? ?? HTML5 ??? ??? ??????. 2. CSS? ???? ?? ??? ???? ???? ???? ??? ???? ????? ??? ?????. 3. JavaScript? ??? ???? ?? ???? DEFER ?? ASYNC? ???? ?? ???? ??? ?? ??? ????????. 4. ??? ??? ??? ???? ??? ??? ?? ? ??? ?? ?? ??? ?? ??? ???? ?? ?? ?? ??? ?? ?? ???? ??????. ??? ??? ??? ??? ????? ????? ?? ?? ? ? ????.

    ?? ???? ?? ??? HTML5 DocType? ?????. ?? ???? ?? ??? HTML5 DocType? ?????. Jul 03, 2025 am 02:35 AM

    DocType? HTML ?? ????? ???? ?? ???? ? ???? ????? ???? ????. ?? ? ???? HTML ??? ?? ????? ???????. ? ??? ????? ??? ??? ?? ?? ??? ???? ????? ? ?? ?? ???????. ?? ?? ??? ??? ?? ??? ?? ???? ?? ??? ???? ?? ????. Charset, Viewport ?? ?? ?? ??? ????? ???????.

    HTML5 Server-Sent Events (SSE)? ??? ???? ?????. HTML5 Server-Sent Events (SSE)? ??? ???? ?????. Jul 02, 2025 pm 04:46 PM

    SSE (Server-Sentevents)? HTML5?? ??? ????? ????? ???? ?? ???? ?? ??????. ?? ??, ?? ? ?? ????? ??? ? HTTP ??? ?? ?? ?? ??? ?????. ??? ?? ????? ???? ??? ??? ? ???? ????. consteventSource = newEventSource ( '/stream'); eventSource.onMessage = function (event) {console.log ( '?? ??? :', event.data);}; ??? ??? ??? ???/???? ???????

    HTML5 ??? ?? ? ? ???? ???? SEO ??. HTML5 ??? ?? ? ? ???? ???? SEO ??. Jul 03, 2025 am 01:16 AM

    HTML5 ??? ??? Microdata? ???? ?? ??? ??? ?? ? ??? ??? ? ? ???? ? ????? ??? SEO? ???? ? ????. 1. HTML5 ??? ??? ???? ??? ??? ??? ????? ?? ?? ????? ??? ??? ??? ???? ? ??????. 2. ?? ??, ???, ?? ?? ?? ?? ?? ???? ???? ?? MicroData ??? ? ???? ???? ?? ??? ?? ??? ???? ?? ??? ??? ???? ? ??? ? ???; 3. ??? ???, ?? ??? ???, ??? ? ???? ??? ?????, Schema.org? ??? ????? ????? ??????, ?? SEO ??? ???? ????? ????? ?? ?????? ??????.

    html5``vs` `??? ?????. html5``vs` `??? ?????. Jul 12, 2025 am 03:09 AM

    ????? ??? ?? ?? ?????. ??? ??? ???? ? ??? ??? ?????. 1. ?, ??, ?? ? ??? ????? ??? ? ???, ?? ?? ??? ????? ?????. 2. ??? ?? ??? ??? ??? ?? ???? ?? ??? ??? ?? ?? ??? ?????. 3. ??? ? ???? ??? ? ??? ???? ??? ?? ???????. 4. ?? ? ? ??? ????? ???? ????. 5. ??? ???? ???? ????? ?? ??? ??? ???? ? ?? ??? ?????.

    HTML5 ??? ?? API? ???? ?? ??? ????. HTML5 ??? ?? API? ???? ?? ??? ????. Jul 02, 2025 pm 05:03 PM

    ??? ??? ?? ?? html5geolocation API? ???? ?? ?? ??? ??? ?? ??? ??? ???? ???????. ?? ??? Navigator.geolocation.getCurrentPosition ()?? ???? ??, ??? ?? ? ?? ?? ??? ???? ????. ??? ???? ???? ?? ??, ????, ???? ?? ????, ???? ?? ?, ?? ??? ? ??? ????? ????????. ???? ??? ??? ????. 1. ??? ???? ?? ?? ??? ??? ??? ? ?? ?? ??; 2. ???? ??? ????? ?? EnableHighAccuracy, ?? ??, ?? ? ?? ?? ??? ??????. 3. ?? ??? ?? ??? ???????

    HTML5 ??? ?? ?? ?? (MSE) ?? HTML5 ??? ?? ?? ?? (MSE) ?? Jul 08, 2025 am 02:31 AM

    MSE (MediaSourceExtensions)? W3C ??? ???? JavaScript? ??? ???? ???? ???? ?? ??? ?? ??? ???????. MediaSource? ?? ??? ??? ???? SourceBuffer? ???? ???? ???? ?? ??? ?? ??? ???? ????? ?????? ? ??? ??? ??? ? ? ????. MSE? ???? ?????? ??? ?????. ② ??? ??????. wource ?? ??? ???? ?? ???? ???? ?????. fetch ()? ?? ???? ? ???? ?? ?? ??? ??????. ???? ?? ??? ??? ????. utions ?? ??? ??; ② ?? ??? ?

    See all articles