前端越發展越復雜，知識點越來越龐雜。

前幾年號稱要一統前端江湖的backbone，估計新入行的童鞋都沒聽說過。前年很火的Angular也逐漸被React和Vue趕超和碾壓。

Backbone.js

React,Angular,Vue

但是，千變萬變，總是為了提升工作效率，提升用戶體驗而變，千萬要避免“亂花迷人眼”。夯實基礎，才能萬變不離其宗。

前端要學習三個部分：HTML，CSS，JavaScript（簡稱JS），因此首先明確三個概念：
HTML負責結構，網頁想要表達的內容由html書寫。
CSS負責樣式，網頁的美與醜由它來控制
JS負責交互，用戶和網頁產生的互動由它來控制。

以下，略小坑為大家整理了最新的前端學習知識點，大家可以保存到手機中，方便及時查看，自我檢查。

初級階段（靜態網頁制作、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開發 、搭建開發環境和相關技術介紹 、海量請求的應對方法 、監控服務器的各項指標、惡意請求的應對方法。

以上內容，涵蓋了28個大知識點和400多個小知識點。

按照這個路線圖學下去，相信你一定能成為前端到全棧的工程師!

2018前端學習知識點總結