看看前端學習路線，你還有哪些沒掌握？

轉自：一點通

初級階段（靜态網頁制作、JS程式設計入門）

1.Photoshop入門

圖像處理基礎知識、圖像處理基礎知識、分辨率、圖像的色彩模式、常用的圖像檔案格式。Photoshop工作界面的介紹、檔案操作、圖像的顯示效果、圖像和畫布尺寸的調整、繪制和編輯選區、選區的操作技巧、漸變工具和油漆桶工具。圖像合成、圖層、蒙版、配色、切圖、色彩搭配原則。

2.網際網路基本原理

網際網路基本原理、伺服器、浏覽器、HTTP請求的概念。

3.HTML

程式設計工具介紹、HTML簡介。HTML語義化标簽、p标簽和h系列标簽。HTML基本骨架深入、HTML骨架。元資訊标記meta、設定頁面關鍵字、字元集、關鍵字、頁面描述。a标簽和img标簽，相對路徑、絕對路徑。ul、ol、dl标簽、div和span标簽介，表單知識。

4.CSS基礎和進階技巧

CSS介紹，選擇器。文字屬性、顔色屬性。繼承性和層疊性，權重計算。CSS盒模型，width、height、padding、border、margin屬性。父子嵌套模型，使用Fireworks精确還原設計圖。float浮動屬性、浮動的意義、清除浮動的方法。浏覽器相容，CSS hack。background系列屬性、css精靈、網頁上透明。超級連結的僞類、導覽列。position定位、定位小技巧。DIV+CSS布局。

5.靜态網站制作項目

搜尋引擎優化的概念、頁面常用SEO技巧、學會有格調的制作頁面。iconfont字型圖示。一些常見的CSS進階技巧，比如負margin、壓線技術、滑動門、列自撐技術。較複雜布局網站的學習，通欄banner、大背景等時下流行的網站制作方法。

中級階段（JS進階、HTML5和CSS3、Ajax和Canvas）

6.JavaScript基礎

語句、執行順序、詞法結構、辨別符、關鍵字、變量、常量、alert語句和console控制台。值和變量、數字、文本、布爾值、null和undefined。表達式和運算符、運算符概述。流程控制、指派語句、條件判斷語句、if語句、switch語句、循環控制語句、while語句、do…while語句、for循環。跳轉語句：continue、break。函數、參數、傳回值、遞歸、作用域、全局變量、局部變量。

7.JavaScript DOM程式設計

事件與事件處理概述、事件與事件名稱、常用事件、事件處理程式的調用、DOM事件模型、事件流、 事件對象、注冊與移除事件。文檔對象的常用屬性、方法與事件、輸出資料。事件的三要素。DOM對象、DOM概述、DOM分層、DOM級别、DOM對象節點屬性、周遊文檔樹、克隆删除替換。動畫基礎知識、定時器、setInterval和setTimeout、運動效果、 實用的動畫、制作運動效果。

8.JQuery頁面特效

jQuery對象和DOM對象、jQ選擇器、CSS操作、設定和擷取HTML、文本和值。事件、加載DOM、事件綁定、合成事件、事件對象的屬性。動畫、自定義動畫方法、動畫回調函數、停止動畫、其他動畫方法。jQuery對表單、表格的操作及更多應用、表單應用、表格應用。jQuery插件，jQueryUI，jQuery ease，jQuery mousewheel等。超多頁面特效！結合案例掌握了解jQuery插件的使用。

9.JavaScript進階

命名空間、對象擴充、數組化、主流架構引入的機制——domReady、無沖突處理。語言子產品、字元串的擴充與修複、數組的擴充與修複、數值的擴充與修複、函數的擴充與修複、 日期的擴充與修複、浏覽器嗅探與特征偵測 、判定浏覽器、事件的支援偵測、樣式的支援偵測。類工廠、JavaScript對類的支撐、各種類工廠的實作。浏覽器内置的尋找元素的方法、屬性子產品、如何區分固有屬性與自定義屬性。

10.HTML5和CSS3

HTML5概述、HTML5新特性、HTML5組織、HTML5構成、HTML5頁面的特征、HTML基礎、HTML5全局屬性、HTML5其他功能、HTML5元素分類。實戰HTML5表單、新增的input輸入類型。HTML5音頻與視訊、HTML5多媒體技術概述、在HTML5中播放音頻。CSS3編碼規範、了解CSS3新增特性。CSS選擇器、屬性選擇器、結構僞類選擇器、UI僞類選擇器。旋轉動畫、縮放動畫、移動動畫、傾斜動畫。3D炫酷動畫效果。

11.移動web和響應式頁面

視口、縮放 、分辨率、實體分辨率、裝置像素比、dppx和dpi 、meta視口。百分比布局、流式布局、CSS3新的流式盒模型。觸摸和指針事件、觸摸事件、手勢事件 、其他事件、拖放、滾動層、事件和互動模式、移動端互動綜合實戰。zepto.js、jQuery Mobile等移動端常見架構。HTML5速成移動端架構。Bootstrap3 、調整響應式導覽列斷點。移動優先、Bootstrap栅格系統、栅格系統原理、Bootstrap中的JavaScript互動、Bootstrap靈活開發。

12.JavaScript面向對象

建立對象、屬性的查詢和設定、 删除屬性、檢測屬性、枚舉屬性、屬性getter和setter、屬性的特性、對象的三個屬性、序列化對象、對象方法。類和子產品、類和原型、類和構造函數、類的擴充、類和類型、子類。原型、執行個體化和原型、 對象執行個體化、通過構造器判斷對象、繼承與原型鍊、構造函數和原型對象 、構造函數、原型對象 、[[Prototype]]屬性 、在構造函數中使用原型對象 、改變原型對象、内建對象的原型對象。

13.伺服器知識和PHP入門

背景語言和前台語言的差別。初識PHP、PHP語言的優勢、PHP 5的新特性、PHP的發展趨勢、PHP的應用領域。PHP環境搭建和開發工具。PHP語言基礎、PHP變量、PHP運算符、 PHP的表達式、PHP編碼規範、流程控制語句、字元串操作、PHP數組、 PHP與Web頁面互動。資料庫技術概述、增删改查。

14.Ajax

Ajax概述與Ajax初體驗、Ajax技術介紹、XMLHttpRequest對象詳解、動态加載和顯示資料、XMLHttpRequest對象概述、方法、屬性、發送請求、GET和POST請求、運作周期、使用JSON響應、Ajax實用包的封裝。JSON的解析、Underscore模闆引擎、模闆技術、動态組裝頁面、電話号碼歸屬地查詢、驗證碼等。Ajax實戰篇 、Ajax進階表單驗證程式 、Ajax動态關聯菜單、瀑布流。

15.Canvas和手機遊戲

Canvas繪圖、基本知識、了解canvas坐标系、擷取canvas環境上下文、了解路徑、路徑操作API 、繪制線條 、繪制矩形 、繪制圓弧 、繪制貝塞爾曲線 、線條屬性 、線條顔色 、填充 、繪圖狀态。圖像API、使用canvas繪制圖像、坐标變換、繪制文字。遊戲原理、制作2D遊戲引擎、了解遊戲循環、渲染引擎實作、使用引擎建構遊戲執行個體、遊戲常用算法。

進階階段（高端技術和進階架構）

16.Nodejs企業級應用

Node的特點、異步I/O、事件與回調函數、單線程、跨平台、Node的應用場景、I/O密集型、CommonJS規範、Node的子產品實作　、路徑分析和檔案定位、子產品編譯　、核心子產品、JavaScript核心子產品的編譯過程、網絡程式設計、建構TCP服務。建構HTTP服務、建構WebSocket服務、網絡服務與安全。MongoDB、Express、Mongoose、socket.io。小型微網誌系統、俄羅斯方塊對戰。Linux使用。

17.Angular.js主流架構

Angular基礎知識 、 Angular中的控制器 、Angular中的模闆 、Angular的過濾器、依賴注入、MVC模式 、Angular的服務 、與服務端互動 、Angular的指令。使用AngularJS建構一個單一頁面應用程式（SPAs：Single Page Applications）。

18.Backbone架構

了解Backbone、模型、集合、視圖、事件及其綁定 、RESTful服務、其他相關技術 、使用Require.js組織項目結構。模型(models)、集合(collections)、視圖(views)結構學習。綁定鍵值資料、自定義事件、可枚舉函數、聲明事件處理函數、RESRful JSON接口。

19.Yeoman腳手架

基本安裝、配置、HTML模闆、圖檔壓縮、建構工具、包管理器、JSLint測試。

20.Grunt和Gulp

GIT、SVN、Grunt、Gulp、Webpack。通過代碼優于配置的政策，Gulp 讓簡單的任務簡單，複雜的任務可管理。利用 Node.js 流的威力，你可以快速建構項目并減少頻繁的 IO 操作。通過最少的 API，掌握 Gulp 毫不費力，建構工作盡在掌握：如同一系列流管道。

21.Sass，less和stylus

GIT、SVN、Grunt、Gulp、Webpack。sass中可以定義變量，友善統一修改和維護。用sass進行選擇器的嵌套，表示層級關系。用sass中導入其他sass檔案，最後編譯為一個css檔案t。用sass中可用mixin定義一些代碼片段，且可傳參數，友善日後根據需求調用。

22.ECMAscript2016

簡介、let和const指令、變量的解構指派、字元串的擴充、正則的擴充、數值的擴充、數組的擴充、函數的擴充、對象的擴充、Symbol、Set和Map資料結構、Proxy、Reflect、Iterator和for...of循環、Generator函數、Promise對象、異步操作和Async函數、Class、Decorator、Module、程式設計風格、讀懂規格、二進制數組、SIMD

23.React建構視圖元件

React簡介、JSX、元件的生命周期、執行個體化、資料流、事件處理、元件的複合、mixin、DOM操作、動畫、性能優化、服務端渲染、周邊類庫。VUE資料模闆、生命周期、過濾器。

24.Vue界面的前端庫

遇見Vue.js、資料綁定、指令、計算屬性、表單控件綁定、過濾器、Class與Style綁定、過渡、綁定事件、元件、表單校驗、分組校驗、與服務端通信、RESTful調用。

25.Cordova和Phonegap

使用加速計和位置傳感器、檔案系統、存儲及本地資料庫、處理音頻、圖像和視訊、處理通訊錄、本地事件、使用XUI、使用jQuery Mobile進行使用者界面開發、PhoneGap插件擴充、開發工具及測試。

26.ionic 架構

Ionic和Hybrid應用介紹、配置開發環境 、Ionic導航和核心元件、頁籤、進階清單和表單元件、開發進階應用、使用 Ionic 指令行代理、在頁面中使用 ionScroll、過濾器：轉換視圖中的資料。

27.React Native移動開發

React Native簡介、React Native開發基礎、常用元件介紹及實踐、TextInput元件、九宮格實作、NavigatorIOS元件、Touchable類元件、狀态機思維與狀态機變量、深入了解UI重新渲染的過程、Navigator元件工作機制、混合開發基礎、元件生命周期、資料存儲及React Native應用實作步驟。

28.JS微信開發

微信公衆平台介紹 、使用雲平台快速搭建公衆賬号 、在新浪SAE上建立App、部署代碼 、開發接口的認證 、微信公衆平台API詳解：基礎接口 、回複消息、微信公衆平台API詳解：進階開發、各接口的調用頻次限制、客服接口 、二維碼開發 、wechat的JS開發 、搭建開發環境和相關技術介紹 、海量請求的應對方法 、監控伺服器的各項名額、惡意請求的應對方法。

好了，希望這裡的資料會對你有所幫助。