【W(wǎng)eb前端】基礎(chǔ)三劍客是什么？怎么學(xué)？詳細(xì)知識(shí)分享！！

時(shí)間：2023-10-01 22:42:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-01 22:42:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【W(wǎng)eb前端】基礎(chǔ)三劍客是什么？怎么學(xué)？詳細(xì)知識(shí)分享！?。篧eb前端開(kāi)發(fā)基礎(chǔ)知識(shí)學(xué)習(xí)路線分享，前端開(kāi)發(fā)入門(mén)學(xué)習(xí)三大基礎(chǔ)：HTML、CSS、JavaScript。除此之外還要學(xué)習(xí)數(shù)據(jù)可視化、Vue、React、Angular相關(guān)框架，熟練運(yùn)用框架提升開(kāi)發(fā)效率，提升穩(wěn)定性。

HTML、CSS、JS三大部分都起什么作用？

HTML內(nèi)容層，它的作用是表示一個(gè)HTML標(biāo)簽在頁(yè)面里是個(gè)什么角色；CSS樣式層，它的作用是表示一塊內(nèi)容以什么樣的樣式（字體、大小、顏色、寬高等）顯示；JS行為層，它的作用是當(dāng)用戶觸發(fā)某些行為時(shí)，會(huì)給內(nèi)容和樣式帶來(lái)什么樣的改變。

HTML5+CSS3學(xué)什么？

主要是學(xué)習(xí)一些頁(yè)面樣式布局的內(nèi)容，分為PC端網(wǎng)頁(yè)布局和WebAPP網(wǎng)頁(yè)布局兩個(gè)方向，其中包括常見(jiàn)塊級(jí)標(biāo)簽及特點(diǎn)、常見(jiàn)內(nèi)聯(lián)塊及特點(diǎn)、表格常用屬性、表單域常用屬性、表單元素常用屬性、CSS基礎(chǔ)語(yǔ)法、選擇器、文字樣式、盒模型、CSS背景技巧、瀏覽器兼容、CSS hack、CSS高級(jí)技巧、BFC規(guī)范、網(wǎng)頁(yè)開(kāi)發(fā)規(guī)劃及流程、CSS3編碼規(guī)劃、2D與3D變換、animation 動(dòng)畫(huà)、預(yù)處理器Less、Flex布局等內(nèi)容。

JS學(xué)什么？

編寫(xiě)一個(gè)靜態(tài)頁(yè)面，實(shí)現(xiàn)動(dòng)態(tài)效果的話就要用到JavaScript技術(shù)，JavaScript可以為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能,為用戶帶來(lái)更流暢美觀的瀏覽效果。

主要學(xué)習(xí)JavaScript核心語(yǔ)法、用戶與界面交互、函數(shù)表達(dá)式、原生函數(shù)封裝、JavaScript內(nèi)置對(duì)象、數(shù)組與排序算法、Math與隨機(jī)算法、DOM樹(shù)、JavaScript特效、瀏覽器兼容處理、Cookie原理解析及應(yīng)用、正則表達(dá)式及表單驗(yàn)證、構(gòu)造函數(shù)、Ajax原理分析及實(shí)現(xiàn)、同步異步區(qū)別及實(shí)現(xiàn)、Ajax前后臺(tái)數(shù)據(jù)交互、jQuery簡(jiǎn)介、jQuery選擇器、jQuery CSS操作、jQuery html文檔處理、jQuery事件、jQuery動(dòng)畫(huà)、jQuery插件操作、jQuery擴(kuò)展、遞歸算法、Jquery Ajax等。

Html+CSS的內(nèi)容用以實(shí)現(xiàn)頁(yè)面效果，是前端最基礎(chǔ)的知識(shí)，Html+CSS這部分的內(nèi)容，學(xué)習(xí)了JavaScript知識(shí)點(diǎn)后還不能讓你勝任JavaScript編程工作，所以在有了相關(guān)的基礎(chǔ)之后還需要進(jìn)一步學(xué)習(xí)才能做好前端開(kāi)發(fā)。

由于篇幅限制，展示了部分內(nèi)容截圖，需要完整文檔資料的，可以點(diǎn)擊下方卡片免費(fèi)獲取↓↓↓

前端學(xué)習(xí)建議

第一：基礎(chǔ)要硬

首先，學(xué)習(xí)html5、css、javascript這些基礎(chǔ)知識(shí)，學(xué)習(xí)的渠道很多，就不多說(shuō)了，例如，一些其他的優(yōu)秀博客。但是本人覺(jué)得看書(shū)也很必要，可以節(jié)省很多時(shí)間，常見(jiàn)的javascript的書(shū)，例如：javascript的高級(jí)程序設(shè)計(jì)，是每位前端工程師必不可少的一本書(shū)，邊看邊用，了解js的一些基本知識(shí)，基本上很全面了，如果有時(shí)間可以讀一些，js性能相關(guān)的書(shū)籍，以及設(shè)計(jì)者模式，在實(shí)踐中都會(huì)用的到。

第二：框架要熟

1.框架搭建

基礎(chǔ)差不多，那你應(yīng)該也會(huì)寫(xiě)一些靜態(tài)的頁(yè)面了，包括一些樣式，js的引入等等。那之后，我是直接學(xué)習(xí)了框架，框架的學(xué)習(xí)其實(shí)也是一步一步來(lái)，首先，可以看一些視頻（效率低），或者博客等等，上手搭建一個(gè)開(kāi)發(fā)react/vue等框架，其實(shí)這些框架都有腳手架，如果剛開(kāi)始，可以使用腳手架來(lái)搭建，之后有時(shí)間可以自己嘗試著搭建。

2.框架入門(mén)

環(huán)境沒(méi)什么問(wèn)題后，就可以嘗試寫(xiě)一個(gè)簡(jiǎn)單的todomvc，包括一些增刪查顯示等基本的功能，可以結(jié)合一些ui組件，效率更高，如果是react，也要了解生命周期的使用，鉤子的使用，再到redux狀態(tài)傳輸，再到接口的調(diào)用等等。

3.熟練使用

可以簡(jiǎn)單做一個(gè)項(xiàng)目，更加熟練的掌握，同時(shí)，這個(gè)階段有精力，也要去看一下源碼，例如，常見(jiàn)的虛擬dom的原理，相信前端的小伙伴都知道些。

[面試題系列]

由于篇幅限制，展示了部分內(nèi)容截圖，需要完整文檔資料的，可以點(diǎn)擊下方卡片免費(fèi)獲取↓↓↓

第三：基本技能具備后

當(dāng)你差不多都了解后，其實(shí)，就要開(kāi)始學(xué)習(xí)部署，前端怎么優(yōu)化，打包，部署，上線的，同時(shí)，要了解webpack的打包原理。

總之，是一個(gè)從無(wú)到有的過(guò)程，從搭建到部署，中間的學(xué)習(xí)的東西很多，我暫時(shí)也就了解這么多，前端小伙伴可以參考，找到適合自己的學(xué)習(xí)方式。