Html5框架收集整理总结
哪些框架是适合面向手机设备的开发的。
1、 jQuery Mobile
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
2、 jQTouch
jQTouch 是一个 jQuery 的插件,主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。
3、 DHTMLX Touch
DHTMLX Touch是一个免费的HTML5/JavaScript框架,专门为触摸屏设备而优化。为您带来快速开发工艺精美的移动Web应用程序的能力。 DHTMLX Touch UI Designer是 一个可视化的编辑器用于构建移动用户界面。它能够帮您以最少的编码构建一流的用户界面。在其主页上提供一些示例可以展示DHTMLX Touch强大的用户界面。包括一个 menu app for the iPad (适用于开发餐厅应用) 和Book Shop (一个电子书店应用)。
4、 Mobilize.js
Mobilize.js 是一个开源的HTML5-JavaScript框架用于从任何现在有标准网站快速,简便地构建移动网站。这个框架其实就是 将需要在移动设备上显示的部分页面以jQuery Mobile的默认主题显示,而不是实现一个全新完整的移动页面。Mobilize.js 可用于任意网站,但对于基于WordPress和Sphinx的网站不需要使用该框架转换,因为已经有非常多的插件可以使用。
5、 The M Project
The- M-Project是另外一个强大的JavaScript框架,它利用HTML5新的特性来更好和更简便地开发移动应用。这个框架遵循著 名的MVC软件架构模式。它还支持离线,所以你的用户可以在没有连接网络的情况下继续操作(当下次有连线的时候,再将数据同步到服务器中)。提供优秀的文 档(这个项目拥有一个引导新用户入门的 开发指南)。可以查看提供的 示例来对该项 目有一个初目的了解。这些示例包括: ToDo App(待办事项 目应用) 和 KitchenSink (这个示例包括这个框架提供的所有UI元素)。
6、 WebApp.Net
WebApp.Net 提供了很多的 API,因此可以帮助你节省很多工作了。不需要花时间去进行 Ajax 调用的编码,因为已经内置了,另外还有很多其它内置功能,提供了详细的文档和应用演示。
7、 Wijmo
Wijmo是一个基于jQuery UI的UI部件的套件。Wijmo部件进行了优化客户端Web开发和利用jQuery的优越的性能和易用性的力量。所有的Wijmo部件都配备了20多个 主题和支持ThemeRoller。
8、 960 Grid on jQuery-Mobile
jquery-mobile-960 是一个用于移动 Web 开发的网格框架,综合了 960.gs 的灵活性和 jQuery Mobile 的方便性。它的目的是让 jQuery Mobile 布局更加的灵活,使得应用应许在移动终端更加易用。
9、 Sencha Touch Framework
Sencha Touch 是世界上第一个基于 HTML5 的移动 Web 开发框架,支持最新的 HTML5 和
CSS3 标准,全面兼容 Android 和 Apple iOS 设备,提供了丰富的 WEB UI 组件,可以快速的开发出运行于移动终端的应用程序。Shencha是第一个使用HTML5,CSS和JavaScript并且支持音频/视频,本地存储, 圆角,渐变背景以及阴影的开发框架。
10、 NimbleKit
NimbleKit 是为 iOS 设备构建应用程序最快速的方式,你不需要知道 Objective-C 或者 iOS SDK,你只需结合 JavaScript 代码编写 HTML 页面就可以了。
11、 Touchy? Boilerplate
Touchy Boilerplate 是一个用来创建移动web app,包括HTML模板,Meta tag等的工具。Touchy可以支持动态页面导航,固定页头,滚动内容,浏览历史记录等功能。Touchy使用jQuery或者 Zepto.JS。
12、 PhoneGap
PhoneGap 是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系 人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如 iPhone的iPhone SDK,Android的Android SDK等,也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个 平台分别编译应用程序。
13、 joshfire
Joshfire 是一个开源的跨设备开发框架,帮助开发者创建可以在多种设备上运行的web app。它使用HTML5和JavaScript,并且允许开发者快速整合本地应用和特定的web应用。Joshfire可以让你的应用接受键盘,鼠标, 触摸屏,遥控器等设备的输入。Joshfire支持Node.JS。
4.Sencha Touch:基于HTML5的移动网页开发框架。
14、 Julia
Julia 框架由基本CSS3文件、JS库和各个平台的运行库构成。不像PhoneGap,Julia不仅仅包含调用本机代码的接口层,它还包含 Model-View-Controller(MVC)支持,Delegation支持,OAuth支持,异步数据库存取接口,HTML选择符(类 jQuery调用接口),HTML模版(允 许嵌入JS代码)等应用开发必备的API接口。 基于Julia的应用开发就像网站开发那么简单,是的,你终于可以用HTML5开发一个完整的、跨平台 的、不亚于本机代码的、易于维护的移动应用了!大幕即将揭晓,让我们一起进入移动开发的新时代
15、 SproutCore HTML5 Application Framework
SproutCore 是一个 HTML5 移动 Web 开发框架,它的目标是在无需浏览器插件的情况下,在浏览器中位应用程序提供极佳的桌面效果。
16、 Titanium
这 是一个强大的,健壮的移动Web开发框架。能够让使用现有的HTML, CSS和JavaScript知识来为 iOS和Android平台开发原生移动应用。作为一个越来越大的移动Web框架,它拥有超过300个的APIs和活跃的开发者社区。你从这个社区中得到 每一个开发人员的帮助。Titanium Mobile支持原生的iOS和Android UI元素如Table views, tabs, switches和popovers。它提供能够与移动设备的摄像头和本地文件存储系统相交互的特性。
17、 Lungo.js
Lungo.js 是一个采用HTML5, CSS3 和JavaScript技术实现的移动Web应用程序开发框架。利用这框架开发的应用程序可运行所有流行的平台包括:iOS, Android, Blackberry 和 WebOs。它还支持触摸事件如:tap, double-tap和swipe。整个框架没有用到任何图片包括图标,所有都矢量化。可以在这个框架中使用HTML5拥有的一些特性如:WebSQL, 地理位置定位,
历史或设备方向等。Lungo.js是一个模块化并且完全可定制的框架。
18、 xui.js
有时候你可能需要一个超轻量级的框架,只要拥有用于开发标准客户端所需要的功能如:DOM操作,事件处理,Ajax和一些动画效果。如果是这样的 话,这个框架刚好非常适合你。整个框架采用GZIP压缩完之后只有4.2 KB。
19、 EmbedJS
EmbedJS 是一个用于嵌入式设备的JavaScript框架如:移动电话,TVs、tablets和so forth。EmbedJS强大之处在于,它拥有专门为特定平台和浏览器如iOS, Firefox, Android等提供相应的开发版本。这样就能够以最少的代码,为用户提供最佳的体验。而且假如你喜欢自己定制,可以利用其提供的 EmbedJS Build tool工 具实现。EmbedJS基于Dojo实现,所以你如果熟悉Dojo API语法,那EmbedJS将是你最佳的选择。
20、 zepto.js
zepto.js 是一个专为mobile WebKit浏览器(如:Safari和Chrome)而开发的一个JavaScript框架。它标榜自己在其简约的开发理念,能够帮助开发人员简单、快 速地完成开发交付任务。更重要的是这个JS框架,是超轻量级的,只有5KB。zepto.js的语法借鉴并且兼容jQuery。
21、 Baker
Baker是用来在iPad或者iPhone平台上发布交互式的电子书或者电子杂志的HTML5电子书框架。
22、 ChocolateChip-UI
ChocolateChip-UI 是一个手机移动 Web 开发框架,采用 HTML5, WAML, CSS 和 JavaScript等技术实现。基于 ChocolateChip JavaScript 框架,包含最新的 ChUI.JS 和 ChUI.css.
23、 Magazine Grid
Magazine Grid 是一个超现代的 CSS 框架,用于 iPad 和 iPhone 手机,使用类似杂志的设计风格。Magazine Grid 可让用户使用 HTML5 元素来组织杂志页,非常轻量级(<4k),在移动设备上加载非常快,对老的浏览器也支持。
24、 Kendo UI
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。 Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。
25、 HTML App Host Framework
Html简单总结
一.概述
1.什么是Html文件
①.Html是一种描述网页的语言,英文全称是Hypertext Marked Language,中文全称是“超文本标记语言”
②.它拥有自己的一套标记标签,它使用标记标签来描述网页,它的标签都是用尖括号包围着,并且通常都是成对出现,比如段落标签<p></p>,<p>为开始标签,</p>为结束标签,中间放上你所写的内容。
③.一个Html文件的后缀名是.html或者是.htm
④.用文本编辑器就可以编写Html文件
2.Html元素
①.Html元素用来标记文本,表示文本的内容。比如body,p等就是Html元素 ②.Html元素用标签表示,标签以<开始,以>结束
③.标签都是成对出现的。
④.目前Html的标签不区分大小写。比如<HTML>和<html>其实是相同的。
3.Html元素的属性
①Html元素可以拥有属性,属性可以扩展Html元素的能力。比如你可以使用一个bgcolor属性,使得页面的背景成为红色,可以进行如下设置<body bgcolor=”red”>
②属性通常由属性名和值成对出现,就像这样:name=”value”,在上个例子中的bgcolor就是name,red就是value。属性值一般用双引号表记起来
③属性通常是附加给Html的开始标签,而不是结束标签
二.大体的构架
<html>
<head>
<title>该文本的标题</title>
</head>
<body>
</body>
</html>
简单介绍:
<html>:表示该文件是html文件,此标签是成对出现的<html></html>,放在最外面
<head>:通常包含该html文件的标题,同时也可以在这里面定义js脚本,css样式等,它也是成对出现的<head></head>
<title>:该处是书写html文件的标题,一个文件肯定会有一个标题,代表着它的内容或作用,而标题就在此标签中写,它也是成对出现的<title></title>
<body>:此里面放的是你要在页面上显示的内容,比如一个段落,一个图片或一个视频等内容,同时也可以在此里面写js脚本(通常我们都在<head>标签中写),它也是成对出现的<body></body>
三.标签的回顾(示例都放在了Html示例文件中)
1.换行标签<br/>,
将此标签加在某一段的内容的后面,该标签后的内容就会另起一行进行显示,它不是成对出现的,见示例001.Html
2.段落标签<p></p>
此标签是段落标签,在内容的前后加上此标签后,它会自动的在内容前后创建一些空白,内容前后各空一行,见示例002.html,此外<p>标签内还可以加入一些属性
①align属性:它的作用是使标记的内容以何种对齐方式进行显示,通常有居中(center),左对齐(left),右对齐(right)等显示样式,如<p align=”right”>标记的内容</p>,内容会右对齐进行显示,此外还有一个用法(网上查到的,以前没用过),属性值是justify,作用是对行进行扩展,这样每行都有相同的长度,即两端对齐,此属性只适用于区块标记,但是它已经不被W3C所倡导,各种效果可见示例002.html
见示例002.htnl
3.标题标签<h></h>
标题标签一共有六对,分别是<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>,其中<h1>定义的是最大的标题,<h6>定义的是最小的标题,默认情况下,浏览器会自动的在标题的前后各添加一空行,可以使标记的内容产生粗体的效果。在需要特别强调文本内容时,通常使用。效果见示例003.html
4.水平分割线标签<hr/>
<hr>标签会在页面中创建一条水平线,它没有结束标签,此外在此标签中还可以加入一些常用属性,比如颜色属性(color)、对齐方式属性(align)、高度属性(size),宽度属性(width)(这些属性已不赞成使用,常用样式来取代这些属性的使用)示例如004.html(验证的是color属性)
5.粗体文本标签<b>
通常用<b>标签去定义文本中比较重要的部分,被定义的部分会以粗体的样式显示。它是成对使用的,效果见示例005.html
6.斜体文本标签<i>
斜体文本标签会让被标记的内容以斜体的样式进行显示,通常也是为了引起读者的注意,它是成对使用的,效果见示例006.html
7.超链接标签<a href=””></a>
这是一个很重要的标签,几乎在每一个网页中都会用到它,其中它最重要的属性就是href,它指定链接的目标,其中这里涉及了相对路径和绝对路径的问题。 ?相对路径
①相对路径:意思是当前文档所在的路径引起的跟其它文档的路径关系。就是它
从当前文档路径出发,以它为路径的起点
②如何表示上级目录
../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。举例如下:
假设info.html路径是:c:\Information\info\info.html
假设index.html路径是:c:\index.html
在info.html加入index.html超链接的代码应该这样写:
<a href=”../../index.html”>index.html</a>
②如何表示下级目录
引用下级目录的文件,直接写下级目录文件的路径即可。举例如下: 假设info.html路径是:c:\Information\info\info.html
假设index.html路径是:c:\index.html
在index.html加入info.html超链接的代码应该这样写:
<a href=”Information/info/info.html”>info.html</a>
?绝对路径
①绝对路径:通俗理解就是你所要找的文档的真实路径,通常绝对路径会引起一些错误。比如,你做的网页在另一台电脑上运行,而这个电脑上没有你所设置的路径中的某一个文件夹,那么路径就会报错,找不到你所连接的文档。超链接效果示例如007.html
此外它还有一个比较重要的属性target,通过设置它,可以把你要显示的页面用何种方式进行显示,它有四个值(此效果的例子在完成框架部分再进行演示) ①_blank 你所连接的目标对象会在一个新窗口中打开
②_self 你所连接的目标对象会在原来的窗口中打开,这也是一个默认值,即
当你不加这个target属性时,它也会出现这样的效果
③_parent 这个属性通常与框架一起使用
④_top 作用是在整个窗口中打开你链接的窗口
?name属性
①使用name属性,可以跳转到一个文件的指定部位
②使用name属性,要设置一对,一是设定name的名称,二是设定一个href指向这个name,如下
<a href=”#c1”>起始位置</a>
<a name=”c1”></a>
③name属性通常用于创建一个大文件的章节的目录,便于查找每个章节
④如果浏览器不能找到Nam指定的部分,则显示文章开头,不报错,效果示例如007.html
?链接到email地址
格式如下:<a href=”mailto:邮箱地址”>邮箱地址</a>,效果示例如007.html ?title属性
①使用title属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。 ②如果希望注释多行显示,可以使用 ;作为换行符,效果示例如007.html
8.图片标签<img>
图片标签的主要作用是加载一张图片在页面中显示,它加载的只是一个链接,是你所要显示的图片的链接地址,它有两个特别重要的属性,一个是src属性,另一个是alt属性。
?src属性:它的值是你所要加载的图像的路径,通常叫做Url
?alt属性: 它的作用是在图像没法显示时的替代文本,即它可以告诉人们这张图像的一些信息。当鼠标移动到图片上时,会显示这些提示信息。效果示例参见008.html
? 此外图片标签还有其它的一些属性,比如定义图像的高度(height)和宽度(width),还有与周围文本的对齐方式(align)等各种属性
? 当给图片加上超连接时,图片会出现边框,此时若要消去边框,只需在图片标签<img>中,加上属性border=”0” 即可。
? 如果你想把图片的某一部分设置成超链接,你可以用usemap和ismap属性,这两个属性是设置图片的热区,即有超链接的地方。这两个属性的不同之处是:usemap处理客户端图像时,不要求有服务器或特殊的服务软件,而ismap则需要有服务器或特殊的服务器软件。示例见008.html
① image-map :
定义:一个客户端的图像映射。图像映射是指带有可点击区域的一副图像。 ②map元素内部嵌套着area。area元素可定义图像映射中的区域。
③由于浏览器的问题,<img>中的usermap属性可引用<map>中的id或name属性(取决于浏览器),所以我们应该同时向<map>添加id(为map标签定义唯一的名称)和name(为image-map规定的名称)属性
④area:
此标签定义图像映射中的区域,此标签总是嵌套在<map>中,有一个必须的alt属性,此属性是定义此区域的替换文本,此外还有很多可选的属性,比如href(定义此区域的目标URL),target(规定在何处打开href属性指定的目标URL)
9.字体样式标签<font></font>
它可以对文本的字体、字体的大小以及字体的颜色进行设置,成对出现,通常用到的属性是:
①size:规定文本字体的大小
②face:规定文本字体的样式,如宋体、楷书或者隶书等等
③color:规定文本字体的颜色
效果参见示例009.html
10.预格式化文本标签<pre></pre>
预格式化文本标签可以原样显示你所要显示的文本,通常用来显示计算机的代码,因为计算机代码中可能有很多空格或者特殊字符,要想让它按照原样显示,用这个标签便可以实现。他用到的属性通常为:
width:表示每行可书写的最大字符数,效果示例参见010.html
11表格标签<table></table>
⒈表格在html中非常重要,比如你要显示一些数据,通常就会用到表格,在以前,表格还可以用来布局,让人浏览起来感觉很舒服,不过现在通常用<div>标签来布局。一个简单的表格通常由行标签<tr>、列标签<td>以及表头标签<th>组成。 用<th>定义的表头,会出现居中加粗的效果。
在一个表格中可能有很多行很多列或者很多个表头,每一行中又可能有很多个单元格,所以在<table>标签中可以定义很多个<tr>、<th>或者<td>,见示例011.html ⒉Table用到的属性很多,在这里只介绍通常用到的:效果示例见011.html ①border: 规定表格边框的宽度
②bgcolor/background:规定表格的背景颜色/背景图片
③width/height: 规定表格的宽度/高度
④align: 规定表格相对周围元素的对齐方式
⑤cellpadding:规定单元边沿与其内容之间的空白
⑥cellspacing:规定单元格之间的空白
⑦caption:规定表格的标题
⑧colspan:可以设置表格的跨列效果
⑨rowspan:可以设置表格的跨行效果
⑩frame:此属性用来控制围绕表格的边框,它有9个值(效果见011.html) ?void:不显示外侧边框
?above:显示上部的外侧边框。
?below:显示下部的外侧边框。
?hsides:显示上部和下部的外侧边框。
?vsides:显示左边和右边的外侧边框。
?lhs:显示左边的外侧边框。
?rhs:显示右边的外侧边框。
?box:在所有四个边上显示外侧边框
?.border:在所有四个边上显示外侧边框
12.特殊字符
?有些字符在html里有特别的含义,比如小于号<就表示Html标签的开始,而这个小于号<是不显示在网页里的,那么我们如果要显示一个小于号,就要用到特殊字符。同理,如果要显示多个空格,也要用到特殊字符,因为在网页中,不管你在两个字之间加了多少个空格,Html只会保留一个空格,而截去其余的空格。
?最常用的特殊字符:
显示结果 说明 实体名字
显示一个空格
< 小于 <
> 大于 >
& &符号 &
“ 双引号 "
@ 版权 ©
× 乘号 ×
÷ 除号 ÷
13.框架结构标签<frameset></frameset>
?使用框架,可以使浏览器窗口显示多个网页,每个frame里设定一个网页,每个网页相互独立。
?框架标签<frame></frame>决定如何划分frame,<frame>有cols属性和rows属性,使用cols属性,表示按列分布frame;使用rows属性,表示按行分布frame ?用frame这个标签设置网页,<frame>里有src属性,src值就是网页的路径和文件名
?我们在定义了一个有边框的框架时,通常我们都可以随便拖动,为了避免这种情况的发生,我们可以在<frame>标签中加入:noresize=”norsize”
?不能将<body></body>标签与<frameset></frameset>标签同时使用
概述新标记HTML5提供了一些新的元素和属性这些新标记更利于搜索引擎理解页面内容同时也在一定程度上简化页面的编写1结构性标记hea…
Css3毛玻璃效果不过今天又仔细研究了一下css3中的blur方法可以实现同样的效果且配合JS可以实现模糊缩放的效果CSS代码bl…
第一章总结今天学习表格设计主要为一些标签属性及属性值的学习主要的标签ltthgt行lttdgt列单元格lttrgt属性border…
Html5总结首先在需要的页面加入如下js和css就可以使用了ltviewport的meta标签将屏幕的宽度设置为了与设备的宽度相…
一html5简介1html的组合HTML5HTMLCSSJSAPIsHtml5的发展其实是htmlcssjsapi的发展HTML5…
HTML5想必大家都很熟悉了因为太多的媒体在讨论这一技术然而你能准确地说出HTML5带来了哪些新特性吗本文总结了HTML5带来的1…