着HTML5开发的火热，如今国内各行业都开始进入HTML5领域，抢占红利，造就了职场新贵，HTML5开发成了一轮企业热招岗位。初学HTML5你并不需要任何的原生应用编程经验，你只需要一些HTML、CSS和JavaScript的知识。不可否认HTML5将会越来越好，因为移动端的硬件也会越来越强，其实你手机上的很多应用已经悄悄的使用混合式开发了，这也许就是HTML5的魅力所在吧。

目前已经有很多的框架可以帮助你开发跨平台的移动应用，在这篇文章中，千锋武汉HTML5培训的老师只介绍最牛的7个HTML5移动开发框架。

1、IONIC

IONIC是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就。

IONIC的开发团队将尽快开发出一种通过IONIC creator提供开发者快速创建IONIC应用的方式。我们将很快就会看到一个支持拖拉功能的可视化开发工具，几分钟内开发一个app将成为可能。

2、Mobile Angular UI

Mobile Angular UI是使用bootstrap 3和AngularJS的响应式移动开发HTML5框架。

Mobile Angular UI的关键字有：

Bootstrap 3

AngularJS

Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。

AngularJS modules，比如 angular-route, angular-touch 和 angular-animate

响应式媒体查询是将bootstrap作为单独的文件，你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖，你需要做的只是通过一些AngularJS指令创建友好的用户体验。

详细了解可以看一看the Mobile Angular UI demo page，上面有Mobile Angular UI的实践，如果你想了解的更深入一些，我建议你读一读 getting started with Mobile Angular UI。

3、Intel XDK

Intel XDK 是Inter开发的一款跨平台开发工具，我们可以很容易的通过Intel XDK开发应用，你需要做的只是下载他们的应用开发工具，有Linux、Windows和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap， jQuery Mobile和Topcoat。

4、AppceleratorTitanium

Appcelerator’s Titanium不同于其它框架的是，它是一个开源的框架。

Titanium是混合式移动应用开发的一站式解决方案，你只需要下载Titanium studio就可以解决所有的事情，Titanium SDK包含了很多手机平台的APIs和后端云服务。

Titanium使用 Alloy，Alloy是一个快速开发的手机应用MVC框架，模块式开发可以大大减小开发时间，提高代码复用。

Titanium studio 还提供了一些code模板。

5、Sencha Touch

Sencha Touch同样也是HTML5手机应用跨平台开发框架，运行iOS/Android/Blackberry。它已经诞生很多年了，现在已经成为很常用的混合式编程开发框架。

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。

下面是千锋武汉HTML5培训的老师总结出的几点特性：

基于最新的WEB标准——HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。

支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。

增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。

数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。

6、Kendo UI

Telerik’s Kendo UI 是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉(Drag-and-Drop)功能，模板，和UI控件。

7、PhoneGap

PhoneGap 恐怕是最老的一个框架了，相信很多人都已经听说过甚至使用过它，但是PhoneGap是基于开源的 Cordova 商业版本。

第一段PhoneGap代码是在2008年8月的iPhoneDevCamp上写成的。创建它的一个主要动力是基于一个几乎每一个单独的iPhone开发新手都要面对的简单事实：Objective-C是一个对Web开发人员来说非常陌生的环境，并且Web开发人员的数量远远多于Objective-C开发人员的数量。

问题是，是否有人可以开发一个框架，让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识，而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢？

就在那一年，PhoneGap获了奖并开始支持Android平台，对人数不断增长的移动开发人员变得越来越有用，这些人员需要在更多的平台上获得代码支持。

大家可以到PhoneGap documentation官方文档开始对PhoneGap的学习。

总结

在这篇文章中，千锋武汉HTML5培训的老师跟大家讨论了一些HTML5的移动开发框架，HTML5正式发布之后，很多开发者对HTML5又重燃了希望，相信这是个美好的时代，相信它会给我们带来更多的惊喜。

动端web开发框架、类库和UI组件简介，有需要的收藏一波。

react-native

一个基于React的创建原生APP的框架

html5-boilerplate

一个用来构建快速、强大、可适配的webapp的前端模板

ionic

领先的HTML5移动开发框架和SDK，利用你所熟知的web技术构建难以置信的移动应用，是AngularJS最好的朋友。

weui

由微信官方设计团队为微信Web开发量身打造的框架，包含移动web应用开发中有用的组件和模块

hammer.js

实现多点触控的javascript库

weex

阿里推出的跨平台的移动端开发框架，具有轻量级、可扩展和高性能的特点

fastclick

一个消除移动端浏览器上的点击事件的300ms的延迟

zepto

Zepto.jsisaminimalistJavaScriptlibraryformodernbrowsers,withajQuery-compatibleAPI

vux

基于Vue和Weui的移动端框架

wepy

腾讯团队推出的小程序组件化开发框架

NativeScript

NativeScript是一个利用JavaScript等WEB技术创建原生APP的框架

Framework7

功能强大的创建iOS&AndroidAPP的HTML框架

mui

最接近原生APP体验的高性能框架

ratchet

用简单的HTML,CSS,和JavaScript组件创建移动应用

react-native-elements

ReactNativeUI组件库

mint-ui

基于vue.js的移动端UI框架

amazeui

移动端优先的开源HTML5跨屏前端框架，俗称妹子UI

jquery-mobile

jQuery移动开发框架

Mars

腾讯移动Web前端知识库

interact.js

JavaScriptdraganddrop,resizingandmulti-touchgestureswithinertiaandsnappingformodernbrowsers(andalsoIE8+)

vant

有赞开发的基于Vue.js2.0的UI组件库

OnsenUI

用来构建混合移动端APP的HTML5UI框架

muse-ui

基于Vue2.0和MaterialDesigin的UI组件库

SUI-Mobile

SUIMobile(MSUI)是由阿里巴巴国际UED前端出品的一个手机端的UI库，轻量精美。更多信息请参考官网

ant-design-mobile

一个可配置的移动端UI框架

TouchSwipe-Jquery-Plugin

TouchSwipeisajqueryplugintobeusedwithjQueryontouchinputdevicessuchasiPad,iPhoneetc.

jquery-weui

创建微信混合app的UI库

jquery-ui-touch-punch

AduckpunchforaddingtoucheventstojQueryUI

device.js

Device.jsmakesiteasytowriteconditionalCSS_and/or_JavaScriptbasedondeviceoperatingsystem(iOS,Android,Blackberry,Windows,FirefoxOS,MeeGo),orientation(Portraitvs.Landscape),andtype(Tabletvs.Mobile).

react-native-ui-kitten

可定制和可重用的react-native组件包

iview-weapp

一套高质量的微信小程序UI组件库

vonic

基于Vue.js和ionic组件的SPAUI框架

brick

UIWebComponentsforModernWebApps

app

App.js是一个用来创建移动webapp的轻量级JavaScriptUI框架，可以表现得像原生APP而又不牺牲性能和优雅

Lungo.js

一个给开发者提供的设计、构建、分享跨设备应用的框架

AlloyFinger

腾讯Web前端团队推出的轻量级的多点触控手势库

FooTable

jQueryplugintomakeHTMLtablesresponsive

vue-ydui

一个基于Vue2.x的移动端组件库

wechat-h5-boilerplate

为腾讯微信优化的H5动效模板，帮助你快速构建全屏滚动型H5页面

slip

通过滑动和拖动手势操作列表的UI库

mobi.css

一个关注于移动端的轻量级的、灵活的css框架，

vue-touch

Vue.js的Hammer.js包装器

QuoJS

针对移动设备的微型JavaScript库

pressure

:point_down::boom:JavaScriptlibraryforhandlingbothForceTouchand3DTouchontheweb

junior

一个创建类似原生APP的html5应用的前端框架

vum

为手机webapp打造的基于Vue.js构建的UI框架

mobiscroll

ThecustomizablemobileUIlibraryfortouchdeviceslikesmartphonesandtablets

zingtouch

一个JavaScript触摸手势检测库

montage

montagejs是一个优雅的、开源的HTML5框架。它提供了模块化组件，双向数据绑定，以及更多功能

pushy

Pushyisaresponsiveoff-canvasnavigationmenuusingCSStransforms&transitions

GMU

基于zepto的ui组件库，适用于移动端

flex.css

flex.cssis是一个声明式的布局框架，能够兼容多个MVVM框架和浏览器

mobilebone

单页切换骨架。适用于移动webAPP,Hybrid混合APP,Phonegap开发,无兼容要求单页PC应用等

jquery.pep.js

Pep,alightweightpluginforkineticdragonmobile/desktop

Cloudajs

CloudaFramework-一个针对移动WebApp的实时JavaScriptRIA框架

jo

Jo(0.5.0)是一个轻量级的(~16K)创建HTML5应用的外壳。可以和PhoneGap,Chrome,Safari,Opera,FireFox,iOS,Android,BlackBerry10,Tizen,&WindowsPhone8+一起工作

touchui

高质量移动端UI框架

iosselect

一个简洁好看的模仿ios的webapp下拉菜单

mand-mobile

面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品

tabris-js

tabris.js-用JavaScript开发原生应用

aui

移动端UI快速布局解决方案（APICloudUI框架）

vue-carbon

基于vue开发的materialdesignui库

cordova-plugin-ibeacon

AniBeaconpluginforPhonegap/Cordova3.xandupwards.SupportsbothiOSandAndroid(contributionsarewelcome)

touch.code.baidu.com

TouchOfficalSite

bindingx

阿里团队推出的weex和ReactNative上富交互问题的一种解决方案

jQuery-Touch-Events

AcollectionofmobileeventpluginsforjQuery.

TinyNav.js

Responsivenavigationpluginthatweighsjust443bytes

Jingle

JingleUI是一个基于html5、css3开发轻量级的移动webapp框架，提供一些基本交互方式，帮助您更方便的开发移动应用。

light7

一个轻量级的易用的移动端UI框架

framework7-vue

基于Framework7和Vue构建iOS和Android应用

ydui

一只注重审美，且性能高效的移动端&微信UI

slip.js

移动端跟随手指滑动组件，零依赖。

wepayui

微信支付场景化组件，wepayui源码

BlendUI

BlendUI是Clouda+中的重要组成部分，他能让webapp的用户界面体验和交互能和Native媲美

toucher

面向移动端的手势类库

touchjs

一个移动端手势检测库

thumbs.js

Addtouchsupporttoyourbrowserwiththumbs.js-asmall,transparent,andsyntax-lesslibrary.

JMUI

移动Web开发UI组件库

JM

面向Mobile的极致JavaScript库

react-ui

为React打造的一套ionic风格的可复用UI组件库

Zoomage.js

Zoomage.js-一个通过手势缩放图片的库

touchSlider

TouchSliderjQueryPlugin

TML5从入门到精通，兄弟连京修随堂笔记（一）HTML的框架结构，每日都有新内容，订阅走一波

一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)。也就是将一个浏览器文档窗口分隔成多个窗口，每个窗口都可以显示一个独立的网页文件。

框架页使用了表格的方式组合，可以分为数行与数列。

框架的优点

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)。

方便制作导航栏。

框架的缺点

会产生很多页面，不容易管理。

不容易打印。

浏览器的后退按钮无效。

代码复杂,无法被一些搜索引擎索引到。

多数小型的移动设备（PDA 手机）无法完全显示框架。

多框架的页面会增加服务器的http请求。

由于上面诸多缺点，因此不符合标准网页设计的理念.已被标准网页设计抛弃

HTML框架标签

<frameset>标签 -- 代替body标签定义了框架页,并且定义了框架将分为多少行与多少列。常用属性如下:

cols -- 定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%

rows -- 定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%

border -- 定义frame定义的框架页的边框(单位像素),使用css实现

frameborder -- 定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)

framespacing -- 定义框架页之间间隔的距离,使用css实现

<noframes>标签

可为那些不支持框架的浏览器显示文本，和<body>组合使用

<iframe>标签

创建一个包含另外一个文档的内联框架，iframe标签内的内容可以做为浏览器不支持iframe标签时显示 。

frame标签 -- 定义frameset标签中每个框架页的内容

frame标签是单独出现的，<frame />

常用属性:

frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1

1 -- 在每个页面之间都显示边框

0 -- 不显示边框

name -- 在一个框架页链接到另一框架页时使用(另一个框架页可以使用target定义链接页)

noresize -- 定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)

scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto

yes -- 显示滚动条

no -- 不显示滚动条

auto -- 当需要时再显示滚动条

src -- 定义了内容页URL

border – 设置边框粗细

HTML框架示例

<html> <!-- 网页开始标记 -->

<head>

<title>使用框架定义后台管理平台模型</title>

</head> <!-- 设置网页标题 -->

<frameset rows="80,*" frameborder="1" border="5"> <!-- 划分两行 -->

<frame src="top.html" name="top" scrolling="no" noresize/> <!-- 顶部大类窗体 -->

<frameset cols="200, *"> <!-- 划分左右两列 -->

<frame src="menu.html" name="menu" scrolling="no" noresize/>

<!-- 左边菜单窗体 -->

<frame src="main.html" name="main" noresize />

<!-- 右边内容窗体 -->

</frameset> <!-- 内层框架结束 -->

<noframes>

<body><p>您的浏览器不支持框架，请升级浏览器</p></body>

</noframes>

</frameset> <!-- 外层框架结束 -->

</html>