HTML5學(xué)習(xí)路線圖

基礎(chǔ)篇

適用/適合人群：適合零基礎(chǔ)小白

目標(biāo)：熟練掌握HTML和CSS搭建靜態(tài)頁面。

●技術(shù)點小節(jié)：

1.行業(yè)認(rèn)知和學(xué)習(xí)環(huán)境配置    2.前端發(fā)展歷史    3.瀏覽器發(fā)展歷史    4.編輯器安裝（sublime Text）    5.瀏覽器安裝（chrome）    6.Photoshop工具安裝

●XHTML+CSS2.0

1.XHTML語法規(guī)范    2.常用標(biāo)簽分類    3.W3C規(guī)范    4.了解SEO及運用    5.CSS基本語法和選擇器    6.CSS樣式基礎(chǔ)庫    7.盒模型布局    8.浮動和定位

●HTML5+CSS3

1.HTML5新標(biāo)簽    2.CSS3選擇器和屬性    3.CSS3過渡和動畫    4.CSS3動畫庫animate.css    5.響應(yīng)式布局    6.CSS3 彈性布局    7.移動適配基礎(chǔ)庫

●常用瀏覽器兼容

1.瀏覽器內(nèi)核    2.IE6/7/8適配兼容    3.怪異盒模型    4.常見瀏覽器兼容問題

●綜合實戰(zhàn)-靜態(tài)篇

1.京東/淘寶首頁實戰(zhàn)    2.360瀏覽器宣傳實戰(zhàn)    3.響應(yīng)式網(wǎng)站：意英網(wǎng)    4.CSS預(yù)處理器-Less    5.Bootstrap    6.github使用

交互篇

適用/適合人群：擁有一定的HTML，CSS等前端頁面搭建基礎(chǔ)

目標(biāo)：熟練搭建主流網(wǎng)站

●JavaScript基礎(chǔ)

1.表達(dá)式和數(shù)據(jù)類型    2.分支和循環(huán)結(jié)構(gòu)    3.數(shù)組和函數(shù)    4.js內(nèi)置對象    5.閉包和作用域    6.call，apply和bind

●DOM和BOM

1.DOM節(jié)點操作    2.動態(tài)腳本    3.動態(tài)樣式    4.選擇器API

●動畫特效

1.各種運動模式    2.運動框架    3.無間斷大圖滾動    4.tween.js和swiper.js

●事件交互

1.鍵鼠事件    2.滾動事件封裝    3.事件阻止和冒泡

●數(shù)據(jù)交互

1.正則表達(dá)式    2.JONS    3.Ajax    4.數(shù)據(jù)模擬工具（Mock.js）    5.cookie

●Jquery和zepto

1.選擇器    2.事件操作和動畫    3.常用插件的使用    4.自定義插件

●綜合實戰(zhàn)-動態(tài)篇

1.京東/淘寶首頁實戰(zhàn)    2.360瀏覽器宣傳頁實戰(zhàn)    3.移動端：鍋打灰太狼    4.響應(yīng)式網(wǎng)站：意英網(wǎng)    5.微信端：創(chuàng)想家圣典

進階篇

適用/適合人群：具有一定的HTML，CSS基礎(chǔ)，JavaScript基礎(chǔ)扎實。

目標(biāo)：具有系統(tǒng)化的編程設(shè)計思維

●JS面向?qū)ο蟮某绦蛟O(shè)計

1.面向?qū)ο笏枷?nbsp;   2.原型模式    3.再談call和apply，bind    4.再談閉包和作用域

●JS設(shè)計模式

1.設(shè)計原則    2.單例設(shè)計模式    3.代理設(shè)計模式    4.工廠設(shè)計模式

●Canvas

1.圖形繪制    2.圖片繪制    3.圖標(biāo)和視頻繪制    4.交互與動畫

●高級特性

1.HTML5新增API    2.高階函數(shù)    3.ES6

●Canvas游戲引擎設(shè)計

1.框架設(shè)計    2.接口設(shè)計    3.方法封裝    4.引擎實戰(zhàn)

●綜合實戰(zhàn)-移動頁面篇

1.H5游戲：貪吃蛇    2.H5游戲：打飛機

全棧篇

適用/適合人群：具有一定的HTML，CSS和JavaScript基礎(chǔ)。
目標(biāo)：掌握PHP，Mysql，安全攻防等技術(shù)，前后端融會貫通。

●PHP+Mysql

1.PHP基礎(chǔ)語法    2.Mysql    3.PHP和HTML混編

●接口設(shè)計

1.HTTP    2.Restful接口設(shè)計

●ThinkPHP

1.基礎(chǔ)API    2.架構(gòu)和路由    3.數(shù)據(jù)庫交互

●安全攻防

1.網(wǎng)絡(luò)爬蟲設(shè)計與實現(xiàn)    2.web安全基礎(chǔ)    3.XSS漏洞利用與防御    4.CSRF漏洞利用與防御    5.HTML5新特性安全

●綜合實戰(zhàn)

1.前后端：書城展示頁    2.前后端：書城管理頁

高級篇

適用/適合人群：具有一定的HTML，CSS和JavaScript基礎(chǔ)。
目標(biāo)：掌握主流框架的解決方案。

●開發(fā)工具使用

1.常用打包工具（webpack，grunt，Gulp）    2.質(zhì)量控制    3.模板引擎    4.babel    5.單元測試    6.項目腳手架運用

●架構(gòu)模式

1.MVC    2.MVVM

●主流框架

1.Vue.js    2.Angular.js    3.React.js

●移動端開發(fā)

1.Hybrid App開發(fā)    2.微信小程序和公眾號    3.React Native    4.Cordove，lonic

●框架開發(fā)

1.框架思想    2.封裝框架    3.組件化編程思想

●綜合實戰(zhàn)

1.移動端：數(shù)錢，睿士，美麗中國，小樣來挑戰(zhàn)    2.APP：游輪旅游APP    3.Vue：餓了嗎    4.pc：精英吧    5.小程序：豆瓣電影

實戰(zhàn)篇

適用/適合人群：具有扎實的HTML，CSS和JavaScript技術(shù)能力，深入的編程思想，熟練的框架使用。
目標(biāo)：熟練掌握企業(yè)項目開發(fā)流程，提高團隊寫作能力。

●項目分析

1.閱讀文檔    2.熟悉項目架構(gòu)源碼    3.項目架構(gòu)分析    4.業(yè)務(wù)邏輯分析

●開發(fā)流程

1.代碼管理工具    2.UML圖例    3.進度評估    4.編程規(guī)范

●實戰(zhàn)開發(fā)

1.任務(wù)迭代    2.項目重構(gòu)    3.Code Reiew

●項目考核

1.每日審查    2.項目會議    3.項目測試    4.提交上線