很多新手朋友剛接觸前端,不知道從哪里下手,今天就跟大家分享web前端入門知識及要點大全,希望對大家有幫助!
一、WEB前端是什么?
使用HTML/CSS/JS以及更多的框架技術,編寫網站頁面、App應用、小程序、2D&3D游戲、Web VR&AR等應用,通過內容設計、交互動畫、數據操作構建項目與用戶的交互界面。前端開發工程師在項目中可以與UI設計師和后台程序員合作,實現設計意圖並調用后台接口;也可以獨立工作,完成強用戶交互的各類應用。
二、WEB前端可以做什么?
最經典的是各種類型的網站:電子商務、企業門戶、管理系統、社區平台等;目前也是移動領域首選技術:WebApp、混編App、手機游戲、微信公眾號、微信小程序等;前端前沿的應用領域還有:數據可視化、3D建模和渲染、WebVR、WebAR等。
三、WEB前端知識體系包括哪些內容?
前端基礎知識:HTML5、CSS3、JavaScript/ECMAScript;前端核心技術:BOM&DOM、jQuery、HTTP、AJAX;前端高階內容:H5高級、響應式布局、Bootstrap框架;移動端開發:移動端適配、WebApp、混編App、微信公眾號、微信小程序;三大主流框架:Vue.js、Angular、React.js及各自的生態圈;全棧相關技術:Node.js、數據庫、模塊化和自動化構建、項目管理技術。
四、WEB前端學習程度如何?
相較於UI設計師,前端工程師不需要非常高的美術設計功底要求;相較於后台開發工程師,前端工程師在抽象思維和算法方面的要求更低一些;同時,前端工程師必備的英語詞匯相對更少,加上達內開發的單詞練習和記憶輔助工具,英語零基礎學員也可以很快掌握;所以,前端相關技術入門要求更低,無需特別的技術背景和英語基礎。但是由於市場的緊缺,初中級工程師領域,前端工程師的薪資水平經常高於同起點的其它工程師。
五、名詞解釋
(1)HTML —— Hypertext Markup Language,超文本標記語言
• HTML是用來描述網頁內容和結構的一種語言。例如:網頁中的文字、表格、圖片等等。• HTML相比其它編程語言更加容易掌握,如<p></p>用於表示一段文本,<img>表示一張圖片等等。
(2)H5/HTML5 —— HTML語言第5版本
• HTML5是 HTML語言的最新版本,在之前版本的基礎上新增加了很多強大的功能,如繪圖、音視頻、存儲等。• 由於Android和iOS系統對H5最新標准的支持非常好,而且可以實現“一套代碼,運行於兩種平台”,解決原生移動App開發最大的痛點,所以現在越來越多的移動App開始采用H5來編寫。
(3)CSS —— Cascade Style Sheet,層疊樣式表
• HTML描述網頁的內容,就像是人的身體;CSS描述網頁的外觀,就好像人的着裝。• CSS可用於設定網頁內容的顏色、字體、位置、大小等等設定,同時還可以各種炫酷的交互動畫。
(4)CSS3 —— CSS語言第3版本
• CSS3是最新的CSS標准,對動畫及特效的支持更加豐富,提供的媒體查詢技術可用於編寫響應式網頁。
(5)JS —— JavaScript
• JavaScript 是一種可以嵌入在網頁中的腳本語言,用於實現頁面內容與用戶的交互 ,例如表單驗證、頁面動畫、異步數據加載等等。
(6)jQuery
• JS標准中提供的操作方法很多時候比較復雜,且存在瀏覽器兼容性問題;jQuery提供了一套簡便的方法,用於簡化網頁中JS的編寫。• jQuery提供了四方面的簡化方法:DOM操作、事件處理、動畫函數、AJAX封裝。
(7)AJAX —— Asynchronous Javascript And XML,異步JS和XML
• 通過在后台與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁且不影響當前用戶操作的情況下,對網頁的某部分內容進行更新。
(8)SQL —— Structured Query Language,結構化查詢語言
• 項目中有很多需要永久存儲的數據,例如商品、用戶、評論等等,這些數據一般都是存儲在數據庫中。 • SQL語言用於訪問和處理數據庫中數據的標准語言,包括添加、刪除、修改、刪除等功能。
(9)WebApp
• WebApp是使用HTML5編寫的移動Web應用,幾乎可以不加修改的運行在PC/Android/iOS等多種平台。• 傳統的移動App大多使用Objective-C(iOS)或者Java(Android)編寫,一個應用程序需要兩套開發人員,向兩個不同方向的市場進行發布,非常不便;所以現在越來越多的移動App都在向WebApp遷移。
(10)混編App
• WebApp很多應用中可以取代傳統的移動App,但是HTML/JS本身都是運行於瀏覽器中的,不便直接操作手機底層的硬件設備。• 混編App在底層封裝了手機底層及硬件操作,如操作通訊錄、攝像頭、各類傳感器等,上層直接使用JS即可進行調用,從而極大的擴展了WebApp的功能。
(11)微信小程序
• 簡稱小程序,目前特指可以運行於微信平台上的一種應用框架;相對於傳統的移動App而言,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。• 除了極大的方便用戶,小程序還可以充分利用微信龐大的用戶群實現用戶引流,降低App的獲客成本。
(12)名詞:Vue.js
• Vue是當今世界上發展最迅速的JavaScript框架,是一個通過簡潔的API提供高效的數據綁定和靈活的組件系統。• 它於2014年2月首次發布,作者是前谷歌員工尤雨溪,並在社區開源;目前有阿里巴巴、百度、GitLab等眾多公司使用。
(13)名詞:Angular
• Angular是一個基於TypeScript的JavaScript框架。是目前廣泛使用的框架里最有歷史的框架。• 在2010年10月發布,目前由Google開發和維護。用戶有谷歌,weather.com,福布斯等。
(14)名詞:React.js
• React被描述為一個用於構建用戶界面的JavaScript庫。• 於2013年3月首次發布,由Facebook開發和維護。當前的用戶有優步,Netflix,Twitter,Paypal,沃爾瑪等。