1.頁面標記(HTML)

由于頁面HTML代碼結(jié)構(gòu)基本固定，HTML的標簽數(shù)量也不多，因此，從學習的難易程度來說，HTML應該是前端技術(shù)中非常容易學習的技術(shù)。即使是一個新手，也能在較短的時間里學會編寫一個結(jié)構(gòu)良好的頁面。雖然說入門容易，但是要編寫語義良好、簡潔整齊的HTML代碼則需要大量的實踐才能掌握。HTML是頁面的基本結(jié)構(gòu)組成部分，是網(wǎng)站的基礎(chǔ)，臃腫混亂的HTML代碼不但會影響其本身的展現(xiàn)，而且與其對應的CSS與JavaScript代碼也會變得難以編寫和維護。

2.頁面樣式

CSS 是 Cascading Style Sheet(層疊樣式表)的簡稱。在標準頁面設(shè)計中，因為CSS負責網(wǎng)頁內(nèi)容的表現(xiàn)，所以CSS也是前端開發(fā)需要掌握的核心內(nèi)容之一。豐富的CSS樣式能讓平淡的HTML展現(xiàn)出絢麗的效果，使得頁面更為友好。好的樣式可以讓用戶在頁面上停留的時間更久一些，也可以幫助用戶更好地閱讀網(wǎng)站內(nèi)容，同時，還可以讓用戶在不同瀏覽器上有著相同的體驗。CSS和HTML代碼一樣，沒有復雜的邏輯，上手也比較容易，其主要的難點在于如何合理地利用CSS的組合和繼承特性來編寫簡潔、可維護性好的CSS代碼。以上這兩項基本技能是前端UI開發(fā)必備的技能。

3.前端編程

前端編程技能主要是指JavaScript編程。JavaScript是一種基于對象和事件驅(qū)動的客戶端腳本語言，是頁面實時動態(tài)交互的技術(shù)基礎(chǔ)。相較于HTML和CSS，編寫JavaScript代碼更能讓前端開發(fā)人員找到后端程序員的感覺。

JavaScript是非常靈活的腳本語言，包含了高階函數(shù)、動態(tài)類型以及靈活的對象模型等強大的語言特性，當然，JavaScript的靈活性也可能導致代碼不易維護。此外，瀏覽器的兼容性也增加了JavaScript編碼的難度。同一個功能，可能在不同的瀏覽器中有不同的實現(xiàn)。例如，在IE瀏覽器中，事件綁定使用的是attachEvent()方法，但其他瀏覽器則使用的是addEventListener()方法。開發(fā)人員在熟悉JavaScript基本語法和基本的編碼規(guī)范之外，還應該了解并解決在不同瀏覽器中的JavaScript的兼容性問題。

4.跨平臺、跨瀏覽器

前端代碼本來不存在跨平臺方面的問題，但是隨著移動Web平臺的興起，跨平臺的問題就逐漸顯現(xiàn)出來了。移動設(shè)備(如智能手機和平板電腦)在近幾年發(fā)展迅猛，用戶通過移動設(shè)備訪問Web站點的比率也是逐年增高。如何在眾多移動平臺、眾多屏幕尺寸上展現(xiàn)友好的Web站點成為一項前端技能。不過，目前跨瀏覽器沒有像幾年前表現(xiàn)得那么突出了，這主要是因為IE 6、IE 7瀏覽器的占有率下降和眾多瀏覽器對標準的重視，另外，目前流行的前端框架已經(jīng)很好地解決了瀏覽器的兼容問題。盡管如此，但是還需要熟悉常見的瀏覽器兼容方法，主要包括：IE 7、IE 8的兼容，HTML5中新特性的兼容等。

5.前端框架

各種前端框架的出現(xiàn)，在很大程度上降低了前端開發(fā)的難度?？蚣芙y(tǒng)一了編碼的方式，封裝了瀏覽器兼容問題并添加大量的擴展功能。如今的Web項目中前端框架應用非常廣泛，在開源社區(qū)GitHub上排名靠前的開源框架也是以前端框架居多。優(yōu)秀的前端框架可以在很大程度上縮短項目開發(fā)的周期，尤其是jQuery，幾乎成為Web項目默認的前端框架。但是，前端框架的接口眾多，各種框架的使用方式和編碼方式也不盡相同，作為前端開發(fā)工程師，需要熟悉一些常用框架的使用方法，并且要了解如何編寫常用框架的擴展插件，如jQuery、YUI、nodeJS等。

6.調(diào)試工具

對于前端代碼，在調(diào)試過程中需要查看頁面的HTML結(jié)構(gòu)變化、CSS渲染效果、JavaScript代碼的執(zhí)行情況以及HTTP請求和返回的數(shù)據(jù)，并且要了解網(wǎng)站各個部分的性能等，甚至需要動態(tài)更改HTML、CSS代碼來查看預期的效果，模擬發(fā)起HTTP請求來查看后端返回的數(shù)據(jù)。主流瀏覽器都會有對應的瀏覽器插件來輔助完成這些工作，如IE中的IE Dev Toolbar、Chrome中的Developer Tools、Firefox中的Firebug等，此外還有HTTP請求監(jiān)控和模擬工具，如Fiddler等。 開發(fā)工程師需要熟練使用這些工具來輔助完成前端代碼的調(diào)試。

7.溝通能力

溝通是開發(fā)人員必備的一項基本技能，尤其是對于前端開發(fā)工程師來說。Web前端開發(fā)介于UI和后端邏輯開發(fā)之間，因此，Web前端工程師在開發(fā)過程中必定會和UI設(shè)計師及后端工程師合作：前端工程師需要和UI設(shè)計師溝通，確定效果是否可以實現(xiàn)以及實現(xiàn)的代價，并對UI設(shè)計提出建議;還需要和后端工程師溝通，確定前后端交互的接口以及傳輸?shù)臄?shù)據(jù)實體的結(jié)構(gòu)等，良好的溝通會讓這些過程變得輕松許多。

來源：AcFun
作者：尚學堂前端學院
原文：記住這7點，讓你web前端開發(fā)技術(shù)飛起來！

了解更多知識可以點擊：尚學堂最新2020版Java300集教程課程