【51CTO.com快譯】HTML5作為第五代HTML標(biāo)準(zhǔn)修訂版本,于2014年10月完成并發(fā)布。這套最新語(yǔ)言版本納入了一系列新的功能特性，包括經(jīng)過(guò)改進(jìn)的多媒體內(nèi)容支持能力、新的語(yǔ)法功能以及可伸縮矢量圖形（簡(jiǎn)稱(chēng)SVG）集成等等。

不過(guò)重要的是，HTML 5的核心優(yōu)勢(shì)在于其提供了不同瀏覽器之間更理想的互操作能力，從而使其成為跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)場(chǎng)景中的重要語(yǔ)言選項(xiàng)。如今，HTML 5已經(jīng)成為市面上最出色的移動(dòng)技術(shù)方案之一，同時(shí)也吸引到眾多企業(yè)級(jí)組織利用其進(jìn)行跨平臺(tái)Web應(yīng)用交付。當(dāng)前市場(chǎng)上存在著大量“HTML 5開(kāi)發(fā)框架”，足以為我們提供各類(lèi)必要功能與組件，從而順利而且高效地搞定移動(dòng)應(yīng)用開(kāi)發(fā)任務(wù)。

“HTML 5移動(dòng)應(yīng)用”基本上就是一款基于Web的應(yīng)用，其運(yùn)行不需要依靠特定設(shè)備以及瀏覽器。這種應(yīng)用由單一網(wǎng)絡(luò)頁(yè)面或者多個(gè)網(wǎng)絡(luò)頁(yè)面所構(gòu)成，可在現(xiàn)代移動(dòng)瀏覽器上順利打開(kāi)。HTML 5非常適合用于開(kāi)發(fā)此類(lèi)基于Web的移動(dòng)應(yīng)用，具體包括通訊應(yīng)用、電子商務(wù)應(yīng)用乃至旅行應(yīng)用等等。誠(chéng)然，原生移動(dòng)應(yīng)用往往能夠提供更出色的功能性、安全水平以及令人贊嘆的設(shè)計(jì)效果。但是，通過(guò)使用正確的框架，我們也能夠很容易地設(shè)計(jì)出一套基于Web的HTML 5移動(dòng)應(yīng)用，并使其擁有與原生應(yīng)用非常類(lèi)似的使用感受。此外，很多框架還提供對(duì)PhoneGap以及Cordova這類(lèi)方案的支持能力，這意味著我們能夠面向多種不同平臺(tái)及設(shè)備構(gòu)建動(dòng)態(tài)混合Web應(yīng)用。

因此，在今天的文章中，我們將共同了解十款出色的HTML 5框架——它們能夠幫助開(kāi)發(fā)人員構(gòu)建種類(lèi)繁多的響應(yīng)式Web應(yīng)用，包括生產(chǎn)力、在線(xiàn)通信、社交媒體以及音樂(lè)播放等等。閑言少敘，我們馬上進(jìn)入十大最佳HTML 5響應(yīng)式Web開(kāi)發(fā)框架主題。

1、GroundworkCSS 2

GroundworkCSS 2是一款響應(yīng)式HTML 5、CSS以及JavaScript框架。這套框架擁有一套強(qiáng)大的網(wǎng)格系統(tǒng)外加對(duì)應(yīng)劃分功能，足以滿(mǎn)足各類(lèi)臺(tái)式機(jī)、智能手機(jī)以及平板設(shè)備的需要。其網(wǎng)站還提供數(shù)量可觀(guān)的使用示例及說(shuō)明文檔，足以幫助大家快速實(shí)現(xiàn)原型設(shè)計(jì)以及面向標(biāo)準(zhǔn)網(wǎng)站、電子商務(wù)網(wǎng)站以及圖片庫(kù)等應(yīng)用場(chǎng)景的布局模板。值得強(qiáng)調(diào)的是，這套框架還提供其它一些功能，例如響應(yīng)式文本以及易于定制特性。

2、MontageJS

MontageJS是一套極具人氣的HTML 5框架，其專(zhuān)長(zhǎng)之處在于支持高性能與可擴(kuò)展性Web應(yīng)用的開(kāi)發(fā)。這套框架提供一系列面向組件的HTML模板，從而幫助這些組件擺脫對(duì)JavaScript或者CSS的依賴(lài)性。它還提供一套模塊化方法，能夠?qū)崿F(xiàn)組件的可復(fù)用性及代碼組織。另外，MontageJS的其它優(yōu)勢(shì)還包括基于云的視覺(jué)創(chuàng)作環(huán)境、功能性反應(yīng)綁定（簡(jiǎn)稱(chēng)FRB）以及隱含事件代理等等。

3、52Framework

52 Framework是一套強(qiáng)大的前端開(kāi)發(fā)框架，其能夠充分發(fā)揮HTML 5、CSS 3以及JavaScript的可觀(guān)潛能。這套框架當(dāng)中捆綁有大量?jī)?nèi)置功能，具體包括HTML 5視頻播放器、HTML 5表單驗(yàn)證、CSS 3屬性、網(wǎng)格系統(tǒng)以及HTML 5 canvas示例等。

4、Twitter Bootstrap

Twitter Bootstrap是一套強(qiáng)大的前端框架，能夠利用HTML、CSS以及JavaScript快速簡(jiǎn)單地實(shí)現(xiàn)Web應(yīng)用開(kāi)發(fā)任務(wù)。這套框架為開(kāi)發(fā)人員提供一系列極具實(shí)用性的功能，具體包括一套12列響應(yīng)式網(wǎng)格系統(tǒng)、JavaScript插件外加HTML元素等等。它還提供一系列可復(fù)用組件，從而實(shí)現(xiàn)導(dǎo)航、下拉菜單、面包屑導(dǎo)航、排版、提醒以及進(jìn)度條等功能。

5、SproutCore

SproutCore是一款高人氣前端框架，且利用MVC架構(gòu)規(guī)范構(gòu)建而成。立足于HTML 5的強(qiáng)大能力，它允許我們通過(guò)高效客戶(hù)端邏輯與高質(zhì)量主題特性構(gòu)建出運(yùn)行速度出色且具備可擴(kuò)展能力的Web應(yīng)用程序。

6、Foundation

Foundation是目前網(wǎng)絡(luò)社區(qū)內(nèi)應(yīng)用范圍最廣的前端開(kāi)發(fā)框架之一。這套框架能夠提供一系列覆蓋其網(wǎng)格系統(tǒng)的布局選項(xiàng)，同時(shí)具備多種現(xiàn)代功能特性，包括復(fù)雜布局、動(dòng)畫(huà)效果、快速原型設(shè)計(jì)以及更多。它還提供數(shù)套內(nèi)置HTML模板，幫助大家快速開(kāi)發(fā)出各類(lèi)網(wǎng)站與網(wǎng)頁(yè)成果，具體包括電子商務(wù)首頁(yè)、旅行網(wǎng)站、在線(xiàn)雜志、博客站點(diǎn)以及產(chǎn)品頁(yè)面等。

7、Base

Base是一款輕量級(jí)、模塊化HTML/CSS框架，能夠幫助我們開(kāi)發(fā)出各類(lèi)極為出色的網(wǎng)站應(yīng)用。Base的設(shè)計(jì)目標(biāo)在于同各類(lèi)新型與早期瀏覽器相兼容，并能夠順暢運(yùn)行在各類(lèi)移動(dòng)設(shè)備之上，而這種能力也使其成為一套強(qiáng)大的跨平臺(tái)及響應(yīng)式前端HTML 5框架。另外，Base框架還在其官方網(wǎng)站上提供一系列免費(fèi)的單頁(yè)面網(wǎng)站設(shè)計(jì)模板供大家使用。

8、 Onsen UI

Onsen UI是一套基于元素的定制化HTML 5 UI框架，且具備響應(yīng)式布局支持能力。這套框架提供相當(dāng)廣泛的Web UI組件選項(xiàng)。它也支持PhoneGap與Cordova，意味著其能夠輕松完成混合型應(yīng)用的開(kāi)發(fā)任務(wù)。Onsen UI的最大優(yōu)勢(shì)在于能夠同jQuery庫(kù)或者Angular.js框架快速結(jié)合，從而顯著提高使用效率。

9、 Enyo

Enyo是一款先進(jìn)的前端開(kāi)發(fā)框架，適用于開(kāi)發(fā)與原生應(yīng)用類(lèi)似的HTML 5應(yīng)用。它還是一款極具人氣的跨平臺(tái)框架，目前被廣泛用于開(kāi)發(fā)各類(lèi)響應(yīng)式與主流Web應(yīng)用，具體包括blogWalker、E Notes、Groupon Mobile應(yīng)用以及Confero等等。Enyo提供一系列功能特性，例如UI組件、功能部件、事件處理以及調(diào)試能力等等。

10、Ionic

Ionic是一套先進(jìn)的HTML 5框架，主要用于混合型移動(dòng)應(yīng)用的開(kāi)發(fā)工作。這套框架在A(yíng)ngular.js支持方面經(jīng)過(guò)優(yōu)化，且提供相當(dāng)豐富的HTML、CSS以及JavaScript組件。其還擁有一套強(qiáng)大的命令行界面（簡(jiǎn)稱(chēng)CLI），其中的卓越功能包括 實(shí)時(shí)重載與日志記錄整合，這意味著我們能夠更為輕松地跨越不同平臺(tái)對(duì)Ionic應(yīng)用進(jìn)行開(kāi)發(fā)、測(cè)試與部署。

總結(jié)陳詞：

HTML 5應(yīng)用的開(kāi)發(fā)難度要遠(yuǎn)遠(yuǎn)低于面向iOS或者Android系統(tǒng)平臺(tái)的原生應(yīng)用開(kāi)發(fā)難度。HTML 5方案的另一大優(yōu)勢(shì)在于，我們可以通過(guò)更為便捷的方式實(shí)現(xiàn)Web應(yīng)用發(fā)布——相比之下，原生應(yīng)用則只能接受審核以獲得在相關(guān)應(yīng)用程序商店中的上架權(quán)。另外，與原生應(yīng)用不同，我們也能夠很輕松地對(duì)HTML 5應(yīng)用中的漏洞進(jìn)行修復(fù)或者進(jìn)行功能改進(jìn)。然而，HTML 5應(yīng)用缺少一部分原生應(yīng)用引以為傲的重要特性，例如對(duì)本地設(shè)備功能的訪(fǎng)問(wèn)能力以及安全的離線(xiàn)存儲(chǔ)模式。無(wú)論如何，HTML 5確實(shí)標(biāo)志著一場(chǎng)效果顯著的移動(dòng)開(kāi)發(fā)技術(shù)革新，而我們也可以期待上述問(wèn)題能夠在不久的未來(lái)一一得到解決。

原文標(biāo)題：10 Best HTML5 Responsive Frameworks for Web Development

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】