body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;word-wrap:break-word}body,html,input{font:12px/1.5 Microsoft YaHei,tahoma,arial,\5b8b\4f53,sans-serif}table{border-collapse:collapse;border-spacing:0}img{border:0}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}h1,h2,h3,h4,h5,h6{font-size:100%}input.dialog{height:0;height:0;font-size:0;line-height:0;border:0}h1{font-size:34px}h2{font-size:26px}h3{font-size:18px}h4{font-size:16px}h5{font-size:14px}h6{font-size:12px}input,label,img,th{vertical-align:middle}.font-fixh{font-family:Georgia,Arial;color:red;font-size:16px;font-weight:700}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}input.button,input.btn{padding:.25em;width:auto;_width:0;overflow:visible!ie}ul,ol,li{list-style:none}a{text-decoration:none}a:hover{text-decoration:none}.white,.white a{color:#fff}.blue,.blue a{color:#049}.gray4,a.gray4{color:#999}.red,.red a,a.red{color:red}.green{color:#0E774A}select optgroup{color:#CAC8BB}header{display:block}.hidden{display:none}.invisible{visibility:hidden}.ib,.ib-a a{display:inline-block;zoom:1;*display:inline}.clearfix:after,.main:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix,.main{display:inline-block}* html .clearfix,* html .main{height:1%}.clearfix,.main{display:block}.f12{font-size:12px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f20{font-size:20px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px}.lh26{line-height:26px}.lh28{line-height:28px}.fb{font-weight:700}.fn{font-weight:400}.bk,.bk3,.bk6,.bk8,.bk10,.bk15,.bk20,.bk30{clear:both;font-size:1px;height:0;line-height:1px}.bk3{height:3px}.bk6{height:6px}.bk8{height:8px}.bk10{height:10px}.bk15{height:15px}.bk20{height:20px}.bk30{height:30px}.row-2 li{float:left;width:50%}.row-3 li{float:left;width:33%}.row-4 li{float:left;width:25%}.row-5 li{float:left;width:20%}.cu,.cu-li li,.cu-span span{cursor:hand;!important;cursor:pointer}.text-c{text-align:center}.text-l{text-align:left}.text-r{text-align:right}.lf{float:left}.rt{float:right}.pr{position:relative}.pa{position:absolute}.img-wrap{border:1px solid #eee;text-align:center;overflow:hidden}.img-wrap a{display:table-cell;vertical-align:middle;*display:block;overflow:hidden;background-color:#fff}.img-wrap a:hover{background-color:#e8eff6}.col-left{float:left}.col-auto{overflow:hidden;_zoom:1;_float:left}.col-right{float:right}.inner{width:1200px;margin:0 auto}.left{float:left}.right{float:right}.container{width:1200px;margin:0 auto}.box{-webkit-box-shadow:0 0 2px 1px rgba(208,206,206,.57);-moz-box-shadow:0 0 2px 1px rgba(208,206,206,.57);box-shadow:0 0 2px 1px rgba(208,206,206,.57);border:1px solid #dedede;border-radius:5px}
鐖卞垱璇惧爞HTML5鍏ㄦ爤鍓嶇璇剧▼锛屽叏缃戞渶楂樼锛佷笉鏈嶆潵杈╋紒
鏌ョ湅璇︽儏    

璇剧▼澶х翰 | COURSEOUTLINE

鍓嶇鍒囧浘浠旓紙闈欐€佺綉椤靛埗浣溿€丣S缂栫▼鍏ラ棬銆佸ぇ閲忛〉闈㈢壒鏁堝埗浣滐級

鍒濈骇璇剧▼涓昏瀛︿範鏈€鍩烘湰鐨勭綉椤靛埗浣滄妧鏈€備綘灏嗗浼氬埗浣滄紓浜殑缃戦〉銆佸悇寮忓悇鏍风殑椤甸潰鏁堟灉銆傚垵绾ц绋嬪叡16涓暀瀛︽棩銆?/p>

           
浜掕仈缃戝師鐞嗗拰HTML
WEB鍓嶇鐜扮姸锛孖DE鐜浠嬬粛瀹夎閰嶇疆锛學ebStorm浣跨敤锛孌TD鏂囨。妯″瀷锛孒TML楠ㄦ灦锛屾鏋堕泦涓庡竷灞€锛孎orm琛ㄥ崟绛夌瓑
           
CSS鍏ラ棬鍜岄珮绾ф妧宸?/div>
CSS鍩烘湰鏍峰紡銆佸熀纭€閫夋嫨鍣ㄣ€侀€夋嫨鍣ㄤ紭鍏堢骇銆佹诞鍔ㄣ€佸畾浣嶃€佺洅瀛愭ā鍨嬨€佹€紓鐩掑瓙妯″瀷銆佷几缂╃洅瀛愭ā鍨嬬瓑绛?/div>
           
HTML5
HTML5鏂板鍏冪礌銆佸睘鎬с€丠TML瀹炰綋銆佺紪鐮佹牸寮忕瓑绛?/div>
           
CSS3
閫夋嫨鍣ㄣ€佹枃鏈€佽儗鏅牱寮忋€?D鍙樻崲銆佽繃娓°€佸姩鐢汇€佺粯鍒剁壒娈婂浘褰㈢瓑绛?/div>
           
Bootstrap鍜屽搷搴斿紡
濯掍綋鏌ヨ銆乬rid銆佸鍒楀竷灞€銆丅S鏍呮牸绯荤粺銆佹帓鐗堛€佽〃鏍笺€佽〃鍗曘€佹寜閽€佸浘鐗囥€佽緟鍔╃被銆佸搷搴斿紡宸ュ叿銆佸鑸€佸窘绔犮€佸法骞曘€侀〉闈€佺缉鐣ュ浘銆佽鍛婃銆佽繘搴︽潯銆侀潰鏉跨瓑绛?/div>
           
DOM缂栫▼
DOM姒傝堪銆丏OM鍒嗗眰銆丏OM绾у埆銆丏OM瀵硅薄鑺傜偣灞炴€э紝DOM浜嬩欢妯″瀷銆佷簨浠舵祦绛夌瓑
           
BOM缂栫▼
window瀵硅薄銆亀indow瀵硅薄鐨勫睘鎬с€佸璇濇銆佺獥鍙d簨浠剁瓑绛?/div>
           
ECMAScript
ECMAScript 鏍囧噯锛屾暟鎹被鍨嬶紝鍒ゆ柇璇彞锛屽惊鐜鍙ワ紝鍑芥暟銆佹鍒欒〃杈惧紡绛夌瓑

鍏ㄦ爤灏忚兘鎵嬶紙娣卞叆JS鍐呭姛淇偧銆佽秴绾х偒閰风殑HTML5鍜孋SS3銆丄jax鍜屾墜鏈烘父鎴忥級

涓骇璇剧▼灏嗕娇浣犵殑JavaScript缂栫▼鑳藉姏澶уぇ鎻愬崌锛佹垜浠皢瀛︿範鍒朵綔鑳藉鍜屽悗鍙颁氦浜掓暟鎹殑Ajax椤甸潰銆侀潪甯哥偒閰风殑CSS3椤甸潰锛佹洿灏嗗涔犳墜鏈虹鐨勫搷 搴斿紡椤甸潰鍒朵綔銆傛湰閮ㄥ垎鍏?0涓暀瀛︽棩銆?/p>

           
GIT
甯哥敤鎸囦护銆佽祫婧愮姸鎬併€佸缓绔嬩俊浠诲叧绯汇€佸垱寤虹増鏈簱銆佹洿鏂扮増鏈簱绛夌瓑
           
ES5
鏁扮粍鎷撳睍锛屽璞℃帹灞曪紝鍑芥暟鎷撳睍锛屼弗鏍兼ā寮忕瓑绛?/div>
           
seajs妯″潡鍖栧紑鍙?/div>
妯″潡绯荤粺锛孋MD 妯″潡瀹氫箟瑙勮寖锛屾ā鍧楁爣璇嗭紝require 涔﹀啓绾﹀畾锛屾ā鍧楃殑鍔犺浇鍚姩锛孖D 鍜岃矾寰勫尮閰嶅師鍒欑瓑绛?/div>
           
requireJS妯″潡鍖栧紑鍙?/div>
AMD瑙勮寖锛屽姞杞?JavaScript 鏂囦欢锛宒ata-main 鍏ュ彛鐐癸紝瀹氫箟妯″潡锛岋紝绠€鍗曠殑鍊煎锛屽嚱鏁板畾涔夌瓑绛?/div>
           
Node.js鍏ㄦ爤瀹炶返
寮傛I O锛屾瀯寤篐TTP鏈嶅姟锛岃鍐欐枃妗f祦锛岀綉缁滄湇鍔′笌瀹夊叏绛夌瓑
           
寰俊灏忕▼搴?/div>
鍏ㄥ眬閰嶇疆銆丄pp搴旂敤绋嬪簭銆丳age椤甸潰銆佹ā鍧楀寲寮€鍙戙€佽矾鐢便€両f鎸囦护涓巉or鎸囦护銆佹ā鏉裤€佷簨浠躲€佸紩鍏ユ枃浠剁瓑绛?/div>
           
椤圭洰瀹炴垬
绮剧編浼佷笟绔欒祻鏋愪笌鍒朵綔锛屼釜浜轰綔鍝佹寚瀵肩瓑绛?/div>
           
JQuery缂栫▼
閫夋嫨鍣ㄣ€丏OM灞炴€с€佷簨浠讹紝鐗规晥锛孉jax锛屽姩鐢荤瓑绛?/div>
           
鍓嶇绠楁硶
鍐掓场鎺掑簭銆佸揩閫熸帓搴忋€佹彃鍏ユ帓搴忋€佹暟缁勫幓閲嶃€侀€掑綊銆侀殢鏈烘暟绠楁硶绛夌瓑
           
绉诲姩绔紑鍙?/div>
绉诲姩绔紑鍙戠幆澧冮厤缃紝甯哥敤妗嗘灦瀛︿範绛夌瓑
           
闈㈠悜瀵硅薄缂栫▼
鍘熷瀷銆佸疄渚嬪寲鍜屽師鍨嬨€?瀵硅薄瀹炰緥鍖栥€侀€氳繃鏋勯€犲櫒鍒ゆ柇瀵硅薄銆佺户鎵夸笌鍘熷瀷閾俱€佹瀯閫犲嚱鏁板拰鍘熷瀷瀵硅薄 銆佹瀯閫犲嚱鏁般€佸師鍨嬪璞$瓑绛?/div>
           
HTML5娓告垙寮€鍙?/div>
Canvas缁樺浘銆佸熀鏈煡璇嗐€佸潗鏍囩郴銆佸苟浜叉墜鍒朵綔鎰ゆ€掔殑灏忛笩绛夋父鎴?/div>
           
3D鐗规晥涓巜ebGL
3D鍙樺舰銆乸erspective銆?d鏃嬭浆銆佹棆杞酱銆佺┖闂寸Щ鍔ㄣ€佸悇绉?d鏁堟灉銆?d杞挱鍥俱€亀ebGL绛?/div>
           
澶ф暟鎹?/div>
鏁版嵁绠$悊锛屾暟鎹鐞嗭紝鏁版嵁闆嗗悎锛屽彲瑙嗗寲澶ф暟鎹瓑绛?/div>
           
Ajax
PHP涓庢湇鍔″櫒鎼缓锛孭HP鍙橀噺銆佽繍绠楃銆?琛ㄨ揪寮忋€佺紪鐮佽鑼冦€乆MLHttpRequest灏佽銆丣SON鐨勮В瑙f瀽
           
LBS瀹氫綅绯荤粺
鍦板浘瀹氫綅銆佺櫨搴﹀钩鍙般€佽吘璁钩鍙扮瓑绛夊浘鍍忓鐞嗗熀纭€鐭ヨ瘑銆佸浘鍍忓鐞嗗熀纭€鐭ヨ瘑銆佸垎杈ㄧ巼銆佸浘鍍忕殑鑹插僵妯″紡銆佸父鐢ㄧ殑鍥惧儚鏂囦欢鏍煎紡銆侾hotoshop宸ヤ綔鐣岄潰鐨勪粙缁嶃€佹枃浠舵搷浣溿€佸浘鍍忕殑鏄剧ず鏁堟灉

楂樼骇鏋舵瀯鐙紙鍚勭楂樼鎶€鏈斁椹繃鏉ワ紒鏃朵笅鏈€鏂板叴銆侀潰璇曟渶鍔犲垎鐨勯珮绾ф妧鏈簲鏈夊敖鏈夛紒锛?/h2>

閫氬線鍓嶇澶х涔嬭矾锛屽氨鍦ㄧ埍鍒涜鍫傚墠绔珮绾ц绋嬨€傛垜浠皢瀛︿範鍏ㄦ爤鎶€鏈紝銆庝笂澶╁叆鍦般€忥紒涓婂ぉ锛屾垜浠鍋氭湇鍔″櫒绔紑鍙戯紱鍏ュ湴锛屾垜浠鍋氭墜鏈虹寮€鍙戙€?杩樺皢缁煎悎鍒╃敤鎵€瀛︼紝缁撳悎鏃朵笅娴佽鐨凪VC妗嗘灦锛屽埗浣滅患鍚堥」鐩紒鏈儴鍒嗗叡44鏁欏鏃ャ€?/p>

           
vue2.0
Vue 瀹炰緥锛屾暟鎹粦瀹氳娉曪紝璁$畻灞炴€э紝Class 涓?Style 缁戝畾锛屾潯浠舵覆鏌擄紝鍒楄〃娓叉煋锛屾柟娉曚笌浜嬩欢澶勭悊鍣ㄧ瓑绛?/div>
           
Backbonejs
Underscore锛屾ā鍨嬶紝闆嗗悎锛岃鍥撅紝浜嬩欢锛岃矾鐢辩瓑绛?/div>
           
React
灞炴€э紝鐘舵€侊紝鐢熷懡鍛ㄦ湡锛屾贩鍚堬紝铏氭嫙DOM锛岄」鐩疄鎴樼瓑绛?/div>
           
璁捐妯″紡
宸ュ巶妯″紡銆侀€傞厤鍣ㄦā寮忋€佺粍鍚堟ā寮忋€佸懡浠ゆā寮忋€佽瀵熻€呮ā寮忋€佺瓥鐣ユā寮忕瓑绛?/div>
           
MVC,MVP,MVVM椤圭洰瀹炴垬
鏁版嵁鏄剧ず锛岃緭鍏ワ紝琛ㄥ崟锛屼緷璧栨敞鍏ワ紝妯℃澘璇硶锛岀閬擄紝璺敱锛岀敓鍛藉懆鏈燂紝 灞炴€ф寚浠わ紝缁撴瀯鎸囦护锛屽垎绾ф敞鍏ョ瓑绛?/div>
           
ES6
绫伙紝缁ф壙锛岀澶村嚱鏁帮紝妯℃澘锛屾ā鍧楋紝闈欐€佸彉閲忥紝鍧楃骇浣滅敤鍩熺瓑绛?/div>
           
TypeScript
甯冨皵鍨嬶紝鏁板€煎瀷锛屽瓧绗﹀瀷锛屾暟缁勶紝鏋氫妇鍨嬶紝浠绘剰绫诲瀷锛屽嚱鏁扮┖绫诲瀷锛屽嚱鏁扮殑瀹氫箟涓庤皟鐢紝鍖垮悕鍑芥暟锛屽彲閫変笌榛樿鍙傛暟绛夌瓑
           
gulp
瀹夎gulp锛実ulpfile js锛屽姞杞芥彃浠讹紝寤虹珛浠诲姟锛岀紪璇戯紝鎵撳寘锛屽帇缂╋紝浼樺寲锛屼簨浠剁洃鍚瓑绛?/div>
           
webpack
Webpack-dev-server銆佸浘鐗囧姞杞芥満銆佸帇缂﹋s鎻掍欢銆佺幆澧冨彉閲忋€佸叏灞€鍙橀噺銆丠ot module銆丷eact 缂栬瘧绛夌瓑
           
FIS
璧勬簮瀹氫綅锛岄厤缃枃浠讹紝鏂囦欢鎸囩汗锛屽帇缂╄祫婧愶紝鏂囦欢鐩戝惉锛屽唴瀹瑰祵鍏ワ紝瀹氫綅璧勬簮锛屽0鏄庝緷璧栫瓑绛?/div>
           
Reflux&&Redux
Action锛宒ispatcher锛寁iew锛宻tore绛夌瓑
           
vueX
鍒涘缓Store銆丼tate鏍戙€佸姩鎬佺姸鎬併€丮utations銆丄ction銆丮odules鍒囧壊妯″潡绛夌瓑
           
ReactNative
鍐呯疆缁勪欢銆佹牱寮忔ā鍧椼€丗lexbox銆佽〃鍗曘€佹粴鍔ㄨ鍥俱€佸垪琛ㄣ€佺綉缁滆姹傜瓑绛?/div>
           
棰勭紪璇?/div>
less锛宻ass锛宻tylus涓夌css棰勭紪璇戣瑷€锛岄€夋嫨鍣紝鍙橀噺锛屾彃鍊硷紝杩愮畻绗︼紝娣峰悎锛屾柟娉曪紝鍏抽敭瀛楋紝鍐呯疆鏂规硶锛屽弬鏁帮紝娉ㄩ噴锛岃凯浠o紝鏉′欢锛宨mport锛宮edia锛宖ont-face锛宬eyframes锛宔xtend锛寀rl绛夌瓑
           
Angular6.0
ES6涓嶵ypescript銆佹祻瑙堝櫒绔紪璇憈s涓庢暟鎹被鍨嬨€佸伐绋嬪寲缂栬瘧TS涓庢暟缁勭被鍨嬨€乮nterface涓庡嚱鏁版帴鍙c€佸璞℃帴鍙c€佺被鎺ュ彛绛夌瓑
           
Angular6.0
ES6涓嶵ypescript銆佹祻瑙堝櫒绔紪璇憈s涓庢暟鎹被鍨嬨€佸伐绋嬪寲缂栬瘧TS涓庢暟缁勭被鍨嬨€乮nterface涓庡嚱鏁版帴鍙c€佸璞℃帴鍙c€佺被鎺ュ彛绛夌瓑