第å大åå ï¼æç¨æ§
ãã俩个åå 使å¾ä½¿ç¨HTML5å建ç½ç«æ´å ç®åï¼è¯ä¹ä¸åå
¶ARIAãæ°çHTMLæ ç¾å<header>, <footer>ï¼<nav>ï¼<section>ï¼ <aside>ççï¼ä½¿å¾é
读è
æ´å 容æå»è®¿é®å
容ãå¨ä»¥åï¼å³ä½¿ä½ å®ä¹äºclassæè
IDä½ çé
读è
ä¹æ²¡æåæ³å»äºè§£ç»åºçä¸ä¸ªdiv究ç«æ¯ä»ä¹ã使ç¨æ°çè¯ä¹å¦çå®ä¹æ ç¾ï¼ä½ å¯ä»¥æ´å¥½çäºè§£HTMLææ¡£ï¼å¹¶ä¸å建ä¸ä¸ªæ´å¥½ç使ç¨ä½éªã
ããARIAæ¯ä¸ä¸ªW3Cçæ å主è¦ç¨æ¥å¯¹HTMLæç« ä¸çå
ç´ æå®âè§è²âï¼éè¿è§è²å±æ§æ¥å建éè¦ç页é¢å°å½¢ä¾å¦,headerï¼footerï¼navigationæè
aritcleå¾æå¿
è¦ãè¿ä¸ç¹æ¾ç»è¢«å¿½ç¥æäºå¹¶ä¸æ²¡æ被广æ³ä½¿ç¨ï¼å 为äºå®ä¸å¹¶ä¸éªè¯ãç¶èï¼HTML5å°ä¼éªè¯è¿æ ·å±æ§ãåæ¶ï¼HTML5å°ä¼å
建è¿äºè§è²å¹¶ä¸æ æ³ä¸è¦çãæ´å¤çHTML5åARIA讨论ï¼è¯·å¤§å®¶æ¥çè¿éã
ãã第ä¹å¤§åå ï¼è§é¢åé³é¢æ¯æ
ããå¿äºflashåå
¶å®ç¬¬ä¸æ¹åºç¨å§ï¼è®©ä½ çè§é¢åé³é¢éè¿HTML5æ ç¾<video>å<audio>æ¥è®¿é®èµæºãæ£ç¡®ææ¾åªä½ä¸ç´é½æ¯ä¸ä¸ªé常å¯æçäºæ
ï¼ä½ éè¦ä½¿ç¨<embed>å<object>æ ç¾ï¼å¹¶ä¸ä¸ºäºå®ä»¬è½æ£ç¡®ææ¾å¿
é¡»èµäºä¸å¤§å çåæ°ãä½ çåªä½æ ç¾å°ä¼é常å¤æï¼å¤§å å¾ä»¤äººè¿·æç代ç ãèä¸HTML5è§é¢åé³é¢æ ç¾åºæ¬å°ä»ä»¬è§ä¸ºå¾çï¼<video src=â"/>ãä½æ¯å
¶å®åæ°ä¾å¦å®½åº¦åé«åº¦æè
èªå¨ææ¾å¢ï¼ä¸å¿
æ
å¿ï¼åªéè¦åå
¶å®HTMLæ ç¾ä¸æ ·å®ä¹ï¼<video src=âurlâ width=â640pxâ height=â380pxâ autoplay/>ã
ããå®é
ä¸è¿ä¸ªè¿ç¨é常ç®åï¼ç¶èæ们çèæµè§å¨å¯è½å¹¶ä¸å欢æ们çHTML5ï¼ä½ éè¦æ·»å æ´å¤ä»£ç æ¥è®©ä»ä»¬æ£ç¡®å·¥ä½ãä½æ¯è¿ä¸ªä»£ç è¿æ¯æ¯<embed>å<object>æ¥çç®åçå¤ããã
ãã第å
«å¤§åå ï¼Doctype
ãã没éï¼å°±æ¯doctypeï¼æ²¡ææ´å¤å
容äºãæ¯ä¸æ¯é常ç®çï¼ä¸éè¦æ·è´ç²è´´ä¸å æ æ³ç解ç代ç ï¼ä¹æ²¡æå¤ä½çheadæ ç¾ãæ大ç好æ¶æ¯å¨äºï¼é¤äºç®åï¼å®è½å¨æ¯ä¸ä¸ªæµè§å¨ä¸æ£å¸¸å·¥ä½å³ä½¿æ¯å声ç¼èçIE6ã
ãã第ä¸å¤§åå ï¼æ´æ¸
æ°ç代ç
ããå¦æä½ å¯¹äºç®çï¼ä¼é
ï¼å®¹æé
读ç代ç ææå好çè¯ï¼HTML5ç»å¯¹æ¯ä¸ä¸ªä¸ºä½ é身å®åçä¸è¥¿ãHTML5å
è®¸ä½ ååºç®åæ¸
æ°å¯äºæè¿°ç代ç ã符åè¯ä¹å¦ç代ç å
è®¸ä½ åå¼æ ·å¼åå
容ãççè¿ä¸ªå
¸åçç®åæ¥æ导èªçheaer代ç ï¼<div id="header"> <h1>Header Text</h1> <div id="nav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div></div>æ¯ä¸æ¯å¾ç®åï¼ä½æ¯ä½¿ç¨HTML5åä¼ä½¿å¾ä»£ç æ´å ç®å并ä¸å¯æå«ä¹ï¼<header> <h1>Header Text</h1> <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav></header>
ãã使ç¨HTML5ä½ å¯ä»¥éè¿ä½¿ç¨è¯ä¹å¦çHTML headeræ ç¾æè¿°å
容æ¥æå解å³ä½ çdivåå
¶classå®ä¹é®é¢ã 以åä½ éè¦å¤§éç使ç¨divæ¥å®ä¹æ¯ä¸ä¸ªé¡µé¢å
容åºåï¼ä½æ¯ä½¿ç¨æ°ç<section>ï¼<article>ï¼<header>ï¼<footer>ï¼<aside>å<nav>æ ç¾ï¼éè¦ä½ è®©ä½ ç代ç æ´å æ¸
æ°æäºé
读ã
ãã第å
大åå ï¼æ´èªæçåå¨
ããHTML5ä¸æé
·çç¹æ§å°±æ¯æ¬å°åå¨ãæä¸ç¹åæ¯è¾èçææ¯cookieå客æ·ç«¯æ°æ®åºçèåãå®æ¯cookeæ´å¥½ç¨å 为æ¯æå¤ä¸ªwindowsåå¨ï¼å®æ¥ææ´å¥½çå®å
¨åæ§è½ï¼å³ä½¿æµè§å¨å
³éåä¹å¯ä»¥ä¿åã
ããå 为å®æ¯ä¸ªå®¢æ·ç«¯çæ°æ®åºï¼ä½ ä¸ç¨æ
å¿ç¨æ·å é¤ä»»ä½cookieï¼å¹¶ä¸ææ主æµæµè§å¨é½æ¯æã
ããæ¬å°åå¨å¯¹äºå¾å¤æ
åµæ¥è¯´é½ä¸éï¼ å®æ¯HTML5å·¥å
·ä¸ä¸ä¸ªä¸éè¦ç¬¬ä¸æ¹æ件å®ç°çãè½å¤ä¿åæ°æ®å°ç¨æ·çæµè§å¨ä¸æå³ä½ å¯ä»¥ç®åçå建ä¸äºåºç¨ç¹æ§ä¾å¦ï¼ä¿åç¨æ·ä¿¡æ¯ï¼ç¼åæ°æ®ï¼å è½½ç¨æ·ä¸ä¸æ¬¡çåºç¨ç¶æã
ãã第äºå¤§åå ï¼æ´å¥½çäºå¨
ããæ们é½å欢æ´å¥½çäºå¨ï¼æ们é½å欢对äºç¨æ·æåé¦çå¨æç½ç«ï¼ç¨æ·å¯ä»¥äº«åäºå¨çè¿ç¨ãè¾å
¥<canvas>ï¼HTML5çç»å¾æ ç¾å
è®¸ä½ åæ´å¤çäºå¨åå¨ç»ï¼å°±åæ们使ç¨Flashè¾¾å°çææã
ããé¤äº<canvas>ï¼HTML5åæ ·ä¹æ¥æå¾å¤APIå
è®¸ä½ å建æ´å 好çç¨æ·ä½éªå¹¶ä¸æ´å å¨æçwebåºç¨ç¨åºã è¿éæä¸ä¸ªå表ï¼
Drag and Drop (DnD)
Offline storage database
Browser history management
document editing
Timed media playback
ãã第å大åå ï¼æ¸¸æå¼å
ãã没éï¼ ä½ å¯ä»¥ä½¿ç¨HTML5ç<canvas>å¼å游æãHTML5æä¾äºä¸ä¸ªé常ä¼å¤§çï¼ç§»å¨å好çæ¹å¼å»å¼åæ趣äºå¨ç游æãå¦æä½ å¼åFlash游æï¼ä½ å°±ä¼å欢ä¸HTML5ç游æå¼åã
ããScript-tutorialsç®åæä¾äº4个ä¸é¨åçHTML5游æå¼åæç¨ï¼è¿éççä»ä»¬å¼åçæ趣游æï¼
HTML5 Gaming Development Lesson One
HTML5 Gaming Development Lesson Two
HTML5 Gaming Development Lesson Three
HTML5 Gaming Development Lesson Four
ãã第ä¸å¤§åå ï¼ éçåå
¶è·¨æµè§å¨æ¯æ
ããä½ çç°ä»£æµè¡æµè§å¨é½æ¯æHTML5ï¼Chromeï¼Firefoxï¼Safariï¼IE9åOperaï¼ï¼å¹¶ä¸å建äºHTML5 doctypeè¿æ ·ææçæµè§å¨ï¼å³ä½¿é常èé常令人åæ¶æµè§å¨åIE6é½å¯ä»¥ä½¿ç¨ãä½æ¯å 为èçæµè§å¨è½å¤è¯å«doctype并ä¸æå³å®å¯ä»¥å¤çHTML5æ ç¾ååè½ã幸è¿çæ¯ï¼HTML5å·²ç»ä½¿å¾å¼åæ´å ç®åäºï¼æ´å¤æ¯ææ´å¤æµè§å¨ï¼è¿æ ·èçIEæµè§å¨å¯ä»¥éè¿æ·»å javascript代ç æ¥ä½¿ç¨æ°çå
ç´ ï¼
<!--[if lt IE 9]> <script src="
http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
ãã第äºå¤§åå ï¼ ç§»å¨ï¼ç§»å¨è¿æ¯ç§»å¨
ããä½ å¯ä»¥ç§°ä¹ä¸ºâç´è§âï¼ä½æ¯æ认为移å¨ææ¯å°ä¼åå¾æ´å çæµè¡ãæç¥éï¼è¿éæäºé常ç¯çççæµï¼æäºå¯è½ä½ ä¹æ³å°äº â Mobileæ¯ä¸ä¸ªæ¶å°ï¼ç§»å¨è®¾å¤å°å é¢ä¸çãæ´å¤çæ¥å移å¨è®¾å¤å°ä¼å¢é¿çé常è¿
éãè¿æå³çæ´å¤çç¨æ·ä¼éæ©ä½¿ç¨ç§»å¨è®¾å¤è®¿é®ç½ç«æè
webåºç¨ãHTML5æ¯æ移å¨åçå¼åå·¥å
·ãéçAdobe宣å¸æ¾å¼ç§»å¨flashå¼åï¼ä½ å°ä¼èè使ç¨HTML5æ¥å¼åwebpåºç¨ãå½ææºæµè§å¨å®å
¨æ¯æHTML5é£ä¹å¼å移å¨é¡¹ç®å°ä¼å设计æ´å°ç触æ¸æ¾ç¤ºä¸æ ·ç®åãè¿éæå¾å¤çmetaæ ç¾å
è®¸ä½ ä¼å移å¨ï¼viewport: å
è®¸ä½ å®ä¹viewport宽度å缩æ¾è®¾ç½®ï¼å
¨å±æµè§å¨ï¼ ISOæå®çæ°å¼å
许Apple设å¤å
¨å±æ¨¡å¼æ¾ç¤ºï¼Home screen icons: å°±åæ¡é¢æ¶èï¼è¿äºå¾æ å¯ä»¥ç¨æ¥æ·»å æ¶èå°IOSåAndroid移å¨è®¾å¤çé¦é¡µã
ãã第ä¸å¤§åå ï¼ å®æ¯æªæ¥ï¼å¼å§ç¨å§ï¼
ããæ大çåå ä»å¤©ä½ å°±å¼å§ä½¿ç¨HTML5æ¯å 为å®æ¯æªæ¥ï¼ä¸è¦æéäºï¼HTML5ä¸ä¼å¾æ¯ä¸ªæ¹ååå±ï¼ä½æ¯æ´å¤çå
ç´ å·²ç»è¢«å¾å¤å
¬å¸éç¨ï¼å¹¶ä¸å¼å§çæå¼åãHTML5å
¶å®æ´åHTMLï¼å®ä¸æ¯ä¸ä¸ªæ°çææ¯éè¦ä½ éæ°å¦ä¹ ï¼å¦æä½ å¼åXHTML strictçè¯ä½ ç°å¨å°±å·²ç»å¨å¼åHTML5äºã为ä»ä¹ä¸æ´å®æ´ç享åHTML5çåè½å¢ï¼
ããä½ å®é
ä¸æ²¡æä»»ä½åå£ä¸æ¥åHTML5ãäºå®ä¸æå¯ä¸ä¸ä¸ªåå 使ç¨HTML5æ¯å 为å®ä¹¦å代ç ç®åæ¸
æ°ãå
¶å®çç¹æ§å
¶å®æä¹æ²¡æçæ£ä½¿ç¨ãä½ å¯ä»¥èèç°å¨å¼å§ä½¿ç¨HTML5书å代ç ï¼å®è½å¸®å©ä½ æ¹å书å代ç çæ¹å¼åå
¶è®¾è®¡æ¹å¼ãå¼å§ç¨HTML5代ç ç¼åwebåºç¨å§ï¼è¯´ä¸å®ä¸ä¸ä¸ªç§»å¨åºç¨æè
游æåºç¨å°±æ¯ç¨HTML5å¼åçï¼