HTML5 鐨勬柊鐨勮〃鍗曞厓绱狅細(xì)
HTML5 鎷ユ湁鑻ュ共娑夊強(qiáng)琛ㄥ崟鐨勫厓绱犲拰灞炴с?/p>
鏈珷浠嬬粛浠ヤ笅鏂扮殑琛ㄥ崟鍏冪礌錛?/p>
- datalist
- keygen
- output
嫻忚鍣ㄦ敮鎸?/h2>
| 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 |
datalist 鍏冪礌
datalist 鍏冪礌瑙勫畾杈撳叆鍩熺殑閫夐」鍒楄〃銆?/p>
鍒楄〃鏄氳繃 datalist 鍐呯殑 option 鍏冪礌鍒涘緩鐨勩?/p>
濡傞渶鎶?datalist 緇戝畾鍒拌緭鍏ュ煙錛岃鐢ㄨ緭鍏ュ煙鐨?list 灞炴у紩鐢?datalist 鐨?id錛?/p>
瀹炰緥
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>
鎻愮ず錛?/span>option 鍏冪礌姘歌繙閮借璁劇疆 value 灞炴с?/p>
keygen 鍏冪礌
keygen 鍏冪礌鐨勪綔鐢ㄦ槸鎻愪緵涓縐嶉獙璇佺敤鎴風(fēng)殑鍙潬鏂規(guī)硶銆?/p>
keygen 鍏冪礌鏄瘑閽ュ鐢熸垚鍣紙key-pair generator錛夈傚綋鎻愪氦琛ㄥ崟鏃訛紝浼?xì)鐢熸垚涓や釜閿Q屼竴涓槸縐侀挜錛屼竴涓叕閽ャ?/p>
縐侀挜錛坧rivate key錛夊瓨鍌ㄤ簬瀹㈡埛绔紝鍏挜錛坧ublic key錛夊垯琚彂閫佸埌鏈嶅姟鍣ㄣ傚叕閽ュ彲鐢ㄤ簬涔嬪悗楠岃瘉鐢ㄦ埛鐨勫鎴風(fēng)璇佷功錛坈lient certificate錛夈?/p>
鐩墠錛屾祻瑙堝櫒瀵規(guī)鍏冪礌鐨勭碂緋曠殑鏀寔搴︿笉瓚充互浣垮叾鎴愪負(fù)涓縐嶆湁鐢ㄧ殑瀹夊叏鏍囧噯銆?/p>
瀹炰緥
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> output 鍏冪礌
output 鍏冪礌鐢ㄤ簬涓嶅悓綾誨瀷鐨勮緭鍑猴紝姣斿璁＄畻鎴栬剼鏈緭鍑猴細(xì)
瀹炰緥
<output id="result" onforminput="resCalc()"></output>
]]>
web worker 鏄繍琛屽湪鍚庡彴鐨?JavaScript錛屼笉浼?xì)濯?jiǎng)鍝嶉〉闈㈢殑鎬ц兘銆?/span>
浠涔堟槸 Web Worker錛?/h2>
褰撳湪 HTML 欏甸潰涓墽琛岃剼鏈椂錛岄〉闈㈢殑鐘舵佹槸涓嶅彲鍝嶅簲鐨勶紝鐩村埌鑴氭湰宸插畬鎴愩?/p>
web worker 鏄繍琛屽湪鍚庡彴鐨?JavaScript錛岀嫭绔嬩簬鍏朵粬鑴氭湰錛屼笉浼?xì)濯?jiǎng)鍝嶉〉闈㈢殑鎬ц兘銆傛?zhèn)ㄥ彲浠ゾlх畫鍋氫換浣曟効鎰忓仛鐨勪簨鎯咃細(xì)鐐瑰嚮銆侀夊彇鍐呭絳夌瓑錛岃屾鏃?web worker 鍦ㄥ悗鍙拌繍琛屻?/p>
嫻忚鍣ㄦ敮鎸?/h2>
鎵鏈変富嫻佹祻瑙堝櫒鍧囨敮鎸?web worker錛岄櫎浜?Internet Explorer銆?/p>
HTML5 Web Workers 瀹炰緥
涓嬮潰鐨勪緥瀛愬垱寤轟簡涓涓畝鍗曠殑 web worker錛屽湪鍚庡彴璁℃暟錛?/p>
璁℃暟錛?output id="result" style="margin: 0px; padding: 0px; border: 0px; font-weight: bold; font-size: 12px; line-height: normal; font-family: Verdana, Arial, Helvetica, sans-serif; color: #0000cc;">
媯(gè)嫻?Web Worker 鏀寔
鍦ㄥ垱寤?web worker 涔嬪墠錛岃媯(gè)嫻嬬敤鎴風(fēng)殑嫻忚鍣ㄦ槸鍚︽敮鎸佸畠錛?/p>
if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. } 鍒涘緩 web worker 鏂囦歡
鐜板湪錛岃鎴戜滑鍦ㄤ竴涓閮?JavaScript 涓垱寤烘垜浠殑 web worker銆?/p>
鍦ㄨ繖閲岋紝鎴戜滑鍒涘緩浜嗚鏁拌剼鏈傝鑴氭湰瀛樺偍浜?"demo_workers.js" 鏂囦歡涓細(xì)
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); 浠ヤ笂浠ｇ爜涓噸瑕佺殑閮ㄥ垎鏄?nbsp;postMessage() 鏂規(guī)硶 - 瀹冪敤浜庡悜 HTML 欏甸潰浼犲洖涓孌墊秷鎭?/p>
娉ㄩ噴錛?/span>web worker 閫氬父涓嶇敤浜庡姝ょ畝鍗曠殑鑴氭湰錛岃屾槸鐢ㄤ簬鏇磋楄垂 CPU 璧勬簮鐨勪換鍔°?/p>
鍒涘緩 Web Worker 瀵硅薄
鎴戜滑宸茬粡鏈変簡 web worker 鏂囦歡錛岀幇鍦ㄦ垜浠渶瑕佷粠 HTML 欏甸潰璋冪敤瀹冦?/p>
涓嬮潰鐨勪唬鐮佹嫻嬫槸鍚﹀瓨鍦?worker錛屽鏋滀笉瀛樺湪錛? 瀹冧細(xì)鍒涘緩涓涓柊鐨?web worker 瀵硅薄錛岀劧鍚庤繍琛?"demo_workers.js" 涓殑浠ｇ爜錛?/p>
if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } 鐒跺悗鎴戜滑灝卞彲浠ヤ粠 web worker 鍙戠敓鍜屾帴鏀舵秷鎭簡銆?/p>
鍚?web worker 娣誨姞涓涓?"onmessage" 浜嬩歡鐩戝惉鍣細(xì)
w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; 褰?web worker 浼犻掓秷鎭椂錛屼細(xì)鎵ц浜嬩歡鐩戝惉鍣ㄤ腑鐨勪唬鐮併俥vent.data 涓瓨鏈夋潵鑷?event.data 鐨勬暟鎹?/p>
緇堟 Web Worker
褰撴垜浠垱寤?web worker 瀵硅薄鍚庯紝瀹冧細(xì)緇х畫鐩戝惉娑堟伅錛堝嵆浣垮湪澶栭儴鑴氭湰瀹屾垚涔嬪悗錛夌洿鍒板叾琚粓姝負(fù)姝€?/p>
濡傞渶緇堟 web worker錛屽茍閲婃斁嫻忚鍣?璁＄畻鏈鴻祫婧愶紝璇蜂嬌鐢?terminate() 鏂規(guī)硶錛?/p>
w.terminate();
瀹屾暣鐨?Web Worker 瀹炰緥浠ｇ爜
鎴戜滑宸茬粡鐪嬪埌浜?.js 鏂囦歡涓殑 Worker 浠ｇ爜銆備笅闈㈡槸 HTML 欏甸潰鐨勪唬鐮侊細(xì)
瀹炰緥
<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html> Web Workers 鍜?DOM
鐢變簬 web worker 浣嶄簬澶栭儴鏂囦歡涓紝瀹冧滑鏃犳硶璁塊棶涓嬩緥 JavaScript 瀵硅薄錛?/p>
- window 瀵硅薄
- document 瀵硅薄
- parent 瀵硅薄
]]>
浣跨敤 HTML5錛岄氳繃鍒涘緩 cache manifest 鏂囦歡錛屽彲浠ヨ交鏉懼湴鍒涘緩 web 搴旂敤鐨勭綰跨増鏈?/span>
浠涔堟槸搴旂敤紼嬪簭緙撳瓨錛圓pplication Cache錛夛紵
HTML5 寮曞叆浜嗗簲鐢ㄧ▼搴忕紦瀛橈紝榪欐剰鍛崇潃 web 搴旂敤鍙繘琛岀紦瀛橈紝騫跺彲鍦ㄦ病鏈夊洜鐗圭綉榪炴帴鏃惰繘琛岃闂?/p>
搴旂敤紼嬪簭緙撳瓨涓哄簲鐢ㄥ甫鏉ヤ笁涓紭鍔匡細(xì)
- 紱葷嚎嫻忚 - 鐢ㄦ埛鍙湪搴旂敤紱葷嚎鏃朵嬌鐢ㄥ畠浠?/li>
- 閫熷害 - 宸茬紦瀛樿祫婧愬姞杞藉緱鏇村揩
- 鍑忓皯鏈嶅姟鍣ㄨ礋杞?- 嫻忚鍣ㄥ皢鍙粠鏈嶅姟鍣ㄤ笅杞芥洿鏂拌繃鎴栨洿鏀硅繃鐨勮祫婧愩?/li>
嫻忚鍣ㄦ敮鎸?/h2>
鎵鏈変富嫻佹祻瑙堝櫒鍧囨敮鎸佸簲鐢ㄧ▼搴忕紦瀛橈紝闄や簡 Internet Explorer銆?/p>
HTML5 Cache Manifest 瀹炰緥
涓嬮潰鐨勪緥瀛愬睍紺轟簡甯︽湁 cache manifest 鐨?HTML 鏂囨。錛堜緵紱葷嚎嫻忚錛夛細(xì)
瀹炰緥
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> Cache Manifest 鍩虹
濡傞渶鍚敤搴旂敤紼嬪簭緙撳瓨錛岃鍦ㄦ枃。鐨 <html> 鏍囩涓寘鍚?manifest 灞炴э細(xì)
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
姣忎釜鎸囧畾浜?manifest 鐨勯〉闈㈠湪鐢ㄦ埛瀵瑰叾璁塊棶鏃墮兘浼?xì)琚~撳瓨銆傚鏋滄湭鎸囧畾 manifest 灞炴э紝鍒欓〉闈笉浼?xì)琚~撳瓨錛堥櫎闈炲湪 manifest 鏂囦歡涓洿鎺ユ寚瀹氫簡璇ラ〉闈級(jí)銆?/p>
manifest 鏂囦歡鐨勫緩璁殑鏂囦歡鎵╁睍鍚嶆槸錛?.appcache"銆?/p>
璇鋒敞鎰忥紝manifest 鏂囦歡闇瑕侀厤緗?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">姝ｇ‘鐨?MIME-type錛屽嵆 "text/cache-manifest"銆傚繀欏誨湪 web 鏈嶅姟鍣ㄤ笂榪涜閰嶇疆銆?/p>
Manifest 鏂囦歡
manifest 鏂囦歡鏄畝鍗曠殑鏂囨湰鏂囦歡錛屽畠鍛婄煡嫻忚鍣ㄨ緙撳瓨鐨勫唴瀹癸紙浠ュ強(qiáng)涓嶇紦瀛樼殑鍐呭錛夈?/p>
manifest 鏂囦歡鍙垎涓轟笁涓儴鍒嗭細(xì)
- CACHE MANIFEST - 鍦ㄦ鏍囬涓嬪垪鍑虹殑鏂囦歡灝嗗湪棣栨涓嬭澆鍚庤繘琛岀紦瀛?/li>
- NETWORK - 鍦ㄦ鏍囬涓嬪垪鍑虹殑鏂囦歡闇瑕佷笌鏈嶅姟鍣ㄧ殑榪炴帴錛屼笖涓嶄細(xì)琚紦瀛?/li>
- FALLBACK - 鍦ㄦ鏍囬涓嬪垪鍑虹殑鏂囦歡瑙勫畾褰撻〉闈㈡棤娉曡闂椂鐨勫洖閫欏甸潰錛堟瘮濡?404 欏甸潰錛?/li>
CACHE MANIFEST
絎竴琛岋紝CACHE MANIFEST錛屾槸蹇呴渶鐨勶細(xì)
CACHE MANIFEST /theme.css /logo.gif /main.js
涓婇潰鐨?manifest 鏂囦歡鍒楀嚭浜嗕笁涓祫婧愶細(xì)涓涓?CSS 鏂囦歡錛屼竴涓?GIF 鍥懼儚錛屼互鍙?qiáng)涓涓?JavaScript 鏂囦歡銆傚綋 manifest 鏂囦歡鍔犺澆鍚庯紝嫻忚鍣ㄤ細(xì)浠庣綉绔欑殑鏍圭洰褰曚笅杞借繖涓変釜鏂囦歡銆傜劧鍚庯紝鏃犺鐢ㄦ埛浣曟椂涓庡洜鐗圭綉鏂紑榪炴帴錛岃繖浜涜祫婧愪緷鐒舵槸鍙敤鐨勩?/p>
NETWORK
涓嬮潰鐨?NETWORK 灝忚妭瑙勫畾鏂囦歡 "login.asp" 姘歌繙涓嶄細(xì)琚紦瀛橈紝涓旂綰挎椂鏄笉鍙敤鐨勶細(xì)
NETWORK: login.asp
鍙互浣跨敤鏄熷彿鏉ユ寚紺烘墍鏈夊叾浠栬祫婧?鏂囦歡閮介渶瑕佸洜鐗圭綉榪炴帴錛?/p>
NETWORK: *
FALLBACK
涓嬮潰鐨?FALLBACK 灝忚妭瑙勫畾濡傛灉鏃犳硶寤虹珛鍥犵壒緗戣繛鎺ワ紝鍒欑敤 "offline.html" 鏇夸唬 /html5/ 鐩綍涓殑鎵鏈夋枃浠訛細(xì)
FALLBACK: /html5/ /404.html
娉ㄩ噴錛?/span>絎竴涓?URI 鏄祫婧愶紝絎簩涓槸鏇胯ˉ銆?/p>
鏇存柊緙撳瓨
涓鏃﹀簲鐢ㄨ緙撳瓨錛屽畠?yōu)兗?xì)淇濇寔緙撳瓨鐩村埌鍙戠敓涓嬪垪鎯呭喌錛?/p>
- 鐢ㄦ埛娓呯┖嫻忚鍣ㄧ紦瀛?/li>
- manifest 鏂囦歡琚慨鏀癸紙鍙傞槄涓嬮潰鐨勬彁紺猴級(jí)
- 鐢辯▼搴忔潵鏇存柊搴旂敤緙撳瓨
瀹炰緥 - 瀹屾暣鐨?Manifest 鏂囦歡
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
閲嶈鐨勬彁紺猴細(xì)浠?"#" 寮澶寸殑鏄敞閲婅錛屼絾涔熷彲婊¤凍鍏朵粬鐢ㄩ斻傚簲鐢ㄧ殑緙撳瓨浼?xì)鍦ㄥ?manifest 鏂囦歡鏇存敼鏃惰鏇存柊銆傚鏋滄?zhèn)ň~栬緫浜嗕竴騫呭浘鐗囷紝鎴栬呬慨鏀逛簡涓涓?JavaScript 鍑芥暟錛岃繖浜涙敼鍙橀兘涓嶄細(xì)琚噸鏂扮紦瀛樸傛洿鏂版敞閲婅涓殑鏃ユ湡鍜岀増鏈彿鏄竴縐嶄嬌嫻忚鍣ㄩ噸鏂扮紦瀛樻枃浠剁殑鍔炴硶銆?/p>
鍏充簬搴旂敤紼嬪簭緙撳瓨鐨勬敞閲?/h2>
璇風(fēng)暀蹇冪紦瀛樼殑鍐呭銆?/p>
涓鏃︽枃浠惰緙撳瓨錛屽垯嫻忚鍣ㄤ細(xì)緇х畫灞曠ず宸茬紦瀛樼殑鐗堟湰錛屽嵆浣挎?zhèn)ㄤ慨鏀逛簡鏈嶅姟鍣ㄤ笂鐨勬枃錃g銆備負(fù)浜嗙‘淇濇祻瑙堝櫒鏇存柊緙撳瓨錛屾?zhèn)ㄩ渶瑕佹洿鏂?manifest 鏂囦歡銆?/p>
娉ㄩ噴錛?/span>嫻忚鍣ㄥ緙撳瓨鏁版嵁鐨勫閲忛檺鍒跺彲鑳戒笉澶竴鏍鳳紙鏌愪簺嫻忚鍣ㄨ緗殑闄愬埗鏄瘡涓珯鐐?5MB錛夈?/p>
]]>
鍦ㄥ鎴風(fēng)瀛樺偍鏁版嵁
HTML5 鎻愪緵浜嗕袱縐嶅湪瀹㈡埛绔瓨鍌ㄦ暟鎹殑鏂版柟娉曪細(xì)
- localStorage - 娌℃湁鏃墮棿闄愬埗鐨勬暟鎹瓨鍌?/li>
- sessionStorage - 閽堝涓涓?session 鐨勬暟鎹瓨鍌?/li>
涔嬪墠錛岃繖浜涢兘鏄敱 cookie 瀹屾垚鐨勩備絾鏄?cookie 涓嶉傚悎澶ч噺鏁版嵁鐨勫瓨鍌紝鍥犱負(fù)瀹冧滑鐢辨瘡涓鏈嶅姟鍣ㄧ殑璇鋒眰鏉ヤ紶閫掞紝榪欎嬌寰?cookie 閫熷害寰堟參鑰屼笖鏁堢巼涔熶笉楂樸?/p>
鍦?HTML5 涓紝鏁版嵁涓嶆槸鐢辨瘡涓湇鍔″櫒璇鋒眰浼犻掔殑錛岃屾槸鍙湁鍦ㄨ姹傛椂浣跨敤鏁版嵁銆傚畠浣垮湪涓嶅獎(jiǎng)鍝嶇綉绔欐ц兘鐨勬儏鍐典笅瀛樺偍澶ч噺鏁版嵁鎴愪負(fù)鍙兘銆?/p>
瀵逛簬涓嶅悓鐨勭綉绔欙紝鏁版嵁瀛樺偍浜庝笉鍚岀殑鍖哄煙錛屽茍涓斾竴涓綉绔欏彧鑳借闂叾鑷韓鐨勬暟鎹?/p>
HTML5 浣跨敤 JavaScript 鏉ュ瓨鍌ㄥ拰璁塊棶鏁版嵁銆?/p>
localStorage 鏂規(guī)硶
localStorage 鏂規(guī)硶瀛樺偍鐨勬暟鎹病鏈夋椂闂撮檺鍒躲傜浜屽ぉ銆佺浜屽懆鎴栦笅涓騫翠箣鍚庯紝鏁版嵁渚濈劧鍙敤銆?/p>
濡備綍鍒涘緩鍜岃闂?localStorage錛?/p>
瀹炰緥
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname); </script>
涓嬮潰鐨勪緥瀛愬鐢ㄦ埛璁塊棶欏甸潰鐨勬鏁拌繘琛岃鏁幫細(xì)
瀹炰緥
<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>
sessionStorage 鏂規(guī)硶
sessionStorage 鏂規(guī)硶閽堝涓涓?session 榪涜鏁版嵁瀛樺偍銆傚綋鐢ㄦ埛鍏抽棴嫻忚鍣ㄧ獥鍙ｅ悗錛屾暟鎹細(xì)琚垹闄ゃ?/p>
濡備綍鍒涘緩騫惰闂竴涓?sessionStorage錛?/p>
瀹炰緥
<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname); </script>
涓嬮潰鐨勪緥瀛愬鐢ㄦ埛鍦ㄥ綋鍓?session 涓闂〉闈㈢殑嬈℃暟榪涜璁℃暟錛?/p>
瀹炰緥
<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>
]]>
HTML5 Geolocation錛堝湴鐞嗗畾浣嶏級(jí)鐢ㄤ簬瀹氫綅鐢ㄦ埛鐨勪綅緗?/span>
浜茶嚜璇曚竴璇曪細(xì)鍦ㄨ胺姝屽湴鍥句笂鏄劇ず鎮(zhèn)ㄧ殑浣嶇疆
瀹氫綅鐢ㄦ埛鐨勪綅緗?/h2>
HTML5 Geolocation API 鐢ㄤ簬鑾峰緱鐢ㄦ埛鐨勫湴鐞嗕綅緗?/p>
閴翠簬璇ョ壒鎬у彲鑳戒鏡鐘敤鎴風(fēng)殑闅愮錛岄櫎闈炵敤鎴峰悓鎰忥紝鍚﹀垯鐢ㄦ埛浣嶇疆淇℃伅鏄笉鍙敤鐨勩?/p>
嫻忚鍣ㄦ敮鎸?/h2>
Internet Explorer 9銆丗irefox銆丆hrome銆丼afari 浠ュ強(qiáng) Opera 鏀寔鍦扮悊瀹氫綅銆?/p>
娉ㄩ噴錛?/span>瀵逛簬鎷ユ湁 GPS 鐨勮澶囷紝姣斿 iPhone錛屽湴鐞嗗畾浣嶆洿鍔犵簿紜?/p>
HTML5 - 浣跨敤鍦扮悊瀹氫綅
璇蜂嬌鐢?getCurrentPosition() 鏂規(guī)硶鏉ヨ幏寰楃敤鎴風(fēng)殑浣嶇疆銆?/p>
涓嬩緥鏄竴涓畝鍗曠殑鍦扮悊瀹氫綅瀹炰緥錛屽彲榪斿洖鐢ㄦ埛浣嶇疆鐨勭粡搴﹀拰綰害銆?/p>
瀹炰緥
<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> 渚嬪瓙瑙ｉ噴錛?/p>
- 媯(gè)嫻嬫槸鍚︽敮鎸佸湴鐞嗗畾浣?/li>
- 濡傛灉鏀寔錛屽垯榪愯 getCurrentPosition() 鏂規(guī)硶銆傚鏋滀笉鏀寔錛屽垯鍚戠敤鎴鋒樉紺轟竴孌墊秷鎭?/li>
- 濡傛灉getCurrentPosition()榪愯鎴愬姛錛屽垯鍚戝弬鏁皊howPosition涓瀹氱殑鍑芥暟榪斿洖涓涓猚oordinates瀵硅薄
- showPosition() 鍑芥暟鑾峰緱騫舵樉紺虹粡搴﹀拰綰害
涓婇潰鐨勪緥瀛愭槸涓涓潪甯稿熀紜鐨勫湴鐞嗗畾浣嶈剼鏈紝涓嶅惈閿欒澶勭悊銆?/p>
澶勭悊閿欒鍜屾嫆緇?/h2>
getCurrentPosition() 鏂規(guī)硶鐨勭浜屼釜鍙傛暟鐢ㄤ簬澶勭悊閿欒銆傚畠瑙勫畾褰撹幏鍙栫敤鎴蜂綅緗け璐ユ椂榪愯鐨勫嚱鏁幫細(xì)
瀹炰緥
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; } } 閿欒浠ｇ爜錛?/p>
- Permission denied - 鐢ㄦ埛涓嶅厑璁稿湴鐞嗗畾浣?/li>
- Position unavailable - 鏃犳硶鑾峰彇褰撳墠浣嶇疆
- Timeout - 鎿嶄綔瓚呮椂
鍦ㄥ湴鍥句腑鏄劇ず緇撴灉
濡傞渶鍦ㄥ湴鍥句腑鏄劇ず緇撴灉錛屾?zhèn)ㄩ渶瑕佽闂彲浣跨敤緇忕含搴︾殑鍦板浘鏈嶅姟錛屾瘮濡傝胺姝屽湴鍥炬垨鐧懼害鍦板浘錛?/p>
瀹炰緥
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+"' />"; } 鍦ㄤ笂渚嬩腑錛屾垜浠嬌鐢ㄨ繑鍥炵殑緇忕含搴︽暟鎹湪璋鋒瓕鍦板浘涓樉紺轟綅緗紙浣跨敤闈欐佸浘鍍忥級(jí)銆?/p>
涓婇潰鐨勯摼鎺ュ悜鎮(zhèn)ㄦ紨紺哄浣曚嬌鐢ㄨ剼鏈潵鏄劇ず甯︽湁鏍囪銆佺緝鏀懼拰鎷栨洺閫夐」鐨勪氦浜掑紡鍦板浘銆?/p>
緇欏畾浣嶇疆鐨勪俊鎭?/h2>
鏈〉婕旂ず鐨勬槸濡備綍鍦ㄥ湴鍥句笂鏄劇ず鐢ㄦ埛鐨勪綅緗備笉榪囷紝鍦扮悊瀹氫綅瀵逛簬緇欏畾浣嶇疆鐨勪俊鎭悓鏍峰緢鏈夌敤澶勩?/p>
妗堜緥錛?/p>
- 鏇存柊鏈湴淇℃伅
- 鏄劇ず鐢ㄦ埛鍛ㄥ洿鐨勫叴瓚ｇ偣
- 浜や簰寮忚濺杞藉鑸郴緇?(GPS)
getCurrentPosition() 鏂規(guī)硶 - 榪斿洖鏁版嵁
鑻ユ垚鍔燂紝鍒?getCurrentPosition() 鏂規(guī)硶榪斿洖瀵硅薄銆傚緇堜細(xì)榪斿洖 latitude銆乴ongitude 浠ュ強(qiáng) accuracy 灞炴с傚鏋滃彲鐢紝鍒欎細(xì)榪斿洖鍏朵粬涓嬮潰鐨勫睘鎬с?/p>
| 灞炴?/th> | 鎻忚堪 |
|---|---|
| coords.latitude | 鍗佽繘鍒舵暟鐨勭含搴?/td> |
| coords.longitude | 鍗佽繘鍒舵暟鐨勭粡搴?/td> |
| coords.accuracy | 浣嶇疆綺懼害 |
| coords.altitude | 嫻鋒嫈錛屾搗騫抽潰浠ヤ笂浠ョ背璁?/td> |
| coords.altitudeAccuracy | 浣嶇疆鐨勬搗鎷旂簿搴?/td> |
| coords.heading | 鏂瑰悜錛屼粠姝ｅ寳寮濮嬩互搴﹁ |
| coords.speed | 閫熷害錛屼互綾?姣忕璁?/td> |
| timestamp | 鍝嶅簲鐨勬棩鏈?鏃墮棿 |
Geolocation 瀵硅薄 - 鍏朵粬鏈夎叮鐨勬柟娉?/h2>
watchPosition() - 榪斿洖鐢ㄦ埛鐨勫綋鍓嶄綅緗紝騫剁戶緇繑鍥炵敤鎴風(fēng)Щ鍔ㄦ椂鐨勬洿鏂頒綅緗紙灝卞儚姹借濺涓婄殑 GPS錛夈?/p>
clearWatch() - 鍋滄 watchPosition() 鏂規(guī)硶
涓嬮潰鐨勪緥瀛愬睍紺?watchPosition() 鏂規(guī)硶銆傛?zhèn)ㄩ渶瑕佷竴鍙扮簿紜殑 GPS 璁懼鏉ユ祴璇曡渚嬶紙姣斿 iPhone錛夛細(xì)
瀹炰緥
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(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> ]]>
Canvas 鍜?SVG 閮藉厑璁告?zhèn)ㄥ湪娴忚鍣ㄤ腑鍒涘缓鍥惧舰锛屼絾鏄畠浠湪鏍规湰涓婃槸涓嶅悓鐨勩?/span>
SVG
SVG 鏄竴縐嶄嬌鐢?XML 鎻忚堪 2D 鍥懼艦鐨勮璦銆?/p>
SVG 鍩轟簬 XML錛岃繖鎰忓懗鐫 SVG DOM 涓殑姣忎釜鍏冪礌閮芥槸鍙敤鐨勩傛?zhèn)ㄥ彲浠ヤ负鏌愪釜鍏冪礌闄勫?JavaScript 浜嬩歡澶勭悊鍣ㄣ?/p>
鍦?SVG 涓紝姣忎釜琚粯鍒剁殑鍥懼艦鍧囪瑙嗕負(fù)瀵硅薄銆傚鏋?SVG 瀵硅薄鐨勫睘鎬у彂鐢熷彉鍖栵紝閭ｄ箞嫻忚鍣ㄨ兘澶熻嚜鍔ㄩ噸鐜板浘褰€?/p>
Canvas
Canvas 閫氳繃 JavaScript 鏉ョ粯鍒?2D 鍥懼艦銆?/p>
Canvas 鏄愬儚绱犺繘琛屾覆鏌撶殑銆?/p>
鍦?canvas 涓紝涓鏃﹀浘褰㈣緇樺埗瀹屾垚錛屽畠?yōu)兏嶄細(xì)鐟艟l緱鍒版祻瑙堝櫒鐨勫叧娉ㄣ傚鏋滃叾浣嶇疆鍙戠敓鍙樺寲錛岄偅涔堟暣涓満鏅篃闇瑕侀噸鏂扮粯鍒訛紝鍖呮嫭浠諱綍鎴栬宸茶鍥懼艦瑕嗙洊鐨勫璞°?/p>
Canvas 涓?SVG 鐨勬瘮杈?/h2>
涓嬭〃鍒楀嚭浜?canvas 涓?SVG 涔嬮棿鐨勪竴浜涗笉鍚屼箣澶勩?/p>
Canvas
- 渚濊禆鍒嗚鯨鐜?/li>
- 涓嶆敮鎸佷簨浠跺鐞嗗櫒
- 寮辯殑鏂囨湰娓叉煋鑳藉姏
- 鑳藉浠?.png 鎴?.jpg 鏍煎紡淇濆瓨緇撴灉鍥懼儚
- 鏈閫傚悎鍥懼儚瀵嗛泦鍨嬬殑娓告垙錛屽叾涓殑璁稿瀵硅薄浼?xì)琚绻侀噸缁?/li>
SVG
- 涓嶄緷璧栧垎杈ㄧ巼
- 鏀寔浜嬩歡澶勭悊鍣?/li>
- 鏈閫傚悎甯︽湁澶у瀷娓叉煋鍖哄煙鐨勫簲鐢ㄧ▼搴忥紙姣斿璋鋒瓕鍦板浘錛?/li>
- 澶嶆潅搴﹂珮浼?xì)鍑忔參娓叉煋閫熷害錛堜換浣曡繃搴︿嬌鐢?DOM 鐨勫簲鐢ㄩ兘涓嶅揩錛?/li>
- 涓嶉傚悎娓告垙搴旂敤
]]>
HTML5 鏀寔鍐呰仈 SVG銆?/span>
浠涔堟槸SVG錛?/h2>- SVG 鎸囧彲浼哥緝鐭㈤噺鍥懼艦 (Scalable Vector Graphics)
- SVG 鐢ㄤ簬瀹氫箟鐢ㄤ簬緗戠粶鐨勫熀浜庣煝閲忕殑鍥懼艦
- SVG 浣跨敤 XML 鏍煎紡瀹氫箟鍥懼艦
- SVG 鍥懼儚鍦ㄦ斁澶ф垨鏀瑰彉灝哄鐨勬儏鍐典笅鍏跺浘褰㈣川閲忎笉浼?xì)鏈夋崯澶?/li>
- SVG 鏄竾緇寸綉鑱旂洘鐨勬爣鍑?/li>
SVG 鐨勪紭鍔?/h2>
涓庡叾浠栧浘鍍忔牸寮忕浉姣旓紙姣斿 JPEG 鍜?GIF錛夛紝浣跨敤 SVG 鐨勪紭鍔垮湪浜庯細(xì)
- SVG 鍥懼儚鍙氳繃鏂囨湰緙栬緫鍣ㄦ潵鍒涘緩鍜屼慨鏀?/li>
- SVG 鍥懼儚鍙鎼滅儲(chǔ)銆佺儲(chǔ)寮曘佽剼鏈寲鎴栧帇緙?/li>
- SVG 鏄彲浼哥緝鐨?/li>
- SVG 鍥懼儚鍙湪浠諱綍鐨勫垎杈ㄧ巼涓嬭楂樿川閲忓湴鎵撳嵃
- SVG 鍙湪鍥懼儚璐ㄩ噺涓嶄笅闄嶇殑鎯呭喌涓嬭鏀懼ぇ
嫻忚鍣ㄦ敮鎸?/h2>
Internet Explorer 9銆丗irefox銆丱pera銆丆hrome 浠ュ強(qiáng) Safari 鏀寔鍐呰仈 SVG銆?/p>
鎶?SVG 鐩存帴宓屽叆 HTML 欏甸潰
鍦?HTML5 涓紝鎮(zhèn)ㄨ兘澶熷皢 SVG 鍏冪礌鐩存帴宓屽叆 HTML 欏甸潰涓細(xì)
瀹炰緥
<!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> 緇撴灉錛?/p>
濡傞渶瀛︿範(fàn)鏇村鏈夊叧 SVG 鐨勭煡璇嗭紝璇烽槄璇繪垜浠殑 SVG 鏁欑▼銆?/p>
]]>
canvas 鍏冪礌鐢ㄤ簬鍦ㄧ綉欏典笂緇樺埗鍥懼艦銆?/span>
浠涔堟槸 Canvas錛?/h2>
HTML5 鐨?canvas 鍏冪礌浣跨敤 JavaScript 鍦ㄧ綉欏典笂緇樺埗鍥懼儚銆?/p>
鐢誨竷鏄竴涓煩褰㈠尯鍩燂紝鎮(zhèn)ㄥ彲浠ユ帶鍒跺叾姣忎竴鍍忕礌銆?/p>
canvas 鎷ユ湁澶氱緇樺埗璺緞銆佺煩褰€佸渾褰€佸瓧絎︿互鍙?qiáng)娣诲姞鍥惧儚鐨勬栆?guī)硶銆?/p>
鍒涘緩 Canvas 鍏冪礌
鍚?HTML5 欏甸潰娣誨姞 canvas 鍏冪礌銆?/p>
瑙勫畾鍏冪礌鐨?id銆佸搴﹀拰楂樺害錛?/p>
<canvas id="myCanvas" width="200" height="100"></canvas>
閫氳繃 JavaScript 鏉ョ粯鍒?/h2>
canvas 鍏冪礌鏈韓鏄病鏈夌粯鍥捐兘鍔涚殑銆傛墍鏈夌殑緇樺埗宸ヤ綔蹇呴』鍦?JavaScript 鍐呴儴瀹屾垚錛?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> JavaScript 浣跨敤 id 鏉ュ鎵?canvas 鍏冪礌錛?/p>
var c=document.getElementById("myCanvas");鐒跺悗錛屽垱寤?context 瀵硅薄錛?/p>
var cxt=c.getContext("2d"); getContext("2d") 瀵硅薄鏄唴寤虹殑 HTML5 瀵硅薄錛屾嫢鏈夊縐嶇粯鍒惰礬寰勩佺煩褰€佸渾褰€佸瓧絎︿互鍙?qiáng)娣诲姞鍥惧儚鐨勬栆?guī)硶銆?/p>
涓嬮潰鐨勪袱琛屼唬鐮佺粯鍒朵竴涓孩鑹茬殑鐭╁艦錛?/p>
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 鏂規(guī)硶灝嗗叾鏌撴垚綰㈣壊錛宖illRect 鏂規(guī)硶瑙勫畾浜嗗艦鐘躲佷綅緗拰灝哄銆?/p>
鐞嗚В鍧愭爣
涓婇潰鐨?fillRect 鏂規(guī)硶鎷ユ湁鍙傛暟 (0,0,150,75)銆?/p>
鎰忔濇槸錛氬湪鐢誨竷涓婄粯鍒?150x75 鐨勭煩褰紝浠庡乏涓婅寮濮?(0,0)銆?/p>
濡備笅鍥炬墍紺猴紝鐢誨竷鐨?X 鍜?Y 鍧愭爣鐢ㄤ簬鍦ㄧ敾甯冧笂瀵圭粯鐢昏繘琛屽畾浣嶃?/p>
鏇村 Canvas 瀹炰緥
涓嬮潰鐨勫湪 canvas 鍏冪礌涓婅繘琛岀粯鐢葷殑鏇村瀹炰緥錛?/p>
瀹炰緥 - 綰挎潯
閫氳繃鎸囧畾浠庝綍澶勫紑濮嬶紝鍦ㄤ綍澶勭粨鏉燂紝鏉ョ粯鍒朵竴鏉＄嚎錛?/p>
JavaScript 浠ｇ爜錛?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> canvas 鍏冪礌錛?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
瀹炰緥 - 鍦嗗艦
閫氳繃瑙勫畾灝哄銆侀鑹插拰浣嶇疆錛屾潵緇樺埗涓涓渾錛?/p>
JavaScript 浠ｇ爜錛?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> canvas 鍏冪礌錛?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
瀹炰緥 - 娓愬彉
浣跨敤鎮(zhèn)ㄦ寚瀹氱殑棰滆壊鏉ョ粯鍒舵笎鍙樿儗鏅細(xì)
JavaScript 浠ｇ爜錛?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> canvas 鍏冪礌錛?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
瀹炰緥 - 鍥懼儚
鎶婁竴騫呭浘鍍忔斁緗埌鐢誨竷涓婏細(xì)
JavaScript 浠ｇ爜錛?/p>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="flower.png" cxt.drawImage(img,0,0); </script> canvas 鍏冪礌錛?/p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
]]>
鎷栨斁錛圖rag 鍜?drop錛夋槸 HTML5 鏍囧噯鐨勭粍鎴愰儴鍒嗐?/span>
鎷栨斁
鎷栨斁鏄竴縐嶅父瑙佺殑鐗規(guī)э紝鍗蟲姄鍙栧璞′互鍚庢嫋鍒板彟涓涓綅緗?/p>
鍦?HTML5 涓紝鎷栨斁鏄爣鍑嗙殑涓閮ㄥ垎錛屼換浣曞厓绱犻兘鑳藉鎷栨斁銆?/p>
鎷栨斁鏄竴縐嶅父瑙佺殑鐗規(guī)э紝鍗蟲姄鍙栧璞′互鍚庢嫋鍒板彟涓涓綅緗?/p>
鍦?HTML5 涓紝鎷栨斁鏄爣鍑嗙殑涓閮ㄥ垎錛屼換浣曞厓绱犻兘鑳藉鎷栨斁銆?/p>
嫻忚鍣ㄦ敮鎸?/h2>Internet Explorer 9銆丗irefox銆丱pera 12銆丆hrome 浠ュ強(qiáng) Safari 5 鏀寔鎷栨斁銆?/p>
娉ㄩ噴錛?/span>鍦?Safari 5.1.2 涓笉鏀寔鎷栨斁銆?/p>
HTML5 鎷栨斁瀹炰緥
涓嬮潰鐨勪緥瀛愭槸涓涓畝鍗曠殑鎷栨斁瀹炰緥錛?/p>
瀹炰緥
<!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>
瀹冪湅涓婂幓涔熻鏈変簺澶嶆潅錛屼笉榪囨垜浠彲浠ュ垎鍒爺絀舵嫋鏀句簨浠剁殑涓嶅悓閮ㄥ垎銆?/p>
璁劇疆鍏冪礌涓哄彲鎷栨斁
棣栧厛錛屼負(fù)浜嗕嬌鍏冪礌鍙嫋鍔紝鎶?draggable 灞炴ц緗負(fù) true 錛?/p>
<img draggable="true" />
鎷栧姩浠涔?- ondragstart 鍜?setData()
鐒跺悗錛岃瀹氬綋鍏冪礌琚嫋鍔ㄦ椂錛屼細(xì)鍙戠敓浠涔堛?/p>
鍦ㄤ笂闈㈢殑渚嬪瓙涓紝ondragstart 灞炴ц皟鐢ㄤ簡涓涓嚱鏁幫紝drag(event)錛屽畠瑙勫畾浜嗚鎷栧姩鐨勬暟鎹?/p>
dataTransfer.setData() 鏂規(guī)硶璁劇疆琚嫋鏁版嵁鐨勬暟鎹被鍨嬪拰鍊鹼細(xì)
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
鍦ㄨ繖涓緥瀛愪腑錛屾暟鎹被鍨嬫槸 "Text"錛屽兼槸鍙嫋鍔ㄥ厓绱犵殑 id ("drag1")銆?/p>
鏀懼埌浣曞 - ondragover
ondragover 浜嬩歡瑙勫畾鍦ㄤ綍澶勬斁緗鎷栧姩鐨勬暟鎹?/p>
榛樿鍦幫紝鏃犳硶灝嗘暟鎹?鍏冪礌鏀劇疆鍒板叾浠栧厓绱犱腑銆傚鏋滈渶瑕佽緗厑璁告斁緗紝鎴戜滑蹇呴』闃繪瀵瑰厓绱犵殑榛樿澶勭悊鏂瑰紡銆?/p>
榪欒閫氳繃璋冪敤 ondragover 浜嬩歡鐨?nbsp;event.preventDefault() 鏂規(guī)硶錛?/p>
event.preventDefault()
榪涜鏀劇疆 - ondrop
褰撴斁緗鎷栨暟鎹椂錛屼細(xì)鍙戠敓 drop 浜嬩歡銆?/p>
鍦ㄤ笂闈㈢殑渚嬪瓙涓紝ondrop 灞炴ц皟鐢ㄤ簡涓涓嚱鏁幫紝drop(event)錛?/p>
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
浠ｇ爜瑙ｉ噴錛?/h3>- 璋冪敤 preventDefault() 鏉ラ伩鍏嶆祻瑙堝櫒瀵規(guī)暟鎹殑榛樿澶勭悊錛坉rop 浜嬩歡鐨勯粯璁よ涓烘槸浠ラ摼鎺ュ艦寮忔墦寮錛?/li>
- 閫氳繃 dataTransfer.getData("Text") 鏂規(guī)硶鑾峰緱琚嫋鐨勬暟鎹傝鏂規(guī)硶灝嗚繑鍥炲湪 setData() 鏂規(guī)硶涓緗負(fù)鐩稿悓綾誨瀷鐨勪換浣曟暟鎹?/li>
- 琚嫋鏁版嵁鏄鎷栧厓绱犵殑 id ("drag1")
- 鎶婅鎷栧厓绱犺拷鍔犲埌鏀劇疆鍏冪礌錛堢洰鏍囧厓绱狅級(jí)涓?/li>
鏇村瀹炰緥
- 鏉ュ洖鎷栨斁鍥劇墖
- 濡備綍鍦ㄤ袱涓?<div> 鍏冪礌涔嬮棿鎷栨斁鍥懼儚銆?/dd>
]]>
Internet Explorer 9銆丗irefox銆丱pera 12銆丆hrome 浠ュ強(qiáng) Safari 5 鏀寔鎷栨斁銆?/p>
娉ㄩ噴錛?/span>鍦?Safari 5.1.2 涓笉鏀寔鎷栨斁銆?/p>
涓嬮潰鐨勪緥瀛愭槸涓涓畝鍗曠殑鎷栨斁瀹炰緥錛?/p>
<!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>
瀹冪湅涓婂幓涔熻鏈変簺澶嶆潅錛屼笉榪囨垜浠彲浠ュ垎鍒爺絀舵嫋鏀句簨浠剁殑涓嶅悓閮ㄥ垎銆?/p>
棣栧厛錛屼負(fù)浜嗕嬌鍏冪礌鍙嫋鍔紝鎶?draggable 灞炴ц緗負(fù) true 錛?/p>
<img draggable="true" />
鐒跺悗錛岃瀹氬綋鍏冪礌琚嫋鍔ㄦ椂錛屼細(xì)鍙戠敓浠涔堛?/p>
鍦ㄤ笂闈㈢殑渚嬪瓙涓紝ondragstart 灞炴ц皟鐢ㄤ簡涓涓嚱鏁幫紝drag(event)錛屽畠瑙勫畾浜嗚鎷栧姩鐨勬暟鎹?/p>
dataTransfer.setData() 鏂規(guī)硶璁劇疆琚嫋鏁版嵁鐨勬暟鎹被鍨嬪拰鍊鹼細(xì)
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
鍦ㄨ繖涓緥瀛愪腑錛屾暟鎹被鍨嬫槸 "Text"錛屽兼槸鍙嫋鍔ㄥ厓绱犵殑 id ("drag1")銆?/p>
ondragover 浜嬩歡瑙勫畾鍦ㄤ綍澶勬斁緗鎷栧姩鐨勬暟鎹?/p>
榛樿鍦幫紝鏃犳硶灝嗘暟鎹?鍏冪礌鏀劇疆鍒板叾浠栧厓绱犱腑銆傚鏋滈渶瑕佽緗厑璁告斁緗紝鎴戜滑蹇呴』闃繪瀵瑰厓绱犵殑榛樿澶勭悊鏂瑰紡銆?/p>
榪欒閫氳繃璋冪敤 ondragover 浜嬩歡鐨?nbsp;event.preventDefault() 鏂規(guī)硶錛?/p>
event.preventDefault()
褰撴斁緗鎷栨暟鎹椂錛屼細(xì)鍙戠敓 drop 浜嬩歡銆?/p>
鍦ㄤ笂闈㈢殑渚嬪瓙涓紝ondrop 灞炴ц皟鐢ㄤ簡涓涓嚱鏁幫紝drop(event)錛?/p>
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
- 璋冪敤 preventDefault() 鏉ラ伩鍏嶆祻瑙堝櫒瀵規(guī)暟鎹殑榛樿澶勭悊錛坉rop 浜嬩歡鐨勯粯璁よ涓烘槸浠ラ摼鎺ュ艦寮忔墦寮錛?/li>
- 閫氳繃 dataTransfer.getData("Text") 鏂規(guī)硶鑾峰緱琚嫋鐨勬暟鎹傝鏂規(guī)硶灝嗚繑鍥炲湪 setData() 鏂規(guī)硶涓緗負(fù)鐩稿悓綾誨瀷鐨勪換浣曟暟鎹?/li>
- 琚嫋鏁版嵁鏄鎷栧厓绱犵殑 id ("drag1")
- 鎶婅鎷栧厓绱犺拷鍔犲埌鏀劇疆鍏冪礌錛堢洰鏍囧厓绱狅級(jí)涓?/li>
- 璋冪敤 preventDefault() 鏉ラ伩鍏嶆祻瑙堝櫒瀵規(guī)暟鎹殑榛樿澶勭悊錛坉rop 浜嬩歡鐨勯粯璁よ涓烘槸浠ラ摼鎺ュ艦寮忔墦寮錛?/li>
- 閫氳繃 dataTransfer.getData("Text") 鏂規(guī)硶鑾峰緱琚嫋鐨勬暟鎹傝鏂規(guī)硶灝嗚繑鍥炲湪 setData() 鏂規(guī)硶涓緗負(fù)鐩稿悓綾誨瀷鐨勪換浣曟暟鎹?/li>
- 琚嫋鏁版嵁鏄鎷栧厓绱犵殑 id ("drag1")
- 鎶婅鎷栧厓绱犺拷鍔犲埌鏀劇疆鍏冪礌錛堢洰鏍囧厓绱狅級(jí)涓?/li>
鏇村瀹炰緥
- 鏉ュ洖鎷栨斁鍥劇墖
- 濡備綍鍦ㄤ袱涓?<div> 鍏冪礌涔嬮棿鎷栨斁鍥懼儚銆?/dd>
- 鏉ュ洖鎷栨斁鍥劇墖
- 濡備綍鍦ㄤ袱涓?<div> 鍏冪礌涔嬮棿鎷栨斁鍥懼儚銆?/dd>
]]>
HTML5 鎻愪緵浜嗘挱鏀鵑煶棰戠殑鏍囧噯銆?/span>
Web 涓婄殑闊抽
鐩村埌鐜板湪錛屼粛鐒朵笉瀛樺湪涓欏規(guī)棬鍦ㄧ綉欏典笂鎾斁闊抽鐨勬爣鍑嗐?/p>
浠婂ぉ錛屽ぇ澶氭暟闊抽鏄氳繃鎻掍歡錛堟瘮濡?Flash錛夋潵鎾斁鐨勩傜劧鑰岋紝騫墮潪鎵鏈夋祻瑙堝櫒閮芥嫢鏈夊悓鏍風(fēng)殑鎻掍歡銆?/p>
HTML5 瑙勫畾浜嗕竴縐嶉氳繃 audio 鍏冪礌鏉ュ寘鍚煶棰戠殑鏍囧噯鏂規(guī)硶銆?/p>
audio 鍏冪礌鑳藉鎾斁澹伴煶鏂囦歡鎴栬呴煶棰戞祦銆?/p>
闊抽鏍煎紡
褰撳墠錛宎udio 鍏冪礌鏀寔涓夌闊抽鏍煎紡錛?/p>
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
濡備綍宸ヤ綔
濡傞渶鍦?HTML5 涓挱鏀鵑煶棰戯紝鎮(zhèn)ㄦ墍鏈夐渶瑕佺殑鏄細(xì)
<audio src="song.ogg" controls="controls"> </audio>
control 灞炴т緵娣誨姞鎾斁銆佹殏鍋滃拰闊抽噺鎺т歡銆?/p>
<audio> 涓?</audio> 涔嬮棿鎻掑叆鐨勫唴瀹規(guī)槸渚涗笉鏀寔 audio 鍏冪礌鐨勬祻瑙堝櫒鏄劇ず鐨勶細(xì)
瀹炰緥
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
涓婇潰鐨勪緥瀛愪嬌鐢ㄤ竴涓?Ogg 鏂囦歡錛岄傜敤浜嶧irefox銆丱pera 浠ュ強(qiáng) Chrome 嫻忚鍣ㄣ?/p>
瑕佺‘淇濋傜敤浜?Safari 嫻忚鍣紝闊抽鏂囦歡蹇呴』鏄?MP3 鎴?Wav 綾誨瀷銆?/p>
audio 鍏冪礌鍏佽澶氫釜 source 鍏冪礌銆俿ource 鍏冪礌鍙互閾炬帴涓嶅悓鐨勯煶棰戞枃浠躲傛祻瑙堝櫒灝嗕嬌鐢ㄧ涓涓彲璇嗗埆鐨勬牸寮忥細(xì)
瀹炰緥
<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>
Internet Explorer
Internet Explorer 8 涓嶆敮鎸?audio 鍏冪礌銆傚湪 IE 9 涓紝灝嗘彁渚涘 audio 鍏冪礌鐨勬敮鎸併?/p>
<audio> 鏍囩鐨勫睘鎬?/h2>
| 灞炴?/th> | 鍊?/th> | 鎻忚堪 |
|---|---|---|
| autoplay | autoplay | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欓煶棰戝湪灝辯華鍚庨┈涓婃挱鏀俱?/td> |
| controls | controls | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欏悜鐢ㄦ埛鏄劇ず鎺т歡錛屾瘮濡傛挱鏀炬寜閽?/td> |
| loop | loop | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欐瘡褰撻煶棰戠粨鏉熸椂閲嶆柊寮濮嬫挱鏀俱?/td> |
| preload | preload | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欓煶棰戝湪欏甸潰鍔犺澆鏃惰繘琛屽姞杞斤紝騫墮澶囨挱鏀俱?/p> 濡傛灉浣跨敤 "autoplay"錛屽垯蹇界暐璇ュ睘鎬с?/p> |
| src | url | 瑕佹挱鏀劇殑闊抽鐨?URL銆?/td> |
鐩稿叧欏甸潰
鍙傝冩墜鍐岋細(xì)HTML 5 <audio> 鏍囩
]]>
HTML5 <video> - 浣跨敤 DOM 榪涜鎺у埗
HTML5 <video> 鍏冪礌鍚屾牱鎷ユ湁鏂規(guī)硶銆佸睘鎬у拰浜嬩歡銆?/p>
鍏朵腑鐨勬柟娉曠敤浜庢挱鏀俱佹殏鍋滀互鍙?qiáng)鍔犺浇绛夈傚叾涓殑灞炴э紙姣斿鏃墮暱銆侀煶閲忕瓑錛夊彲浠ヨ璇誨彇鎴栬緗傚叾涓殑 DOM 浜嬩歡鑳藉閫氱煡鎮(zhèn)紝姣旀柟璇達(dá)紝<video> 鍏冪礌寮濮嬫挱鏀俱佸凡鏆傚仠錛屽凡鍋滄錛岀瓑絳夈?/p>
涓嬩緥涓畝鍗曠殑鏂規(guī)硶錛屽悜鎴戜滑婕旂ず浜嗗浣曚嬌鐢?<video> 鍏冪礌錛岃鍙栧茍璁劇疆灞炴э紝浠ュ強(qiáng)濡備綍璋冪敤鏂規(guī)硶銆?/p>
瀹炰緥
涓鴻棰戝垱寤虹畝鍗曠殑鎾斁/鏆傚仠浠ュ強(qiáng)璋冩暣灝哄鎺т歡錛?/p>
涓婇潰鐨勪緥瀛愯皟鐢ㄤ簡涓や釜鏂規(guī)硶錛歱lay() 鍜?pause()銆傚畠鍚屾椂浣跨敤浜嗕袱涓睘鎬э細(xì)paused 鍜?width銆?/p>
HTML5 <video> - 鏂規(guī)硶銆佸睘鎬т互鍙?qiáng)浜嬩?/h2>
涓嬮潰鍒楀嚭浜嗗ぇ澶氭暟嫻忚鍣ㄦ敮鎸佺殑瑙嗛鏂規(guī)硶銆佸睘鎬у拰浜嬩歡錛?/p>
| 鏂規(guī)硶 | 灞炴?/th> | 浜嬩歡 |
|---|---|---|
| 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 |
娉ㄩ噴錛?/span>鍦ㄦ墍鏈夊睘鎬т腑錛屽彧鏈?videoWidth 鍜?videoHeight 灞炴ф槸绔嬪嵆鍙敤鐨勩傚湪瑙嗛鐨勫厓鏁版嵁宸插姞杞藉悗錛屽叾浠栧睘鎬ф墠鍙敤銆?/p>
]]>
璁稿鏃墮鐨勭綉绔欓兘鎻愪緵瑙嗛銆侶TML5 鎻愪緵浜嗗睍紺鴻棰戠殑鏍囧噯銆?/span>
媯(gè)嫻嬫?zhèn)ㄧ殑娴忚鍣ㄦ槸鍚︽敮鎸?HTML5 瑙嗛錛?/p>
Web 涓婄殑瑙嗛
鐩村埌鐜板湪錛屼粛鐒朵笉瀛樺湪涓欏規(guī)棬鍦ㄧ綉欏典笂鏄劇ず瑙嗛鐨勬爣鍑嗐?/p>
浠婂ぉ錛屽ぇ澶氭暟瑙嗛鏄氳繃鎻掍歡錛堟瘮濡?Flash錛夋潵鏄劇ず鐨勩傜劧鑰岋紝騫墮潪鎵鏈夋祻瑙堝櫒閮芥嫢鏈夊悓鏍風(fēng)殑鎻掍歡銆?/p>
HTML5 瑙勫畾浜嗕竴縐嶉氳繃 video 鍏冪礌鏉ュ寘鍚棰戠殑鏍囧噯鏂規(guī)硶銆?/p>
瑙嗛鏍煎紡
褰撳墠錛寁ideo 鍏冪礌鏀寔涓夌瑙嗛鏍煎紡錛?/p>
| 鏍煎紡 | 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 |
Ogg = 甯︽湁 Theora 瑙嗛緙栫爜鍜?Vorbis 闊抽緙栫爜鐨?Ogg 鏂囦歡
MPEG4 = 甯︽湁 H.264 瑙嗛緙栫爜鍜?AAC 闊抽緙栫爜鐨?MPEG 4 鏂囦歡
WebM = 甯︽湁 VP8 瑙嗛緙栫爜鍜?Vorbis 闊抽緙栫爜鐨?WebM 鏂囦歡
濡備綍宸ヤ綔
濡傞渶鍦?HTML5 涓樉紺鴻棰戯紝鎮(zhèn)ㄦ墍鏈夐渶瑕佺殑鏄細(xì)
<video src="movie.ogg" controls="controls"> </video>
control 灞炴т緵娣誨姞鎾斁銆佹殏鍋滃拰闊抽噺鎺т歡銆?/p>
鍖呭惈瀹藉害鍜岄珮搴﹀睘鎬т篃鏄笉閿欑殑涓繪剰銆?/p>
<video> 涓?</video> 涔嬮棿鎻掑叆鐨勫唴瀹規(guī)槸渚涗笉鏀寔 video 鍏冪礌鐨勬祻瑙堝櫒鏄劇ず鐨勶細(xì)
瀹炰緥
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
涓婇潰鐨勪緥瀛愪嬌鐢ㄤ竴涓?Ogg 鏂囦歡錛岄傜敤浜嶧irefox銆丱pera 浠ュ強(qiáng) Chrome 嫻忚鍣ㄣ?/p>
瑕佺‘淇濋傜敤浜?Safari 嫻忚鍣紝瑙嗛鏂囦歡蹇呴』鏄?MPEG4 綾誨瀷銆?/p>
video 鍏冪礌鍏佽澶氫釜 source 鍏冪礌銆俿ource 鍏冪礌鍙互閾炬帴涓嶅悓鐨勮棰戞枃浠躲傛祻瑙堝櫒灝嗕嬌鐢ㄧ涓涓彲璇嗗埆鐨勬牸寮忥細(xì)
瀹炰緥
<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>
Internet Explorer
Internet Explorer 8 涓嶆敮鎸?video 鍏冪礌銆傚湪 IE 9 涓紝灝嗘彁渚涘浣跨敤 MPEG4 鐨?video 鍏冪礌鐨勬敮鎸併?/p>
<video> 鏍囩鐨勫睘鎬?/h2>
| 灞炴?/th> | 鍊?/th> | 鎻忚堪 |
|---|---|---|
| autoplay | autoplay | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欒棰戝湪灝辯華鍚庨┈涓婃挱鏀俱?/td> |
| controls | controls | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欏悜鐢ㄦ埛鏄劇ず鎺т歡錛屾瘮濡傛挱鏀炬寜閽?/td> |
| height | pixels | 璁劇疆瑙嗛鎾斁鍣ㄧ殑楂樺害銆?/td> |
| loop | loop | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欏綋濯掍粙鏂囦歡瀹屾垚鎾斁鍚庡啀嬈″紑濮嬫挱鏀俱?/td> |
| preload | preload | 濡傛灉鍑虹幇璇ュ睘鎬э紝鍒欒棰戝湪欏甸潰鍔犺澆鏃惰繘琛屽姞杞斤紝騫墮澶囨挱鏀俱?/p> 濡傛灉浣跨敤 "autoplay"錛屽垯蹇界暐璇ュ睘鎬с?/p> |
| src | url | 瑕佹挱鏀劇殑瑙嗛鐨?URL銆?/td> |
| width | pixels | 璁劇疆瑙嗛鎾斁鍣ㄧ殑瀹藉害銆?/td> |
鐩稿叧欏甸潰
鍙傝冩墜鍐岋細(xì)HTML 5 <video> 鏍囩
]]>
HTML5 鏄笅涓浠ｇ殑 HTML銆?/span>
鏈暀紼嬪悜鎮(zhèn)ㄨ瑙?HTML5 涓殑鏂扮壒鎬с?/span>
姣忎竴绔犱腑鐨勫疄渚?/h2>
閫氳繃鎴戜滑鐨?HTML 緙栬緫鍣紝鎮(zhèn)ㄨ兘澶熺紪杈?HTML錛岀劧鍚庣偣鍑?yán)L寜閽潵鏌ョ湅緇撴灉銆?/p>
瀹炰緥
<!DOCTYPE HTML> <html> <body> <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> </body> </html>
璇風(fēng)偣鍑?TIY 鎸夐挳鏉ユ煡鐪嬪畠鏄浣曞伐浣滅殑銆?/p>
鐜板湪灝卞紑濮嬪涔?HTML5 錛?/p>
HTML5 鍙傝冩墜鍐?/h2>
鍦?W3School錛屾?zhèn)畣鎵惧埌鏈夊?HTML5 鏍囩銆佹爣鍑嗗睘鎬т互鍙?qiáng)鏍囧噯浜嬩欢绛夊唴瀹圭殑瀹屾暣鍙傝冦?/p>
]]>