Web前端開發(fā)需要掌握哪些知識(shí)?

　　Web前端在最近幾年發(fā)展的十分迅速，報(bào)名進(jìn)行Web前端培訓(xùn)的同學(xué)也越來(lái)越多。移動(dòng)互聯(lián)網(wǎng)的背景之下，每一個(gè)人每天會(huì)跟各式各樣的手機(jī)端應(yīng)用打交道，殊不知這些App都跟Web前端有著密不可分的關(guān)系。

　　有關(guān)數(shù)據(jù)表明，當(dāng)今市場(chǎng)上50%以上的應(yīng)用采用的是混合模式開發(fā)技術(shù)，互聯(lián)網(wǎng)結(jié)合安卓技術(shù)。當(dāng)然也有一些年代稍微久遠(yuǎn)的應(yīng)用，像我們耳熟能詳?shù)腝Q空間，主要是采用Web前端中的React Native技術(shù)研發(fā)的。撇開APP不談，手機(jī)上還經(jīng)常為我們呈現(xiàn)各具特色的H5頁(yè)面，這個(gè)就是熱門的HTML5技術(shù)在Web端上開發(fā)出來(lái)的。除了App應(yīng)用和網(wǎng)頁(yè)制作，在一些桌面應(yīng)用、服務(wù)器端和VR領(lǐng)域，也會(huì)用到Web前端技術(shù)。

　　Web前端開發(fā)通常要掌握哪些知識(shí)呢?

　　1.HTML

　　HTML是負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)層，是網(wǎng)頁(yè)開發(fā)的基礎(chǔ)，從簡(jiǎn)單的網(wǎng)頁(yè)骨架搭建入手，使用常見的HTML標(biāo)簽豐富網(wǎng)頁(yè)結(jié)構(gòu)。

　　2.CSS

　　在HTML搭建的網(wǎng)頁(yè)結(jié)構(gòu)基礎(chǔ)上，通過(guò)CSS選擇器精準(zhǔn)選擇標(biāo)簽，使用外觀、盒模型相關(guān)屬性完成網(wǎng)頁(yè)全部?jī)?nèi)容，利用浮動(dòng)、定位等布局技巧精準(zhǔn)控制網(wǎng)頁(yè)布局，結(jié)合背景、圓角、陰影等裝飾屬性進(jìn)一步美化網(wǎng)頁(yè)效果，達(dá)到能夠編寫企業(yè)級(jí)大型綜合網(wǎng)頁(yè)。

　　3.CSS高級(jí)特效

　　旨在使用css高級(jí)特效豐富網(wǎng)頁(yè)元素的呈現(xiàn)方式和效果。

　　(1)使用CSS高級(jí)特效，豐富網(wǎng)頁(yè)元素的呈現(xiàn)方式和效果。

　　(2)使用rem或vw、vh實(shí)現(xiàn)網(wǎng)頁(yè)元素寬高隨著視口變化等比縮放的效果。

　　(3)使用bootstrap框架布局響應(yīng)式網(wǎng)頁(yè)。

　　4.移動(dòng)適配

　　首先介紹Flex布局模型，實(shí)現(xiàn)移動(dòng)端網(wǎng)頁(yè)的基本布局，再講解兩種移動(dòng)端網(wǎng)頁(yè)適配不同分辨率的解決方案，并使用不同的解決方案制作網(wǎng)頁(yè)元素寬高隨著視口的變化而等比縮放的效果。

　　5.響應(yīng)式

　　學(xué)習(xí)響應(yīng)式的原理，并使用bootstrap框架完成響應(yīng)式網(wǎng)頁(yè)的布局。

　　6.JavaScript基礎(chǔ)

　　學(xué)習(xí)JavaScript基礎(chǔ)語(yǔ)法規(guī)則。

　　(1)掌握J(rèn)avaScript基礎(chǔ)語(yǔ)法，培養(yǎng)編程邏輯思維。

　　(2)掌握DOM和BOM對(duì)象的常用屬性和方法，能夠完成網(wǎng)頁(yè)常見的交互效果。

　　(3)能夠使用 axios 實(shí)現(xiàn) Ajax 操作，為后續(xù)項(xiàng)目課做好技術(shù)鋪墊。

　　(4)能夠運(yùn)用 Git 管理前端項(xiàng)目，并且使用 Git 分支進(jìn)行多人協(xié)同開發(fā)。

　　(5)能夠使用 Promise 與 async/await 高效的實(shí)現(xiàn)異步操作。

　　7.WebAPI

　　學(xué)習(xí)DOM和BOM對(duì)象的屬性和方法,以完成網(wǎng)頁(yè)常見的交互效果。

　　8.JavaScript高級(jí)

　　深入理解 ECMAScript 的知識(shí)體系及工作機(jī)制，熟悉 ES6+ 新的語(yǔ)法特性，注重抽象思維的培養(yǎng)，具備面向?qū)ο缶幊痰牡哪芰Α?/p>

　　9.Ajax

　　利用 axios 發(fā)起 Ajax 請(qǐng)求，實(shí)現(xiàn)前后端的數(shù)據(jù)交互。并講解 HTTP 請(qǐng)求的過(guò)程以及 Ajax 的底層原理。深入學(xué)習(xí) JS 異步的底層原理，能夠使用 Promise 處理異步操作，并使用 async/await 簡(jiǎn)化異步操作。

　　10.Git

　　能夠創(chuàng)建 Git 倉(cāng)庫(kù)管理前端項(xiàng)目，基于 Git 分支進(jìn)行多人協(xié)同開發(fā)，并且能夠把本地的 Git 倉(cāng)庫(kù)同步到遠(yuǎn)程碼云或 Github 倉(cāng)庫(kù)中。

　　11.Vue基礎(chǔ)和核心技術(shù)

　　通過(guò) Vue2 和 Vue3 的基礎(chǔ)學(xué)習(xí)，掌握企業(yè)開發(fā)中常見業(yè)務(wù)功能實(shí)現(xiàn);通過(guò)深入 Vue 技術(shù)棧學(xué)習(xí) vue-router vuex vant element-ui 等主流技術(shù)，掌握企業(yè)級(jí)項(xiàng)目開發(fā)方式，如移動(dòng)端H5項(xiàng)目實(shí)與PC端管理項(xiàng)目;通過(guò) Vue3 結(jié)合 TypeScript 的技術(shù)學(xué)習(xí)，掌握大型企業(yè)級(jí)項(xiàng)目開發(fā)技巧。

　　以上列舉的知識(shí)條目，是作為Web前端學(xué)習(xí)的過(guò)程中必知必會(huì)的，因?yàn)檫@些是基礎(chǔ)，只有夯實(shí)基礎(chǔ)，才能在前端項(xiàng)目實(shí)戰(zhàn)中運(yùn)用自如。