前端開發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程,通過(guò)HTML,CSS及JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案,來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互 。它從網(wǎng)頁(yè)制作演變而來(lái),名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中,網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物,早期網(wǎng)站主要內(nèi)容都是靜態(tài),以圖片和文字為主,用戶使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用,現(xiàn)代網(wǎng)頁(yè)更加美觀,交互效果顯著,功能更加強(qiáng)大。
推薦教程:HTML前端教程
移動(dòng)互聯(lián)網(wǎng)帶來(lái)了大量高性能的移動(dòng)終端設(shè)備以及快速的無(wú)線網(wǎng)絡(luò),HTML5,node.jS的廣泛應(yīng)用,各類框架類庫(kù)層出不窮。
核心技術(shù)
HTML語(yǔ)言
掌握HTML是網(wǎng)頁(yè)的核心,是一種制作萬(wàn)維網(wǎng)頁(yè)面的標(biāo)準(zhǔn)語(yǔ)言,是萬(wàn)維網(wǎng)瀏覽器使用的一種語(yǔ)言,它消除了不同計(jì)算機(jī)之間信息交流的障礙。因此,它是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言,也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言,學(xué)好HTML是成為Web開發(fā)人員的基本條件。
HTML是一種標(biāo)記語(yǔ)言,能夠?qū)崿F(xiàn)Web頁(yè)面并在瀏覽器中顯示。HTML5作為HTML的最新版本,引入了多項(xiàng)新技術(shù),大大增強(qiáng)了對(duì)于應(yīng)用的支持能力,使得Web技術(shù)不再局限于呈現(xiàn)網(wǎng)頁(yè)內(nèi)容。
隨著CSS、JavaScript、Flash等技術(shù)的發(fā)展,Web對(duì)于應(yīng)用的處理能力逐漸增強(qiáng),用戶瀏覽網(wǎng)頁(yè)的體驗(yàn)已經(jīng)有了較大的改善。不過(guò)HTML5中的幾項(xiàng)新技術(shù)實(shí)現(xiàn)了質(zhì)的突破,使得Web技術(shù)首次被認(rèn)為能夠接近于本地原生應(yīng)用技術(shù),開發(fā)Web應(yīng)用真正成為開發(fā)者的一個(gè)選擇。
HTML5可以使開發(fā)者的工作大大簡(jiǎn)化,理論上單次開發(fā)就可以在不同平臺(tái)借助瀏覽器運(yùn)行,降低開發(fā)的成本,這也是產(chǎn)業(yè)界普遍認(rèn)為HTML5技術(shù)的主要優(yōu)點(diǎn)之一。AppMobi、摩托羅拉、Sencha、Appcelerator等公司均已推出了較為成熟的開發(fā)工具,支持HTML5應(yīng)用的發(fā)展。
CSS
學(xué)好CSS是網(wǎng)頁(yè)外觀的重要一點(diǎn),CSS可以幫助把網(wǎng)頁(yè)外觀做得更加美觀。
JavaScript
學(xué)習(xí)JavaScript的基本語(yǔ)法,以及如何使用JavaScript編程將會(huì)提高開發(fā)人員的個(gè)人技能。
操作系統(tǒng)
了解Unix和Linux的基本知識(shí),對(duì)于開發(fā)人員有益無(wú)害。
網(wǎng)絡(luò)服務(wù)器
了解Web服務(wù)器,包括對(duì)Apache的基本配置,htaccess配置技巧的掌握等。
前端框架
熟悉掌握HTML、服務(wù)器端腳本語(yǔ)言、CSS和JavaScript之后,學(xué)習(xí)Web框架可以加快Web開發(fā)速度,節(jié)約時(shí)間。PHP程序員可選的框架包括CakePHP、CodeIgniter、Zend等,Python程序員喜歡使用Django和 webpy,Ruby程序員常用RoR。
隨著Web 越來(lái)越規(guī)范和標(biāo)準(zhǔn)的統(tǒng)一,Web組件化技術(shù)不斷革新,移動(dòng)端開發(fā)不斷升華,以下是一些常見(jiàn)開源前端框架:
Bootstrap
主流框架之一,Bootstrap 是基于 HTML、CSS、JavaScript的,它簡(jiǎn)潔靈活,使得 Web 開發(fā)更加快捷。
html5-boilerplate
該框架可以快速構(gòu)建健壯,且適應(yīng)力強(qiáng)的web app或網(wǎng)站。
Meteor
Meteor是新一代的開發(fā)即時(shí)web應(yīng)用的開源框架,它能在較短時(shí)間內(nèi)完成開發(fā)。
Semantic UI
基于自然語(yǔ)言有效原則的UI組件框架
Foundation
優(yōu)秀的響應(yīng)式前端框架
Materialize
基于材料設(shè)計(jì)的現(xiàn)代化響應(yīng)式前端框架。可提供默認(rèn)的樣式,自定義組件。此外,Materialize還改進(jìn)動(dòng)畫和過(guò)渡,為開發(fā)人員提供流暢的體驗(yàn)。
Pure
幾乎可以在每一個(gè)web項(xiàng)目中使用的一組小的和響應(yīng)式的CSS模塊。
Vue
Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。它提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng),具有簡(jiǎn)單、靈活的 API。
Skeleton
Skeleton 是一個(gè)小的 JS 和 CSS 文件的集合,可快速開發(fā)漂亮的網(wǎng)站,適合各種屏幕設(shè)備包括手機(jī)。Skeleton 基于 960 grid 開發(fā)。它是一個(gè) UI 框架。
Amaze UI
國(guó)內(nèi)首個(gè)開源HTML5跨屏前端框架產(chǎn)品系列,中文排版支持更優(yōu)、本土化組件豐富。該產(chǎn)品系列中有專門針對(duì)移動(dòng)端的HTML5混合應(yīng)用開發(fā)框架Amaze UI Touch以及針對(duì)跨屏HTML5網(wǎng)頁(yè)開發(fā)的Amaze UI Web。其中,Amaze UI Touch可以幫助開發(fā)者通過(guò)豐富的組件,快速構(gòu)建出與原生APP相媲美的專屬移動(dòng)端的HTML5應(yīng)用。
UIkit
一個(gè)輕量級(jí)的和模塊化的前端框架,用于快速開發(fā)和功能強(qiáng)大的web接口。
Yui
Yahoo! UI Library (YUI) 是一個(gè)開放源代碼的 JavaScript 函數(shù)庫(kù),為了能建立一個(gè)高互動(dòng)的網(wǎng)頁(yè),它采用了AJAX, DHTML 和 DOM 等程式碼技術(shù)。它也包含了許多 CSS 資源。使用授權(quán)為 BSD許可證。
kissy
一款跨終端、模塊化、高性能、使用簡(jiǎn)單的 JavaScript 框架。
MUI
最接近原生App體驗(yàn)的前端框架的框架。
Arale
一個(gè)開放、簡(jiǎn)單、易用的前端基礎(chǔ)類庫(kù)。
JX
JX 是模塊化的非侵入式Web前端框架,特別適合構(gòu)建和組織大規(guī)模、工業(yè)級(jí)的Web App。
GMU
GMU是基于zepto的mobile UI組件庫(kù),提供webapp、pad端簡(jiǎn)單易用的UI組件! Web App。
ZUI
開源HTML5前端框架
Clouda Touch.js
Touch.js是移動(dòng)設(shè)備上的手勢(shì)識(shí)別與事件庫(kù),也是在百度內(nèi)部廣泛使用的開發(fā)。