新技術新框架不斷涌現，目前學習web前端開發都要掌握什麼？

web前端開發由網頁製做演變而來，隨着web2.0的發展，網頁再也不只是承載單一的文字和圖片，各類豐富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式爲用戶提供了更好的使用體驗，這些都是基於前端技術實現的。

通過了市場的沉澱，不少前端們開始無所適從，之前簡單的技能已經沒法適用前端技術的發展，新技術新框架又不斷涌現，

前端開發市場仍然有着大量的需求。咱們知道前端開發應用是很普遍的，這些公司都有前端開發崗位（固然這只是一部分）：而且薪資也不低。除了互聯網公司，傳統公司想要鏈接互聯網，一樣離不開前端工程師。而隨着H五、微信小程序、各種APP的發展，對於前端的需求將一直上漲。因此總的來講，前端開發行業仍然有羹可分。而且養分豐富。

任何行業都須要努力，前端開發也不例外，首先你必須真的想要學習，想要改變。你須要有一個清晰的學習路線和方向，最好是能跟着有經驗的人學習，這樣才能快速入門前端，不走彎路。

前端開發的基礎語法，由HTML+CSS+JavaScript組成，這是前端開發最基本的3個語言。

網頁佈局基礎：HTML+CSS

HTML就是超文本標記語言，組成網頁內容的最基本語言。你能夠直接說他是網頁的骨架，網頁的圖片、文字、視頻、音頻、程序都須要他引入到網頁中體現。

光是HTML作網頁，只是有了內容，固然是遠遠不夠的。由於只是HTML的話，只能用Table作佈局才能勉強作出個成型的網頁來。可是從Web2.0時代開始，都是盒子模型佈局法了，也就是用DIV+CSS來實現佈局了。

CSS就是層疊樣式表。經過樣式屬性來對標籤進行佈局規範，在再也不使用table佈局的時候，只要CSS樣式對網頁標籤進行對應的佈局實現纔是正確的開發方式了。

HTML(div)+CSS佈局，是基礎入門的基本步驟，在這個階段，你須要學習的內容，包括有：

1.標籤語義化，SEO

2.頁面加載的流程和原理

3.網頁結構

4.盒子模型（W3C盒子模型和IE盒子模型）

5.CSS選擇器

6.CSS佈局浮動、定位

在剛剛開始的階段，你們學習的佈局方式基本都是以px爲單位的靜態佈局方法。熟悉好佈局方法，先給本身一個小目標，作一個簡單的電商網頁的基本結構出來，不用特效，不須要交互。

瀏覽器腳本語言：JavaScript

JavaScript是咱們學習前端開發中很是重要的一個內容，也是一個你們常常掉坑裏的難點。JavaScript如今能夠說是互聯網時代使用率最高的腳本語言了，在網頁中，全部的數據渲染，特效的交互都須要利用JavaScript，來影響瀏覽器的顯示。

JavaScript不僅是開發網頁特效和渲染數據的重要內容，在學習前端開發的後期，大量使用算法和框架的時候，對JavaScript基礎的考驗也是不少的。

在基礎階段，咱們學習JavaScript須要注意：

1.基本關鍵字指令

2.基本數據類型、數組

3.函數

4.面向對象編程

5.原型鏈、閉包

6.JSON

7.Ajax

8.DOM(文檔對象模型 原生DOM操做)

9.事件捕獲、冒泡、代理

10.經常使用函數方法

11.ES五、六、7

在JavaScript部分學習，主要仍是要去理解好交互的原理，把原理分析清楚，真的理解語法，那寫出多複雜的邏輯也是手到擒來。

JavaScript經典類庫jQuery

說到學習JavaScript，不少小白同窗確定會很頭痛他的原生寫法。每次邏輯業務都須要手動寫，也就是用一次就造一次輪子。以爲很麻煩。若是能簡單一點就行了。

由於JavaScript有能夠封裝的特性，因此在後面也出現了不少用JavaScript封裝的類庫、插件。好比說最經典的類庫就是jQuery了。

jQuery類庫就是在類庫裏面封裝好了不少JavaScript的事件方法。jQuery經過封裝，減輕了遍歷、對象選擇等等不少的問題。把網頁特效的實現變得簡單化，經過調用方法就能夠了。

在學習jQuery的時候，須要重點認識的有:

1.jQuery語法和JavaScript原生語法的差別

2.Dom對象和jQuery對象

3.jQuery的入口函數和JavaScript的入口函數的差別

4.jQuery事件的執行邏輯。

學習jQuery，最須要達到的效果就是能快速的完成網頁的特效，好比說輪播圖、手風琴菜單、旋轉木馬、放大鏡等等這些特效。能完成一個電商網站的佈局+特效開發是最基本的要求了。

這些就是零基礎學習必備的一些基本內容，在入門前端開發最基本須要掌握的東西，把基礎理解好，才能爲後面的學習作更多的準備。

多終端進階學習

除了基礎的PC端，目前移動端能夠說是很是火的了。

比PC端單一的網頁不一樣，在移動端的技術能夠應用到WEB-APP,小程序，Hybrid-App等等。

Web-App

也就是咱們常見的瀏覽器（以及內置瀏覽器，好比微信）打開的大型移動端網頁。好比咱們常見的電商網站，功能性網站，管理網站，在佈局和功能上都有APP的效果。

作好Web-App開發，最基本的不少人確定會說響應式佈局，可是前端開發是又5種佈局法的，除了出名的響應式，還有在移動端最重要的彈性佈局法，也就是不少人頭疼的rem佈局。

除了佈局方法以外，在H5新特性和觸屏事件和設備兼容性問題也是須要信手拈來。

小程序

這個也不用多說，如今能夠說是很是火的，各大平臺都有在作本身的小程序，各類砍價，搶票，電商，遊戲都有運用。這個以微信小程序爲例，主要是微信團隊基於前端基礎來作的封裝語法，主要的仍是ES語法。小程序目前不少公司都是招聘前端開發，目前尚未獨立的小程序開發工程師，因此小程序能夠說是前端工程師高薪就業的加分技能，換句話說就是成熟開發必備了。

Hybrid-App

又稱混合式APP，可能據說的人不多，可是18年是愈來愈多人去開發了，這種是能直接產出下載到終端的APP的，在體驗感上能夠說已經具有傳統APP的大部分功能了。這種開發門檻較低，也就是前端開發就能夠完成。多數都是大包平臺就能作，這個你能夠後面瞭解一下。

前端主流技術框架

前面的都是基礎東西，如今去就業前端開發，不是隻靠個基礎東西，搞個移動端頁面就能夠算成熟了。前端3大框架，VUE、Angular、React這3個能夠說是如今很是火熱的了。

基礎語法均可以寫的前端，爲何還要框架？

不少小白朋友是不懂什麼是框架的，只聽過jQuery這些東西，覺得就是框架。或者認爲框架就是加速開發，以爲這些庫、插件就能完成框架的工做了。

其實框架的出現，是改變前端地位的重要標誌。最重要的表現，就是先後端分離，在先後端分離以前，不少後端開發都是又當爹又當媽的，效果很差效率也不高，我就是在後端出身，深知痛苦。

如今的前端項目，比之前是更加複雜化、多樣化了。項目複雜了，問題也多了。

Web前端開發入門低的另外一個重要表現就是符合8/2定律，也就是20%的東西使用率佔到80%。因此很適合囫圇吞棗，所以咱們的重點就是把這20%學起來，而首先要作的就是把這20%的東西找出來。前端這20%的東西大概就是經常使用的HTML標籤，css的盒子模型，基本的原生js，以及熟練使用jquery，ajax，常見瀏覽器的兼容。拿下這些東西意義非凡，一方面證實你適合作前端這份工做，另外一方面這些技能能讓你找到一份工做。

讓你可以從容地去學習剩下的80%。總之就是專心對付重要的東西，那些什麼less、sass、angular這類的東西，當你把我以前說的基礎打好以後，學習起來暢通無阻，隨學隨用。較難的就是實踐，只有實踐才能學到真正的技術，新人很難參與一些有價值有意義的項目，沒有這些項目又很難成長，因此本身有項目可參與應該珍惜。

小白學習web前端最多見的幾個問題和誤區：

1.無腦盲目的刷視頻去看，可是不多去練習。正常的狀態應該是在整個學習的過程當中，四分之三的時間都是在練習。視頻只是讓你瞭解學習什麼內容，看一遍就好了。有不少人都是無腦的刷視頻看，最後浪費幾個月的時間，也找不到工做。

2.小白開始學習的時候，看書是一種很是嚴重的誤區。因此新手禁忌看書學習編程。至於緣由是什麼，在這裏我不作太多解釋。

3.不少人都是遇到一個問題，就是能看懂代碼，可是不會寫，這是比較常見的問題。

4.還有一個最現實的問題，就是學了後面的忘了前面，這是因爲學習方法和方式存在這很大的錯誤。

5.整個學習流程混亂，沒有系統的安排，學的不繫統不專業，技術掌握的很差，浪費幾個月甚至半年的時間。

6.缺少和專業人士交流的過程，做爲一個小白，在初期學習的時候，所學的最多的東西必定是從別人那裏學到的，閉門造車。

不論是web前端技術仍是其餘IT技術也好，其實都是從零基礎開始的，你能夠直接學習或者是經過相近經歷轉行。因此新人不須要因零基礎而擔憂本身學不會。想要成爲合格的WEB前端工程師，其實也不是很難的事情，主要是要選擇科學的學習方式。