2023年，入門學(xué)習(xí)前端學(xué)習(xí)路線，系統(tǒng)學(xué)習(xí)方向，該路線僅做參考，后續(xù)如有不足，請及時指出。

一、HTML

HTML主要學(xué)習(xí)各個標簽的特性，主要學(xué)習(xí)的理念是塊級元素與行內(nèi)元素的區(qū)別，以及各個標簽內(nèi)置的屬性方法，在前期學(xué)習(xí)HTML的過程中，會學(xué)習(xí)到很多無用的HTML內(nèi)置標簽，到后續(xù)學(xué)習(xí)深入以后，前端開發(fā)者基本上只用一下標簽進行開發(fā)：div，span,input,button,option+select,table至于其他的標簽，基本上用不到，但用不到并不表示不用學(xué)習(xí)，還是要有稍微的了解，在后續(xù)使用UI框架的時候，前端開發(fā)就不再自己手寫HTML，主要使用UI框架的組件進行開發(fā)，HTML可以快速過一遍，總的來說，入門前端開發(fā)，并不需要在HTML上面花費太多的時間，后續(xù)可以一邊做項目一邊學(xué)習(xí)，主要是要理解塊級元素的特性與行內(nèi)元素的特性，理解元素特性，才能夠快速完成頁面布局效果（就像蓋房子一樣），萌新推薦由外向內(nèi)布局。

二、CSS

CSS主要學(xué)習(xí)margin、padding、border等邊距效果，以及font/color/background等渲染效果，主要將常用的css參數(shù)記住，有能力的可以把常用的樣式效果背下來，前期學(xué)習(xí)的時候，可以多試試各種css搭配的效果，css可以花更多的時間去學(xué)習(xí)，這是前端開發(fā)的基本功，要做到UI圖什么樣，css的搭配就怎么樣的效果，前端開發(fā)基本上需要一比一還原UI圖的效果。這里不推薦萌新使用大量的float去完成頁面的布局，除非萬不得已，不要去使用float。可以多看看各個機構(gòu)的免費教學(xué)視頻去深入學(xué)習(xí)css，基礎(chǔ)很重要。

三、HTML5新特性

HTML主要學(xué)習(xí)多媒體標簽以及canvas，canvas可以留到后面學(xué)習(xí)完JavaScript再學(xué)習(xí)，新特性其實需要學(xué)習(xí)的東西并不多，這里可以快速過一遍就可以了，開發(fā)用到的時候再去學(xué)習(xí)也可以。

四、CSS3、scss、Flex布局、css動畫效果、iconfont

CSS3新增了很多樣式效果，主要為動畫效果以及flex布局，學(xué)習(xí)css3是有趣的，這里可以很放松的去學(xué)習(xí)完css3的內(nèi)容，前提是css的基礎(chǔ)足夠的好，css功底不好的可以再去學(xué)習(xí)一邊css。把css3學(xué)習(xí)完，可以在后續(xù)編寫頁面的時候更加輕松高效。頁面效果也更加美觀。? 學(xué)習(xí)到這里的時候，可以去嘗試一比一復(fù)刻淘寶首頁、京東首頁、B站首頁等頁面，如果很吃力的話，建議多做幾次各個網(wǎng)站的首頁效果，當頁面渲染感覺到?jīng)]有難度的時候，可以再開始去學(xué)習(xí)JavaScript，如果html+css的學(xué)習(xí)程度不深的話，其實學(xué)JavaScript也是一種痛苦，建議是先打好HTML+CSS的基礎(chǔ)再進行后續(xù)的學(xué)習(xí)。

五、JavaScript?

JavaScript也俗稱js，是前端開發(fā)的核心語言，這里需要學(xué)習(xí)到大量的編程知識，跟以往的html/css不一樣，建議深入學(xué)習(xí)Js，之余能學(xué)多少完全看個人能力，js主要學(xué)習(xí)的核心主要有：函數(shù)、定時器、面向?qū)ο?、事件、DOM操作這部分，之余其他的部分可以看個人能力去深入學(xué)習(xí)，如果想要成為一個合格的前端開發(fā)，熟悉js的各個功能也是必不可少。

六、ES6?

ES6是js在某個版本時期大量新增的特性與功能，方便開發(fā)者更好的開發(fā)，這里面主要是一個異步編程（async/await）與ajax是ES6的核心，學(xué)習(xí)至此，前端的三大馬車（HTML/CSS/JS）已全部學(xué)習(xí)完畢，這里如果覺得哪里沒有學(xué)習(xí)好的話，可以再回去復(fù)習(xí)，加深印象，如果沒有難度，各種頁面也能開發(fā)出來，那后續(xù)的學(xué)習(xí)部分就是一馬平川，沒有什么難度了。個人認為這些基礎(chǔ)都是很重要的，好的基礎(chǔ)是快速開發(fā)的基石（磨刀不誤砍柴工），為了后續(xù)的開發(fā)，盡量把自己的短板補齊，如果有什么不懂的，可以晚上或者周日到我直播間提問（B站搜索前端），我可以為各位入門的朋友無償教學(xué)。

七、JQuery

JQuery也稱jq，是前端的一個框架，是早期前端開發(fā)的首選框架，雖然在2023年看來，已經(jīng)是完全過時，但是想要成為一個好的前端開發(fā)者，jq的學(xué)習(xí)也是必不可少，如果前面的學(xué)習(xí)已經(jīng)完全打好基礎(chǔ)，那么學(xué)習(xí)jq將毫無壓力，可以快速過一遍jq就可以了。

八、bootstrap UI組件庫

bootstrap 的柵格布局是前端開發(fā)需要掌握的，雖然不一定用到，但是仍推薦大家去了解學(xué)習(xí)，UI組件庫的學(xué)習(xí)成本也不高，這里推薦先學(xué)習(xí)如果使用UI組件庫，沒有好的推薦，本人常用的是elementUI ，其他各個組件庫也基本上大同小異，學(xué)會一個組件庫，其他的也是能夠快速上手，學(xué)習(xí)至此，基本上前端開發(fā)就變得簡單起來，很多頁面效果也能實現(xiàn)，基本上你此刻就已經(jīng)邁入了前端開發(fā)的大門了。

九、npm/Git

npm是一個包管理工具，為項目引入各種第三方 包，方便項目快速開發(fā)，不難學(xué)。

Git是一個項目管理工具，本質(zhì)上并不復(fù)雜，在大公司可能git會用起來條條框框比較多，但是基本上的一些add commit push pull 命令學(xué)會就可以，還有g(shù)it軟件協(xié)助，不難學(xué)。

十、Vue-cli / vite / webpack

vue-cli是搭建VUE項目的手腳架，可以快速搭建一個配置好的vue集成環(huán)境，過兩年可能會逐漸被vite替代掉，但目前而言，學(xué)習(xí)vue2還是用vue-cli方便一些。

vite與webpack的本質(zhì)都是一樣的，自是webpack看起來比較的復(fù)雜，比較勸退大部分人，所以現(xiàn)階段可以直接擁抱vite，如果后續(xù)進入公司研發(fā)，用的是webpack，也基本上是搭建好的前端項目環(huán)境，webpack簡單學(xué)一遍就可以了，不難學(xué)

學(xué)會這些以后，就可以進入到前端目前主流的項目開發(fā)流程中，基本上到后續(xù)的開發(fā)都是看文檔看實例去學(xué)習(xí)了，總的來說都不難。

十一、VUE全家桶

vue可以先學(xué)習(xí)vue2，不推薦直接上手vue3，這樣會相對來說比較的吃力，vue2也不難學(xué)，都是一些很簡單的語法糖、生命周期之類的，這里主要是學(xué)習(xí)數(shù)據(jù)跨組件發(fā)送與接收，這個是vue當中比較難學(xué)的一點，但也是套模板開發(fā)，總體來說不難。至于vuex這個全局狀態(tài)管理組件，UP自認為是不喜歡，如果沒有良好的設(shè)計，vuex用起來反而會覺得很麻煩?？错椖繘Q定吧。Vue是目前國內(nèi)主流的開發(fā)框架，很多中小型公司都是用vue的多，至于為什么不推薦react的原因是，react在中小型項目中并沒有比vue更好的優(yōu)勢，react主要是在大型的項目上面會比vue更好一點，所以react推薦用到再學(xué)，本質(zhì)上來說，react跟vue都是一門框架，只要前端的基礎(chǔ)好，學(xué)習(xí)這兩個框架都是不難的。

十二、H5開發(fā)/小程序開發(fā)/uniapp多端開發(fā)·

H5開發(fā)也俗稱移動段開發(fā)，主要面對的是移動段的網(wǎng)頁，這里主要是處理好頁面的響應(yīng)式問與設(shè)備的適配問題，本質(zhì)上來說，跟PC端開發(fā)網(wǎng)頁也是一樣的，沒有太多的難點。

小程序開發(fā)就是看文檔，各種小程序API跟PC端大同小異，沒有太多的難度。

uniapp是基于vue開發(fā)的，是一套代碼，多端適配（報錯），跟vue沒有多少區(qū)別。

十三、Canvas/WebGL/ThreeJS??網(wǎng)頁高級渲染

這是前端開發(fā)的重難點問題，精通此類技術(shù)的前端開發(fā)者并不多，著急找工作的可以先不學(xué)習(xí)，對找工作沒有太大的影響?？梢砸贿吂ぷ饕贿厡W(xué)習(xí)，學(xué)習(xí)這些技術(shù)可以讓你的簡歷加分。不懂也沒有關(guān)系，大家都不會（dog）

十四、NodeJS

NodeJs說實話并沒有太多的應(yīng)用場景，因為單線程等問題，還有NodeJS的生態(tài)問題，目前來說，主要了解NodeJs是什么，能做什么就可以了，不會有那家公司說用NodeJs去做主流的服務(wù)端應(yīng)用，基本上是一個輔助型技術(shù)。懂一懂就行了，真沒有太大的必要去深入學(xué)習(xí)。

• 計算機網(wǎng)絡(luò)

• 數(shù)據(jù)結(jié)構(gòu)與算法

• 計算機系統(tǒng)?

• 瀏覽器基本常識

• Javascript中的this指向

• Javascript中的閉包

• Javascript中的原型鏈

• 設(shè)計模式

• TypeScript

• 面試題?

• 框架源碼解析

• 前端項目搭建與服務(wù)器部署

基本上來說，這些技術(shù)點再B站都有相對應(yīng)的視頻去學(xué)習(xí)，有的人可能趕時間去開倍速去學(xué)習(xí)，其實真的不會快多少，反而是開倍速學(xué)習(xí)以后，還沒有正常學(xué)習(xí)的快，學(xué)習(xí)得有效果，這里并不推薦學(xué)習(xí)HTML/CSS/JS的時候去開倍速去學(xué)習(xí)，后續(xù)的學(xué)習(xí)可以開倍速去學(xué)習(xí)，總的來說，學(xué)習(xí)3-5個月基本上就能學(xué)完前端目前的主流技術(shù)與開發(fā)方案，至于能不能找到工作，這里就因人而異了，推薦大家多背面試題，面試題可以有效的解決自身的短板，讓自己更高效的通過面試，拿到offer。至于本文中沒有提到的技術(shù)點，可能在這里有遺漏的地方，這里希望大家多多見諒，但總的來說，學(xué)完這些，你就是一個前端開發(fā)者了。

平時學(xué)習(xí)有不懂的地方，可以晚上到我的直播間提問，一般來說我都會直播幫助各位解決一些常見的問題，太難的我也可能沒有遇到過，也不懂，這里希望大家見諒。祝各位學(xué)有所成，早日拿到心儀的offer。

在這里說句題外話：我不賣課，也暫時不考慮出教學(xué)視頻，我能力有限，大家可以多看別人優(yōu)秀的視頻跟著學(xué)就可以了，不懂的地方可以來問我（無償），thanks。

本文章不引戰(zhàn)、不做辨析，只是本人對前端目前行業(yè)的分析，如有不對的地方請指出。?

B站：無我code