在初學(xué)者心目中web前端開發(fā)就是學(xué)習(xí)html、css、JavaScript；如果是在2016、2017年是的前端的小伙伴只需要掌握這些就夠了，但是隨著行業(yè)的不斷發(fā)展，前端技術(shù)得到廣泛的應(yīng)用，前端崗位從web前端開發(fā)到前端全棧開發(fā)，對(duì)技術(shù)知識(shí)點(diǎn)的要求也在不斷的變化，那么web前端開發(fā)需要掌握哪些技術(shù)呢？知了堂的小編姐姐為你詳細(xì)描述：

具體來說前端可以分為以下四個(gè)大的學(xué)習(xí)模塊，循序漸進(jìn)的開始學(xué)習(xí)：

1、HTML+CSS（基礎(chǔ)）

目標(biāo)與能力界定：與UI對(duì)接，能100%重構(gòu)網(wǎng)站靜態(tài)頁(yè)面的開發(fā)，為后期編寫頁(yè)面邏輯、動(dòng)態(tài)效果打基礎(chǔ)

html、css這部分是屬于公共基礎(chǔ)部分，不僅學(xué)習(xí)前端必須學(xué)習(xí)，就算從事Java開發(fā)、web安全等崗位這都是必須要掌握的基礎(chǔ)技術(shù)。而這部分的學(xué)習(xí)內(nèi)容相對(duì)來說比較容易入門，比較簡(jiǎn)單，能快速的掌握，對(duì)于除學(xué)者來說能提升大家的學(xué)習(xí)興趣。建議學(xué)習(xí)完這部分后可以嘗試模仿一些網(wǎng)站進(jìn)行還原，記住學(xué)一萬遍不如練一遍。

重難點(diǎn)提醒：css3進(jìn)階屬性，動(dòng)效，高級(jí)布局，響應(yīng)式布局，移動(dòng)端適配，移動(dòng)端彈性布局。

2、JavaScript基礎(chǔ)

目標(biāo)與能力界定：編程基礎(chǔ)概念，培養(yǎng)邏輯思維能力。能夠獨(dú)立完成網(wǎng)站的頁(yè)面開發(fā)（包括合理布局，JavaScript操作DOM）

JS是整個(gè)前端的核心技術(shù)語言，在網(wǎng)站想想要實(shí)現(xiàn)一些炫酷的功能就必須要涉及到JS。JavaScript,IS是很強(qiáng)大的一門語言，但是他的內(nèi)容實(shí)在大多了，而且有很多內(nèi)容是糟粕， 新手是無法區(qū)分精華與糟粕的，這就造成了新手無從下手學(xué)習(xí)。JS也是一門復(fù)雜的語言，需要很明白的人給你講才不會(huì)亂，否則你很難理解其中的要點(diǎn)。還是建議有人帶著你系統(tǒng)學(xué)習(xí)。網(wǎng)絡(luò)上看似有很多免費(fèi)的體系，但是核實(shí)的絕不會(huì)給你講解。

JavaScript基礎(chǔ)需要學(xué)習(xí)的知識(shí)要點(diǎn)：

ECMA 基礎(chǔ)語法

邏輯分支選擇

邏輯分支選擇

ECMA 函數(shù)

ECMA 內(nèi)置對(duì)象(Array)

ECMA 內(nèi)置對(duì)象(Math、Date)

ECMA 內(nèi)置對(duì)象 (string)

DOM 基礎(chǔ)

DOM 樣式

BOM對(duì)象

事件

事件對(duì)象（Event）

表單和正則表達(dá)式RegExp

jQuery 基礎(chǔ)

重難點(diǎn)提醒：ECMA 函數(shù)

建議綜合拉練1-2個(gè)：jQuery 項(xiàng)目

3、JavaScript進(jìn)階+Node+H5 API

目標(biāo)與能力界定：深入面向?qū)ο缶幊蹋邆湟苿?dòng)端開發(fā)能力，處理瀏覽兼容問題，深入學(xué)習(xí)ES6/ES7語法規(guī)范，前后端分離開發(fā)思想

建議學(xué)習(xí)模塊：

JS 面向?qū)ο?/p>

H5 API Canvas

jQuery 及插件封裝 移動(dòng)端插件開發(fā)

Node服務(wù)器與數(shù)據(jù)庫(kù) H5 API

ES6/ES7

本階段的知識(shí)點(diǎn)相對(duì)來說有難度的比較多了，比如：JS 面向?qū)ο罄锩娴倪f歸；Node服務(wù)器里面的知識(shí)點(diǎn)：HTTP/S協(xié)議（請(qǐng)求頭，響應(yīng)頭，get，post，瀏覽器緩存）；ES6/ES7里面的：Promise（asycn,await）、typescript。

到了這個(gè)階段就不是像學(xué)習(xí)HTML里面標(biāo)簽?zāi)敲摧p松啦！

4、web全棧+框架

目標(biāo)與能力界定：深入了解Node，數(shù)據(jù)庫(kù)操作，前后端分離技術(shù)，前后臺(tái)協(xié)作開發(fā)。深入學(xué)習(xí)組件化開發(fā)思想，技術(shù)復(fù)習(xí)，實(shí)戰(zhàn)項(xiàng)目。

框架在2018年以前可能你會(huì)VUE、React、微信小程序三大框架里面的其中一個(gè)就OK，那么到了2020年哪怕是應(yīng)屆畢業(yè)生你找實(shí)習(xí)工作也不行啦，這些都是必須要學(xué)習(xí)的。而且前端的框架技術(shù)更新是非常快的3-6個(gè)月就會(huì)更新一次，所以最好是有人帶著你學(xué)習(xí)，要不然學(xué)習(xí)了半年后等你找工作的時(shí)候發(fā)現(xiàn)為什么企業(yè)都不用這些技術(shù)了而浪費(fèi)了大把的時(shí)間。

最后友情提示：除了以上的四大點(diǎn)內(nèi)容，你還需要了解以下知識(shí)體系：

函數(shù)式編程，LBS（高德地圖）

數(shù)據(jù)解構(gòu)與算法簡(jiǎn)介（O時(shí)間復(fù)雜度）

PWA，ServiceWorker，Taro

SSR（nuxt）

混合開發(fā)（uni-app，ReactNative）

如果需要前端詳細(xì)的學(xué)習(xí)課程體系路線圖可通過以下聯(lián)系方式找知了堂小姐姐要；如果你沒有自控力，獨(dú)立解決問題也不強(qiáng)，那么就不建議去自學(xué)了，舉個(gè)栗子就JavaScript的技術(shù)體系，在知了堂前端項(xiàng)目經(jīng)理帶著大家面授體系學(xué)習(xí)至少都要花費(fèi)40天的時(shí)間才能徹底掌握。