1.html5课ç¨
html5课ç¨
å¦HTML5è¦å¦åªäºè¯¾ç¨
å¯ä»¥å»H5eççï¼HTML5课ç¨èåäºHTML5å¼ååºç¡è¯¾ç¨ãCSS3åºç¡è¯¾ç¨å移å¨å端交äºJavaScript+JQuery+Ajexç课ç¨
å¹è®æºæHTML5课ç¨é½æåªäºå 容
æ¨å¥½ï¼Html课ç¨å æ¬ä»¥æ¥ä¸8个é¶æ®µï¼èª
é¶æ®µ1.åç«¯æ ¸å¿åºç¡
HTML +_CSSæ ¸å¿ãJavaScriptåºç¡è¯æ³ãJavaScripté¢å对象ãJavaScript DOMåBOMç¼ç¨ãjQueryæ¡æ¶
é¶æ®µ2.HTML5 + CSS3 + 移å¨ç«¯æ ¸å¿
HTML5æ°ç¹æ§ãCanvasä¸åãCSS3æ°ç¹æ§ãCSS3è¿é¶ãCSS3å®ä¾æ¼ç»
é¶æ®µ3.移å¨ç«¯
移å¨ç«¯æ ¸å¿ã移å¨ç«¯éé ã移å¨ç«¯ç¹æ
é¶æ®µ4.æå¡å¨ç«¯
æå¡å¨ç«¯å¼åãæ°æ®åºæä½ãåå端交äºæ ¸å¿ãå¾®ä¿¡å ¬ä¼å·å¼å
é¶æ®µ5.JavaScripté«çº§
JavaScriptåºç¡æ·±å ¥åæãJavaScripté¢åå¯¹è±¡æ·±å ¥è®²è§£ãJavaScriptå¼æ¥ç¼ç¨ãJavaScriptå½æ°å¼ç¼ç¨ãJavaScript设计模å¼
é¶æ®µ6.åç«¯å¿ å¤
æ§è½ä¼åãçæ¬æ§å¶å·¥å ·ã模ååã项ç®æå»ºå·¥å ·
é¶æ®µ7.é«çº§æ¡æ¶
Reactæ¡æ¶åºæ¬ä½¿ç¨ãReactæ¡æ¶è¿é¶ãVueæ¡æ¶åºæ¬ä½¿ç¨ãVueæ¡æ¶è¿é¶ãVueæºç åæ
é¶æ®µ8.å°ç¨åº
åçå°ç¨åºå ¥é¨ãåçå°ç¨åºAPI使ç¨ãå°ç¨åºæ¡æ¶Mpvue
å¸æå¯¹ä½ ææ帮å©ã
HTML5å¹è®ç©¶ç«æ¯å¦çä»ä¹
å¯ä»¥ççHTML5æ··åå¼å¼å课ç¨ä½ç³»äºè§£å个课ç¨é¶æ®µå¦ä¹ çå 容ï¼å¤§è´åä¸ä¸ªè¯¾ç¨é¶æ®µå¦ä¹ ï¼
第ä¸é¶æ®µï¼PCterminal
PC端页é¢éæ
1ã认ç¥è¡ä¸ãå²ä½ãé¨åä¸ä¸æ¯è¯ï¼å°±ä¸è¶å¿ä¸è¡ä¸æªæ¥å±æï¼
2ãHTML5æ ¸å¿å ç´ åå¸å±åºç¨ï¼
3ãCSS3æ ¸å¿å±æ§åå¸å±åºç¨ï¼
4ãå¾å½¢ãå¾å软件ç使ç¨ï¼PS,追底层源码FW,AIï¼ï¼
5ãæµè§å¨å ¼å®¹å解å³æ¹æ¡ï¼
6ãå¾çæ´åãæ»å¨é¨å宽é«èªéåºçé«çº§åºç¨ææ¯ï¼
7ãåæ¥æ¥è§¦JSã
PC端交äºå¼åï¼åçJSï¼
1ãjavascriptåºç¡è¯æ³ååéãæ§å¶è¯å¥ã循ç¯è¯å¥ãå½æ°ãäºä»¶å¤çãæ°ç»ã常è§æåºç®æ³ï¼
2ãDOMæä½åBOMæä½ï¼
3ãå®æ¶å¨ãCookieæ¬å°åå¨ãå 置对象ãæ£å表达å¼ãéå ãJSé¢å对象è¯æ³ãJSONãå æ ç»æï¼
4ãAjaxå¨æ读åæ°æ®ãå¼æ¥æä½ãä¸DOMãJSONçç»å使ç¨ï¼
5ãåç§ä¸»æµæµè§å¨å ¼å®¹æ§å¤çï¼
6ãåä¾ãå·¥åã代çãè§å¯è ç设计模å¼ï¼
7ãECMA6.0æ°ç¹æ§ä»ç»ã
PC端交äºå¼å ï¼JQueryï¼
1ãåè¯jQueryãjQueryçä¼å¿ãjQueryæ¡æ¶æ ¸å¿åè½ãæ容ææ··æ·çå 个æ¦å¿µ
2ãjQueryåç§éæ©å¨ç使ç¨ï¼åéæ©å¨çåºç¨ä¼åï¼
3ãDomèç¹æä½ãæå ¥ãå é¤ãå¤å¶ã移å¨èç¹çæä½ï¼
4ãäºä»¶å¤çãäºä»¶å¤ç模åãäºä»¶å¤çæºå¶ãjQueryäºä»¶å°è£ æºå¶ãjQueryäºä»¶åºç¨ï¼
5ãjQueryä¸çå¨ç»ãå¨ç»æ¶é´çæ¦å¿µãåºæ¬å¨ç»æ¹æ³ãå¤æå¨ç»æ¹æ³ãåæ¢å¨ç»ä¸åæ°è¯´æãjQueryå¨ç»çéåé®é¢ï¼
6ã表åå¼åï¼è®¾è®¡å¯ç¨æ§è¡¨åã表åéªè¯ãå¢å¼ºå表åï¼
7ãAjaxãXMLHttpRequest åºç¡ãjQuery Ajaxãå·¥å ·å½æ°ãç¼åï¼
8ãå¨jQueryä¸ç¼åæ件ãæ件æ©å±ãæ件åºç¨ãjQuery.paginationå页ãjQuery.qtipä¿¡æ¯æ示ã jQuery.artDialogå¼¹åºå±ãjQuery.jscrollpaneæ»å¨æ¡ï¼
9ãç解模åå¼å¼åï¼ä»¥årequirejsæ件ç使ç¨ã
PC项ç®å®è®
1ãäºè§£é¡¹ç®éæ±ï¼é¡¹ç®æµç¨ï¼
2ãäºè§£é¡¹ç®ç®¡çï¼æ¨¡ååé ï¼é¡¹ç®æ¶é´é¢ä¼°ï¼
3ãäºè§£äº§åå¨æï¼åä¸å¢éåä½ï¼
4ã综åè¿ç¨HTML+CSS,JS,JQ,JQUERY UI, jquery easyuiçææ¯ï¼å®æ大åPC端项ç®å¼åã
第äºé¶æ®µï¼Mobile terminal
HTML5+CSS3æ°æ·»ç¹æ§
1ãHTML5æ¦è¿°ï¼æ°å¢çå ç´ ååºé¤çå ç´ ãå ¨å±å±æ§ï¼
2ãHTML5åºç¡ï¼æ°å¢ææ¡£ç»æå ç´ ï¼Articleãsectionãnavï¼æºè½è¡¨åãæ件APIï¼FileList对象åFile对象ãFileReaderæ¥å£ï¼ãææ¾APIï¼
3ãCSS3åºç¡ï¼æ°å¢çå代éæ©å¨ã伪类éæ©å¨ãææ¬é´å½±ãåè§ãçé´å½±ãåå½¢å¤çï¼transformï¼ãå¨ç»ï¼transitionsï¼ã帧å®ä¹ï¼key-framesï¼ãæ转ï¼rotateï¼ã animationï¼
4ãHTML5å¤åªä½audioé³é¢å ç´ ãVideoè§é¢å ç´ ãè§é¢åè°äºä»¶ï¼
5ãæ¬å°åå¨web storageãæ¬å°ç¼åï¼
6ãå®ä½åºç¡ç¥è¯ä»¥ååçï¼ç»ågoogleï¼é«å¾·ï¼å°å¾å®ä½ï¼
7ãååºå¼å¸å±æ¦å¿µä»¥åè¯æ³ï¼@mediaï¼ãwebç½é¡µåmobileç½é¡µçåºå«ãæ ·å¼ç»§æ¿ï¼
8ãCanvasæ ç¾åºç¡ç¥è¯ãç»å¶ç©å½¢ãç»å¶åå½¢ã使ç¨è·¯å¾ãå¾åè£åªãä¿å为æ件ãå建å¨ç»ã
WebAPP项ç®å¼ååå®è®
1ãangular.jsãbackbone.jsï¼
2ãæ°æ®äº¤äºï¼ajaxä¸DOM交äºåºç¨ï¼
3ãHTML5+CSS3å¨å®é 项ç®ä¸çåºç¨ï¼
4ã项ç®ç®¡çï¼æ¨¡ååé ï¼é¡¹ç®æ¶é´é¢ä¼°ï¼
5ã产åå¨æï¼å¢éåä½ï¼
6ã微信åºæ¯å¼åï¼
7ã微信平å°äºå¨å¼åã
第ä¸é¶æ®µï¼æ··ååºç¨å¼ååå®è®
æ··ååºç¨å¼åå综åå®è®
1ãæ··åå¼ååçï¼
2ãAPPä¸webAPPï¼
3ãæ··ååºç¨ä¸HTML页é¢äº¤äºï¼
4ãéè¿å®¢æ·ç«¯ä¼ éæ°æ®ï¼
5ã项ç®ççæ¬è¿ä»£ï¼
6ã项ç®æå ä¸åºç¨ï¼çæAPKã
å¦HTML5è¦å¦åªäºè¯¾ç¨
HTML5çåæ¯æ¯é常好çï¼ä¼ä¸ç°å¨å®åãiOSå¼å人åé½å¨å¦ä¹ HTML5æ··åå¼åï¼è约ææ¬ãä¸ä¸å å¤è½å®¹æ¯æªæ¥å¾å¤ä¼ä¸ç¨äººè¶å¿ï¼HTML5å·¥ç¨å¸å¨ä»åçå·¥ä½ä¸ä¸AndroidãiOSå·¥ç¨å¸å¯¹æ¥çå çé常大ã
æ··åå¼å¼åææ³å¹è®åºæ¥çå¦åæ¯åä¸è¯¾ç¨å¦åèªæ°´é«è³å°å ï¼åæ¶ä¼ä¸ä¹æ´æ¿æå»è±æ´å¤çé±æ¥è请é£äºäºè§£æ¯è¾å ¨é¢çå¼å人åï¼
æ··åå¼å¼å讲å¸éè¦åæ¶ç²¾éAndroidãiOSãHTML5çå¤é¨è¯¾ç¨ï¼è¿æ ·æè½å¨æå¦è¿ç¨ä¸èåæ··åå¼å¼åææ³ï¼è®©å¦åè½å¤åæ¶äºè§£ä¸äºä¸æ¬è¯¾ç¨æç¸å ³çææ¯ï¼ä¸ºå¦åä»åå¨å·¥ä½ä¸ç对æ¥åé åå·¥ä½æä¾æ大å©åï¼å¯¹å¦åä»åçèä¸åå±ä¹ä¼æå¾å¤§å¸®å©ã
å¯ä»¥åå HTML5å¹è®ççå¦ä¹ ï¼æ¥æâæ··åå¼å¼åç¹è讲å¸âè¿ä¸å¤§ç¹è²çï¼æ··åå¼å¼å课ç¨å¯¹è®²å¸çè¦æ±é常ä¹é«ï¼è³å°åæ¶å ·å¤3å¹´æ以ä¸æå¦åææ¯ç»éªç讲å¸æå¯ä»¥èä»»ï¼è¿æ¯å ¶ä»æºææ æ³æä¾çï¼
å¦ä¹ 主è¦ä¹æ¯é èªå·±çï¼ç°å¨HTML5å¾ç«ï¼åæ¯æªæ¥5~å¹´å ç»å¯¹å¥½ï¼å¥½å¥½å¦ä¹ æ¿é«èªå·¥ä½æ¯æ²¡é®é¢çã
HTML5课ç¨ä¸é½æåªäº
åéç课ç¨è®¾ç½®å¤§æ¦æ¯è¿æ ·ï¼ç¬¬ä¸é¶æ®µç§»å¨å端å¶ä½åºç¡ï¼HTML5+CSS3åºç¡ï¼ç¬¬äºçé¶æ段移å¨å端交äºåºç¡ï¼JS+JQ+Ajaxï¼ç¬¬ä¸é¶æ®µç§»å¨å端综åå¼åï¼H5+C3+jQ Mobile+bootstrap+zeptoï¼ç¬¬åé¶æ®µé¡¹ç®å®è®
5å¹è®è¯¾ç¨é½å å«åªäºå 容
åéæ¥çæ ¹æ®å大ä¼ä¸éæ±åä¸æºä¸ªé¶æ®µï¼1ãå端页é¢éæï¼2ãJavaScripté«çº§ç¨åºè®¾è®¡ï¼3ãPCç«¯å ¨æ 项ç®å¼åï¼4ã移å¨ç«¯WebAppå¼åï¼5ãæ··å(Hybrid,RN)å¼åï¼6ãNodeJSå ¨æ å¼åï¼7大æ°æ®å¯è§åã
å¦5éè¦å¦åªäºè¯¾ç¨
HTML5ãCSS3ãJavaScriptãjQueryãAjaxãHTTPãVue/React/Angularä¸å¤§å端æ¡æ¶ççï¼è¿äºå¨åéé½è½å¦å°ã
æ³å¦ä¹ 5å¹è®ç课ç¨ï¼è°è½ä»ç»ä¸ä¸è¯¾ç¨çä½ç³»
ææäºèç½ç页é¢å¼åé½å¯ä»¥ç¨å°HTML5ï¼å æ¬PC端ï¼ææºç«¯åå¹³æ¿ã
HTML5é«ç«¯è¯¾ç¨å¤§çº²å为å个é¶æ®µã
第ä¸é¶æ®µï¼å端页é¢éæï¼
第äºé¶æ®µï¼JavaScripté«çº§ç¨åºè®¾è®¡ï¼
第ä¸é¶æ®µï¼PCç«¯å ¨æ å¼åï¼
第åé¶æ®µï¼ç§»å¨WebAppå¼åï¼
第äºé¶æ®µ : æ··å(RNï¼HybridAPP)å¼åï¼
第å é¶æ®µï¼NodeJSå¼åï¼
第ä¸é¶æ®µï¼æ¸¸æå¼åï¼
ç¬¬å «é¶æ®µï¼Javaå¼åï¼
第ä¹é¶æ®µï¼PHPå¼åï¼
第åé¶æ®µï¼Androidå¼åã
h5æ¯ä»ä¹5ç课ç¨å æ¬åªäºææ¯
æ¯ä¸ç§è¶ ææ¬æ è®°è¯è¨ï¼h5æ¯å°±æ¯ç第äºä»£ç®ç§°ã
h5å å«äºä¸ææææ¯ç¹ï¼
æ¯å¦ï¼ç½é¡µå±è®¾è®¡ï¼ç½é¡µä¸é¢çå¾çãæåãè§é¢çæ¾ç¤ºåæçææ¯ã
h5课ç¨ä¸è¬å å«ä¼ ç»ç½é¡µè®¾è®¡ææ¯ï¼æ°åç½é¡µè®¾è®¡UI设计ï¼æ¯å¦h5æµ·æ¥è®¾è®¡ççï¼ï¼ç±äºh5使ç¨åºæ¯ä½å± å段ï¼æ以课ç¨è¿ä¼æ¶åä¸äºäº§ååç¨æ·ä½éªä»¥å设计çå 容ã
5å¹è®è¯¾ç¨æåªäº
è§å¾åéçæºå¥½åï¼å¯ä»¥èèä¸ã