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

基礎(chǔ)篇

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

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

●技術(shù)點(diǎn)小節(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語(yǔ)法規(guī)范    2.常用標(biāo)簽分類    3.W3C規(guī)范    4.了解SEO及運(yùn)用    5.CSS基本語(yǔ)法和選擇器    6.CSS樣式基礎(chǔ)庫(kù)    7.盒模型布局    8.浮動(dòng)和定位

●HTML5+CSS3

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

●常用瀏覽器兼容

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

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

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

交互篇

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

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

●JavaScript基礎(chǔ)

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

●DOM和BOM

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

●動(dòng)畫(huà)特效

1.各種運(yùn)動(dòng)模式    2.運(yùn)動(dòng)框架    3.無(wú)間斷大圖滾動(dòng)    4.tween.js和swiper.js

●事件交互

1.鍵鼠事件    2.滾動(dòng)事件封裝    3.事件阻止和冒泡

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

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

●Jquery和zepto

1.選擇器    2.事件操作和動(dòng)畫(huà)    3.常用插件的使用    4.自定義插件

●綜合實(shí)戰(zhàn)-動(dòng)態(tài)篇

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

進(jìn)階篇

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

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

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

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

●JS設(shè)計(jì)模式

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

●Canvas

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

●高級(jí)特性

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

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

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

●綜合實(shí)戰(zhàn)-移動(dòng)頁(yè)面篇

1.H5游戲：貪吃蛇    2.H5游戲：打飛機(jī)

全棧篇

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

●PHP+Mysql

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

●接口設(shè)計(jì)

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

●ThinkPHP

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

●安全攻防

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

●綜合實(shí)戰(zhàn)

1.前后端：書(shū)城展示頁(yè)    2.前后端：書(shū)城管理頁(yè)

高級(jí)篇

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

●開(kāi)發(fā)工具使用

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

●架構(gòu)模式

1.MVC    2.MVVM

●主流框架

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

●移動(dòng)端開(kāi)發(fā)

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

●框架開(kāi)發(fā)

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

●綜合實(shí)戰(zhàn)

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

實(shí)戰(zhàn)篇

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

●項(xiàng)目分析

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

●開(kāi)發(fā)流程

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

●實(shí)戰(zhàn)開(kāi)發(fā)

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

●項(xiàng)目考核

1.每日審查    2.項(xiàng)目會(huì)議    3.項(xiàng)目測(cè)試    4.提交上線