HTML5學習路線圖

基礎篇

適用/適合人群：適合零基礎小白

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

●技術點小節(jié)：

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

●XHTML+CSS2.0

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

●HTML5+CSS3

1.HTML5新標簽    2.CSS3選擇器和屬性    3.CSS3過渡和動畫    4.CSS3動畫庫animate.css    5.響應式布局    6.CSS3 彈性布局    7.移動適配基礎庫

●常用瀏覽器兼容

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

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

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

交互篇

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

目標：熟練搭建主流網站

●JavaScript基礎

1.表達式和數據類型    2.分支和循環(huán)結構    3.數組和函數    4.js內置對象    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.事件阻止和冒泡

●數據交互

1.正則表達式    2.JONS    3.Ajax    4.數據模擬工具（Mock.js）    5.cookie

●Jquery和zepto

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

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

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

進階篇

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

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

●JS面向對象的程序設計

1.面向對象思想    2.原型模式    3.再談call和apply，bind    4.再談閉包和作用域

●JS設計模式

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

●Canvas

1.圖形繪制    2.圖片繪制    3.圖標和視頻繪制    4.交互與動畫

●高級特性

1.HTML5新增API    2.高階函數    3.ES6

●Canvas游戲引擎設計

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

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

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

全棧篇

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

●PHP+Mysql

1.PHP基礎語法    2.Mysql    3.PHP和HTML混編

●接口設計

1.HTTP    2.Restful接口設計

●ThinkPHP

1.基礎API    2.架構和路由    3.數據庫交互

●安全攻防

1.網絡爬蟲設計與實現    2.web安全基礎    3.XSS漏洞利用與防御    4.CSRF漏洞利用與防御    5.HTML5新特性安全

●綜合實戰(zhàn)

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

高級篇

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

●開發(fā)工具使用

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

●架構模式

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

實戰(zhàn)篇

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

●項目分析

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

●開發(fā)流程

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

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

1.任務迭代    2.項目重構    3.Code Reiew

●項目考核

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