月入35k大佬總結：web前端必須學習的內容（附全套前端教程）

優秀的WEB前端工程師具有編寫任何一個互聯網系統的前端頁面、交互代碼的能力。根據對100家互聯網名企對Web開發工程師的招聘要求分析，企業要求主要有兩部分，一個是核心要求，一個是輔助要求，核心要求包括：語言技術：JS基礎和核心/HTML5/CSS三、框架技術：JQuery、AJAX、Bootstrap、AngularJS、通信協議技術：HTTP協議、服務端開發技術、交互技術：UI交互設計、客戶端技術：微信開發技術、html五、JS、SDK開發、Android、iOS、Web App開發技術。輔助要求有1-3年Web工做經驗(近80%的企業)、學歷及相關專業、文檔規範寫做能力、團隊合做能力，責任心。

Web前端的學習路線

第一階段——HTML的學習

超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，不管是靜態網頁仍是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染後呈現給用戶。因 此，咱們必須掌握HTML的基本結構和經常使用標記及屬性。

HTML 的學習是一個記憶和理解的過程，在學習過程當中能夠藉助Dreamweaver的「拆分」視圖輔助學習。在「設計」視圖中看效果，在「代碼」視圖中學本質， 將各類視圖的優點發揮到極致，這種對照學習的方法彌補了單純識記HTML標籤和屬性的枯燥乏味，想必對各位初學的小盆友們來講一定是極好的!

在這裏小編建了一個前端學習交流扣扣羣：132667127，我本身整理的最新的前端資料和高級開發教程，若是有想須要的，能夠加羣一塊兒學習交流

在學習了HTML以後，咱們只是掌握了各類「原材料」的製做方法，要想蓋一幢樓房就還須要把這些「原材料」按照咱們設計的方案組合佈局在一塊兒並進行一些樣式的美化。

因而進入第二個階段——CSS的學習

CSS是英文Cascading Style Sheets的縮寫，叫作層疊樣式表，是可以真正作到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是能夠複用的，這樣就極大地提升了咱們開發的速度，下降了維護的成本。

同時CSS中的盒子模型、相對佈局、絕對佈局等可以實現對網頁中各對象的位置排版進行像素級的精確控制。經過此階段的學習，咱們就能夠順利完成「一幢樓房」的建設。

「樓房」建設完成以後，咱們能夠交給用戶使用，可是若是想讓用戶得到更佳的體驗，咱們還能夠對「樓房」進行更深一步的「裝修」，讓它看起來更「豪華」一些。

爲了完成這個任務，咱們進入第三個階段——JavaScript的學習

JavaScript是一種在客戶端普遍使用的腳步語言，在JavaScript當中爲咱們提供了一些內置函數、對象和DOM操做，藉助這些內容咱們能夠來實現一些客戶端的特效、驗證、交互等，使咱們的頁面看起來不那麼呆板，屌絲瞬間逆襲高富帥!有麼有?

此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的項目經理卻忽然對你大吼道

「這個效果在××瀏覽器下不兼容，從新搞……」

「不兼容?」瞬間石化了有木有?

「那但是花了我一個晚上寫了幾百行代碼搞定的啊，吐血了都!」

JavaScript的兼容性和複雜性有時候的確讓咱們頭疼，還好有「大神」幫咱們作了封裝。

接下來咱們進入第四個階段——jQUery的學習

jQuery 是一個免費、開源的輕量級的JavaScript庫，而且兼容各類瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支持)，同時如今有不少基於jQuery的插件可供選擇，這樣在咱們實現一些豐富的動態效果時更方便快捷，大大節省了咱們開發的時間，提升了開發速度，這也充分體現了其 write less,do more的核心宗旨。這個Feel倍兒爽!有麼有?

「豪華大樓」至此拔地而起，可是天天這樣日復一日，年復一年的蓋樓，好繁瑣!能不能將大樓裏面每個單獨部件模塊化，當須要蓋樓時就像堆積木同樣組合在一塊兒，這樣豈不是爽歪歪?能夠實現嗎?答案是確定的。

這種思想在Web前端開發中也是適合的，因而乎就出現了各類前端框架，在這裏推薦給你們的是Bootstrap。

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，而且支持響應式佈局。一經推出後頗受歡迎，一直是GitHub上的熱門開源項目。

在項目開發過程當中，咱們能夠藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面佈局和樣式設置，而後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發週期。站在巨人的肩膀上就是爽!

Web前端的學習建議

最後給你們聊聊在學習Web前端中的一些建議和方法。零基礎對於代碼的學習記憶量很重要，正所謂讀書破萬卷，下筆若有神。寫代碼也是同樣，多寫、多練、多憶，好過再多的理論。知道了學習的方法，等於掌握了成功的祕訣，但這還不足以萬事具有，新手學習，最重要的還須要制定一條完整的學習線路。這樣學習起來效率是大大地好。

學習前端開發HTML5新手大體要分爲6大階段：

第一階段 前端頁面重構

第二階段 JavaScript高級程序設計

第三階段 PC端全棧項目開發

第四階段 移動端項目開發

第五階段 混合（Hybrid,ReactNative）開發

第六階段 WebApp後端系統開發

懶人目錄：

第一個階段：HTML5+CSS3

第二個階段：Web網頁開發

第三個階段：JavaScript 網頁編程

第四個階段：Node.js 與 AJAX

第一個階段：HTML5+CSS3：最新版Html5+Css3由淺入深教程

HTML5：瀏覽器與瀏覽器內核、語法及使用、經常使用標籤、語義化、表單元素、HTML5 新增標籤

CSS3：基本語法規範、經常使用的基本選擇器用法與技巧、複合選擇器使用、數值與單位、文字文本樣式、CSS盒子模型、CSS背景技巧、圓角、陰影、過渡等新屬性、定位和浮動、僞類和僞元素、chrome調試工具、CSS高級技巧（精靈圖、滑動門、CSS三角等）、CSS常見佈局技巧大全、網頁開發規範以及流程、CSS企業級網頁開發、網頁開發常見問題以及解決方案、CSS常見兼容性問題以及解決方案

電商項目：Photoshop 切圖、cutterman插件一鍵切圖、代碼組織原則、項目開發實戰流程、電商類複雜頁面佈局規範、CSS初始化技術選擇、CSS字體圖標使用、佈局技巧大全、完整的多頁面開發、網頁語義化設計、CSS頁面模塊化開發、複合選擇器的應用、複雜網頁結構排版、基本變換特效、電商類常見佈局問題解決方案

本階段學習關鍵詞：

HTML五、CSS三、語義化標籤、CSS3新屬性、盒子模型、定位與浮動、CSS 調試技巧、PS 切圖、網頁特效、靜態頁面開發、PSD文件還原網頁文件。

本階段須要掌握的能力：

瞭解經常使用瀏覽器和瀏覽器內核；

瞭解語義化的概念；

掌握 HTML 語法及使用技巧；

掌握 CSS 語法及使用技巧；

掌握 DIV+CSS 佈局方式；

掌握常見網頁佈局模式；

掌握 HTML5 經常使用標籤；

掌握 Photoshop 切圖以及插件切圖；

可以熟練使用開發人員工具進行頁面調試；

可以完成基本的動畫效果；

可以根據PSD文件獨立完成靜態頁面的開發工做；

可以使用CSS3新屬性美化修飾網頁。

第二階段：移動web網頁開發：移動web開發6天完整

​

H5C3進階：新佈局標籤、多媒體標籤、新增表單標籤、新增表單屬性、2D、3D 變換、animation 動畫、炫酷頁面開發

Felx伸縮佈局：傳統佈局的侷限性、Flex佈局優點、盒子父級常見屬性設置、盒子子級常見屬性設置、攜程網 Flex 移動端頁面開發

移動端開發：移動端屏幕介紹、移動端瀏覽器介紹、移動端操做系統介紹、真機調試、viewport 視口、rem 單位使用、移動端主流適配解決方案、常見移動端樣式兼容方案、預處理器 less、媒體查詢

本階段學習關鍵詞：

HTML5 標籤、CSS3 動畫、移動端適配、真機調試、rem、flex 佈局、媒體查詢、Bootstrap、Viewport、移動端調試

本階段須要掌握的能力以下：

掌握 HTML5 新佈局標籤、多媒體標籤；

掌握 CSS3 2D、3D 變換、動畫效果；

瞭解移動端屏幕、移動端瀏覽器、操做系統的不一樣；

掌握經常使用移動端調試方法；

掌握經常使用移動端適配方法；

掌握 CSS 預處理器 less 的使用；

掌握經常使用移動端框架使用方法；

掌握常見移動端頁面開發；

掌握響應式佈局開發；

掌握 Bootstrap 開發響應式頁面；

掌握適配不一樣終端的網頁開發技術選型。

第三個階段：JavaScript網頁編程：前端-Javascript基礎視頻教程-video

​

JavaScript 基礎：基本語法、經常使用數據結構、編碼規範約定、內置對象經常使用方法、常見 JavaScript 算法大全、對象的建立方式和 this 講解、構造函數

Web APIs編程：BOM 操做大全、DOM 操做大全、網頁特效大全、事件處理流程、瀏覽器兼容性解決方案、封裝動畫函數

JavaScript高級：面向對象思想、JavaScript 中的對象深刻理解、JSON 使用、閉包原理以及使用場景、原型以及原型鏈深刻剖析、做用域鏈深刻分析、函數的調用方式及 this 指向總結、正則表達式、面向對象理論與實踐、ECMAScript 2015 (ES6) 新語法

jQuery快速開發：jQuery 的優點、jQuery 選擇器、jQuery 中的動畫、鏈式編程和隱式迭代、插件使用和製做、常見網頁特效製做大全、團隊協做開發流程

本階段關鍵詞以下：

網頁編程、JavaScript 高級、面向對象、閉包、原型、原型鏈、ES六、正則表達式、DOM、BOM、動畫函數、jQuery、jQuery 插件

本階段所需掌握能力以下：

– 可以掌握 JavaScript 基本語法；

– 掌握常見 JavaScript 算法；

– 掌握 DOM 的各類操做；

– 熟練使用面向對象思想進行 DOM 編程；

– 掌握 JavaScript 的高級語法；

– 熟練使用 jQuery 操做 DOM；

– 熟練使用和編寫 jQuery 插件；

– 獨立完成電商網站的頁面搭建（包括 HTML 結構、CSS 樣式、JavaScript 特效）；

– 掌握應對業務編程的能力；

– 掌握 JavaScript 常見兼容性方案；

– 掌握團隊合做開發流程。

第四個階段：Node.js 與 AJAX：Nodejs教程精講

​

Node.js基礎：環境安裝、REPL 運行環境、Node 中的 JavaScript、模塊系統、模塊加載機制、模塊與包、NPM 經常使用命令、文件操做

異步編程：環境安裝、REPL 運行環境、Node 中的 JavaScript、模塊系統、模塊加載機制、模塊與包、NPM 經常使用命令、文件操做

Web開發：回調函數、Promise 對象、Generator 生成器函數、Async 函數、經常使用異步流程控制庫

Express：靜態網站與動態網站、使用 http 模塊建立 Web 服務、請求響應原理、HTTP 協議、處理頁面請求、處理表單提交、Cookie 與 Session、MySQL 數據庫、經常使用 SQL 語句、使用 Node 操做 MySQL 數據庫、博客項目

接口開發：安裝與初始化、路由系統、靜態資源處理、中間件使用及原理、經常使用第三方中間件、模板引擎、錯誤處理、調試 Express 應用、經常使用 API

前端模塊化：先後端分離架構模式、RESTFul API 設計、接口測試工具

AJAX編程：模塊化開發基本概念、模塊化演變過程分析、設計規範、Require.js、同步與異步概念、原生 AJAX、jQuery 的 AJAX 相關 API 使用、底層原理分析、緩存問題及解決方案、跨域請求及解決方案、前端模板引擎

本階段學習關鍵詞：

Node.js、CommonJS、JavaScript 模塊化、異步編程、服務端、MySQL、HTTP 協議、Express、Koa、Cookie、Session、中間件、分頁、註冊登陸、模塊化、CMS 系統開發、RESTful、Ajax、SQL

本階段所需掌握技能：

– 可以創建客戶端服務器交互模型，熟悉網絡通訊相關概念；

– 可以使用 Node.js 進行 Web 服務端開發；

– 可以掌握 JavaScript 異步編程模型；

– 可以掌握 JavaScript 模塊化編程方式；

– 可以使用 Node.js 操做 MySQL 數據庫；

– 可以理解 HTTP 協議；

– 熟悉原生 Ajax 請求流程與細節，並掌握常見跨域技巧；

– 可以基於 jQuery 的 Ajax 相關 API 熟練開發常見的前端功能；

– 可以獨立開發基於後臺接口的動態網站、Ajax 數據交互的項目；

– 可以獨立完成企業網站從前臺到後臺的基本開發工做。