Web前端應用場景會隨著移動互聯和大資料而得到更加豐富，很多內容需要透過前端進行展示，學習Web前端首先是一個很好的選擇。

Web前端的學習對於從零開始的學習者來說是很容易上手的，語法簡單，使用環境簡單，零基礎的初學者在學習過程中容易建立起學習的信心，並且前端開發對基礎知識的要求比較低。

不過，前端學習的內容會比較多，所以，在學習過程中要有一套系統的學習方法。

Web前端學習

前端三大基礎：HTML、CSS 、JavaScript

前端三大基礎，學習順序為：HTML＞CSS＞JavaScript。

其中，JavaScript要學習的東西多而混亂，要取其精華，去其糟粕，對於語言精華，應該深入學習。

不光要看書，還得練習，練習方面的建議是去W3Cschool官網看看，邊學邊練，每章後還有小測試。

學完上面的技能，你就可以簡單的設計一般的靜態網頁了，不過這還遠遠不夠。

推薦幾本書籍：

《html5從入門到精通》

這本書講的很系統，作為入門書籍，也比較容易懂，最重要的是有光碟教學，可以放電腦上看看。

css的書籍，這本書也有涵蓋html5，有承上啟下的作用。

比較出名的一本javascript，被讀者稱為犀牛書，很推薦。

框架：React、Angular 或者 Vue

這裡就提出Vue 、Angular 、React，大部分人稱為VAR，這三個是目前最流行的前端框架。

為什麼沒有jQuery？確實，初學者認為使用jQuery就可以寫出任何特效效果，但是它並不是前端的全部，在工作時間久了之後才會發現，jQuery只是滿足當下的業務需求，技術框架是隨時會變的。

當然，學習jQuery沒有問題，只是多學會框架，有助於提升你的個人技術能力，和你的職場競爭力。

打包工具：Webpack 和 gulp

進階：Node.js 體系（包括 Node.js 服務端開發，npm 等）

Github developer-roadmap 專案整理了一份Web前端開發人員學習路線圖，值得看一看。

圖片中不同顏色的意義：

黃色：推薦；灰色：儘可能學習；橙色：任選其一。Web前端發展

學習Web前端最好能夠向全棧方向發展，這樣可以讓你在職場中更具有競爭力。

路線，教程，資源，相信搜商還好的都可以在網上找到一些好或更好的文章和部落格。在這一一贅述沒什麼必要。就簡單的說下這個行當吧，我也是轉行做前端的，之前完全沒有任何程式設計知識，只能說，這是個需要不斷學習，不斷納新的行當，準備好足夠的堅持和勇氣再入行吧，不然浪費的不僅僅是錢和時間，更有最青春的年華

Web前端工程師不僅是一門高薪職業，除了掙公司日常的薪水外，很多技術不錯的Web前端工程師可以在工作之餘的時間在網上或外包公司那裡接一些私單做。除了可以掙點外快貼補家用，還可以用最低的價格來提升自身競爭力，獲得大量訂單就意味著獲得大量的實踐機會，讓自己的Web前端知識能夠得到及時更新，為自己職業生涯的下一步晉升打下基礎。

1.HTML5介紹

內容包括：網際網路發展趨勢、H5語言的優勢、簡單易學人人都能程式設計、H5就業和薪資情況、H5常見的專案與產品、H5的未來與方向。

2.HTML基礎

內容包括：HTML簡介與歷史版本、常用開發軟體、常見標籤與屬性、表格與表單、標籤規範與標籤語義化、實戰：網頁結構佈局。

3.CSS基礎

內容包括：css簡介與基本語法、常見的各種樣式屬性、CSS選擇器與標籤型別、理解盒子模型與CSS重置、浮動與定位、利用photoshop工具測量樣式、HTML+CSS開發網頁、實戰：高仿電商首頁效果。

4.CSS3基礎

內容包括：css3常見樣式、css3選擇器、變形與動畫、3D效果與關鍵幀、彈性盒模型。

5.移動端佈局

內容包括：移動端基本概念、viewport視窗設定、移動端佈局方案、rem、vh、vw等單位、響應式佈局、bootstrap框架。

6. JavaScript基礎

內容包括：JS簡介、JS變數、資料型別與型別轉換、運算子與優先順序、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for迴圈、break、continue語法、函式定義與呼叫、全域性變數與區域性變數、函式傳參與返回值、函式作用域與變數作用域。

而且還有DOM的基本操作、定時器使用、this指向與修改指向、陣列、字串等方法操作、時間物件與正則物件、掌握常見BOM操作、常見事件與事件細節、JSON與AJAX、JSONP跨域操作、前端cookie的使用、實戰：JS配合HTML與CSS完成電商專案。

7.jquery框架

內容包括：jquery框架介紹及優勢介紹、jquery核心思想、jquery常見方法、jquery動畫操作、jqueryAJAX操作、jquery工具方法、利用jquery快速開發網頁。

8.PHP基礎

9.H5基礎專案

內容包括：專案簡介、專案功能演示、專案劃分及框架、編寫HTML頁面結構、設定CSS樣式、新增JS互動、可選框架：bootstrap、jquery、PHP等、專案除錯及相容、專案驗收。

剛開始學習HTML+CSS的時候，我並沒有費多長的時間，感覺很輕鬆，而且做了不少的精美靜態網頁。但是當我學習PHP的時候，跟著書學習就完全看不懂了，根本沒法理解書上說的專業術語，這讓我一度想到自己不適合學習這個，但是過後情緒穩定了也就好了，我總是遇到難題的時候就想自己太笨了，這個我心態有點不好。所以在這裡不建議想學習web前端開發的新手一頁一頁的看書學習，沒有什麼效率，而且很難看懂或者看下去，書都是非常的厚重。

下面我給你學習前端的新手幾個建議：

第一：切記學習前端開發不可以依賴任何人，我做了開發這麼久，5年了，見過很多依賴老師的學生，這樣的後果就是自己沒有解決問題的能力，也沒有自主學習的能力，面試不能透過，找工作會非常難，因為學習開發就是鍛鍊這種自我學習的能力。

第二：必須而且一定要有一個老師帶著學，無論是學習PHP還是前端，根據我見過的人的經驗，如果沒有一個明白人幫你解決一下問題，首先會浪費非常多的時間。而且學習的不專業，對於基礎的把握不牢靠，後面的都是白扯。

第三：堅持很重要，確實有很多學習前端的人在學習PHP的時候學著學著就放棄了，這叫知難而退，PHP確實難，但是就是因為難才有價值，我們評判一個前端開發者是什麼水平，就是用PHP來說話。

HTML5相關盒模型學習資料：

學習目標

· 1、認識盒子模型

· 2、盒子模型的組成部分

· 3、學習盒子模型的相關元素 margin padding

一、css盒模型的概念及組成

概念：盒模型是css佈局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.

盒模型的組成：邊框、邊界/邊距、補白/填充、內容區。

二、盒子模型的相關元素

1、padding的使用方法

說明：

填充：padding,在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離。 也稱補白或填充。

用法：

1）用來調整子元素在父元素中的位置。

注：padding屬性需要新增在父元素上。

2）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後新增的padding屬性值

屬性值的4種方式：

四個值：上 右 下 左 {padding:0px 0px 0px 40px;}

三個值：上 左右 下 {padding:10px 20px 30px ;}

二個值：上下 左右 {padding:10px 20px ;}

一個值：四個方向 padding:2px;/*定義元素四周填充為2px*/

說明：可單獨設定一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;

2、margin的使用方法

說明：

邊界：margin,在元素外邊的空白區域，被稱為邊距/邊界。 “屬性值的用法同上”

margin-left:左邊界

margin-right:右邊界

margin-top:上邊界

margin-bottom:下邊界

屬性值的4種方式：

四個值：上 右 下 左

三個值：上 左右 下

二個值：上下 左右

一個值：四個方向 margin:2px;/*定義元素四邊邊界為2px*/

margin:0 auto;/*一個有寬度的元素在瀏覽器中橫向居中。

定義元素上、下邊界為2px，

說明：可單獨設定一方向邊界，如：margin-top:10px;

注：/*上下邊距重疊，左右邊距相加*/

三、標準盒子大小計算方式

寬 =左右border+左右padding+width，

高 =上下border+上下padding+height，

例如：一個盒子的border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，

寬= border*2 + padding*2 + content.width = 1*2 + 10*2 +200 = 262px，

高= border*2 + padding*2 + content.height = 1*2 +10*2 + 50 = 112px，

怪異盒模型/IE盒子模型組成：margin+內容區

寬：width;

高:height;

四、盒模型注意事項

*margin值的解析：左右邊界累加，正常文件流的上下邊界重合。

*在正常文件流下，子元素（塊）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(子元素或父元素不設定任何浮動及定位的屬性，或父元素不設定邊框的情況下。)

一個標記可以設定多個class名

語法：<標記 ></標記>

初學者要學習前端，有兩個方法，一是自學，二是培訓機構（比如黑馬等），如果你有其他語言基礎，建議自學，要是你什麼都不懂，想要快速工作，可以考慮培訓機構，不過個人建議自學為好，現在好多公司都不招培訓機構出來的。

學習前端流程：第一步：html+css，這是靜態頁面和樣式的學習，第二步：JavaScript，這使靜態頁面動態話，第三步：jquery，不能說成框架，只能是方法集合吧，第四步：react、vue、angular（個人推薦react）其中一個，之後去學習nodejs，然後java或者python或者go，沒事的時候去學習下演算法和資料結構，現在很多公司都面試演算法和資料結構，這個無論前端和後端

學習前端肯定是要分階段來學習，把每一個階段搞懂，一步一腳印，之後才能找到一份合適的工作。

第一階段：Web網頁基礎HTML入門基本內容，CSS+DIV的基礎知識，選擇器，盒子模型，網頁佈局，Photoshop

第二階段：Web程式設計基礎學習路線：JavaScript基礎，BOM和DOM模型，事件處理，jQuery，互動及動畫，jQuery優質外掛，文件處理，陣列和物件操作

第三階段：Web程式設計高階及全棧開發學習路線：JavaScript高階程式設計，原型模式，jQuery外掛開發，模組化元件開，AJAX，Express(Node.js)，Mongodb，RequireJS，MongoDB

第四階段：響應式網站開發學習路線：HTML5/CSS3，響應式原理及佈局，Bootstrap，前端依賴管理，CSS預處理語言（Less+Sass），Grunt/Gulp自動化構建工具，Angular4

第五階段：框架與專案管理學習路線：Grunt/Gulp，Webpack模組載入器&打包工具，MVC（backbone）架構前端，VUE2，React

同樣，自制力的強弱決定了你是否能開拓自己的視野。希望以上黑馬先鋒學院的建議能對你產生幫助。