推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

浅浅的花香味﹌ 2022-03-31 03:10 366阅读 0赞

HTML5 在不同的领域让网页设计更强大的。快速，安全，响应式，互动和美丽，这些优点吸引更多的 [**Web**][Web] 开发人员使用 HTML5。HTML5 有许多新的特性功能，允许开发人员和设计师创建应用程序和网站，带给用户桌面应用程序的速度，性能和体验。

这篇文章整理了25款优秀的[ **HTML5**][_HTML5] 框架和开发工具可以帮助你开发项目更快，更容易。

您可能感兴趣的相关文章

*  [推荐10款非常优秀的 HTML5 开发工具][10_ HTML5]
 *  [2012年最经典的10款 HTML5 游戏集锦][2012_10_ HTML5]
 *  [35款非常优秀的基于 HTML5 网页游戏][35_ HTML5]
 *  [20个惊艳的 HTML5 Canvas 应用试验][20_ HTML5 Canvas]
 *  [8个惊艳的 HTML5 和 JavaScript 特效][8_ HTML5 _ JavaScript]

### [Sonic][] ###

[![Sonic: HTML5 Loaders with an Editor][Sonic_ HTML5 Loaders with an Editor]][Sonic]

Sonic 是一个很小的 [**JavaScript**][JavaScript] 类，用于创建基于 [**HTML5**][_HTML5] 画布的加载图像。更强大的是提供了基于现成的例子的[**创建工具**][Link 1]，可以帮助你实现更多自定义的加载动画效果。

[在线演示][Sonic] [免费下载][Link 2]

### [Chart.js][] ###

[![Chart.js: Charting Library with HTML5 Canvas][Chart.js_ Charting Library with HTML5 Canvas]][Chart.js]

Chart.js 是面向对象的 [**JavaScript**][JavaScript] 图表库，使用 [**HTML5**][_HTML5] 画布实现漂亮的图表。它目前支持6个图表类型（线图，条形图，雷达图，饼图，柱状图和极区）。

[在线演示][Chart.js] [免费下载][Link 3]

### [RazorFlow][] ###

[![RazorFlow: Create Responsive & HTML5 Dashboards With PHP Framework][RazorFlow_ Create Responsive _ HTML5 Dashboards With PHP Framework]][RazorFlow]

RazorFlow 是一个 PHP 框架，用于快速，方便地创建能够在所有主流的移动设备和浏览器的响应式 [**HTML5**][_HTML5] 仪表板。它的工作原理简单，只需要插入一个单一的 PHP 文件到任何应用程序，喂给它的数据，选择输出类型就可以了。它可以与 MySQL 和 PostgreSQL 或 SQLite 数据库结合使用。

[在线演示][Link 4] [免费下载][Link 5]

### [Zebra][] ###

[![Zebra: Desktop-Like User Interface With HTML5 Canvas][Zebra_ Desktop-Like User Interface With HTML5 Canvas]][Zebra]

Zebra 是一个 [**JavaScript**][JavaScript] 库，带有丰富的用户界面组件，可以创建类似桌面风格的布局。UI 元素使用 [**HTML5**][_HTML5] 画布创建 ，在现代的浏览器上将有相同的呈现效果。

[在线演示][Link 6] [免费下载][Link 7]

### [Workless][] ###

[![Workless: HTML5-CSS3 Framework for Building Cross-Browsers Websites][Workless_ HTML5-CSS3 Framework for Building Cross-Browsers Websites]][Workless]

Workless 是 [**HTML5**][_HTML5] & [**CSS3**][CSS3] 框架，用于轻松构建跨浏览器的网站，包含现在网站开发中最经常使用的东西。

[在线演示][Workless] [免费下载][Link 8]

### [Native][] ###

[![Native: HTML5 Mobile Apps Framework][Native_ HTML5 Mobile Apps Framework]][Native]

Junior 是一个 [**HTML5**][_HTML5] 框架，用于创建类似原生风格的移动应用程序。非常易于使用，并且有详细的帮助文档和例子。 它使用 CSS3 过渡实现圆滑的动画效果，支持滑动的旋转木马，并包括各种 UI 组件。

[在线演示][Native] [免费下载][Link 9]

### [Radi][] ###

[![Radi: Visual Design Application with HTML5 and Javascript][Radi_ Visual Design Application with HTML5 and Javascript]][Radi]

Radi 是一个超棒的视觉设计应用程序，它具有内置工具用于创建和编辑图形（也可以导入）并使用 <canvas> 元素实现生成动画。

[在线演示][Radi] [免费下载][Link 10]

### [HTML5 Bones][] ###

[![HTML5 Bones: Boilerplate for HTML5-powered Websites][HTML5 Bones_ Boilerplate for HTML5-powered Websites]][HTML5 Bones]

HTML5 Bones 是一个 [**HTML5**][_HTML5] 网站的样板，包括最需要的东西（normalize.css，html5shiv 等）。

[在线演示][HTML5 Bones] [免费下载][Link 11]

### [Literally Canvas][] ###

[![Literally Canvas: HTML5 Drawing Widget][Literally Canvas_ HTML5 Drawing Widget]][Literally Canvas]

Literally Canvas 是一个 [**HTML5**][_HTML5] 开源部件，它可以集成到任何页面，使用户能够在线绘制。它配备了一套简单的工具，包括绘图，擦除，颜色选择器，撤消，重做，平移和缩放。

[在线演示][Literally Canvas] [免费下载][Link 12]

### [Gauge.js][] ###

[![Gauge.js: Animated Gauges With HTML5 Canvas][Gauge.js_ Animated Gauges With HTML5 Canvas]][Gauge.js]

Gauge.js 是一个漂亮的脚本，用于在 [**HTML5**][_HTML5] 画布中使用 [**JavaScript**][JavaScript]（或者 CoffeeScript）创建动画压力表。

[在线演示][Gauge.js] [免费下载][Link 13]

### [WYSIHTML5][] ###

[![WYSIHTML5: Rich Text Editor With HTML5 Markup][WYSIHTML5_ Rich Text Editor With HTML5 Markup]][WYSIHTML5]

WYSIHTML5 是一个开源的富文本编辑器，不依赖于任何 [**JavaScript**][JavaScript] 框架，轻量，快速。并提供了主要的文本编辑功能，包括文本样式（粗体，斜体），列表，标题，插入图像或链接和文本着色等。

[在线演示][WYSIHTML5] [免费下载][Link 14]

### [HTML5 Sortable][] ###

[![27142157-85ec7763f6d7444baed699ba7cd949b1.jpg][]][HTML5 Sortable]

HTML5 Sortable 是一个轻量级排序插件，使用原生的 [**HTML5**][_HTML5] 拖放 API 创建排序列表和网格。

[在线演示][HTML5 Sortable] [免费下载][Link 15]

### 您可能感兴趣的相关文章 ###

*  [让人惊叹的 Chrome 浏览器实验项目][Chrome]
 *  [分享21款丰富多彩的 HTML5 网页游戏][21_ HTML5]
 *  [推荐10款优秀的 HTML5 在线设计工具][10_ HTML5 1]
 *  [2012年最佳的 HTML5 应用和网站作品][2012_ HTML5]
 *  [29款基于 HTML 5 Canvas 的网页游戏][29_ HTML 5 Canvas]

英文来源：[25 Useful HTML5 Tools For Designer & Developers][25 Useful HTML5 Tools For Designer _ Developers]

文章来源：[梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源][_ _Web_ _]

[Web]: http://www.cnblogs.com/lhb25/category/279316.html
[_HTML5]: http://www.cnblogs.com/lhb25/category/146076.html
[10_ HTML5]: http://www.cnblogs.com/lhb25/archive/2011/10/09/10-online-tools-to-simplify-html5-coding.html
[2012_10_ HTML5]: http://www.cnblogs.com/lhb25/archive/2013/01/15/top-10-html5-games-2012.html
[35_ HTML5]: http://www.cnblogs.com/lhb25/archive/2012/05/09/exciting-online-web-games-built-in-html5.html
[20_ HTML5 Canvas]: http://www.cnblogs.com/lhb25/archive/2012/05/29/impressive-html5-canvas-experiments.html
[8_ HTML5 _ JavaScript]: http://www.cnblogs.com/lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html
[Sonic]: /images/20220331/8f21c2febf4a40478b67cd1ba8955efd.png
[Sonic_ HTML5 Loaders with an Editor]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/Sonic-HTML5-Loaders-with-Editor.jpg
[JavaScript]: http://www.cnblogs.com/lhb25/category/146074.html
[Link 1]: http://padolsey.github.io/sonic-creator/#default
[Link 2]: https://github.com/padolsey/Sonic
[Chart.js]: http://www.chartjs.org/
[Chart.js_ Charting Library with HTML5 Canvas]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/chartjs-charting-library-with-html5-canvas-1.jpg
[Link 3]: https://github.com/nnnick/Chart.js
[RazorFlow]: http://razorflow.com/
[RazorFlow_ Create Responsive _ HTML5 Dashboards With PHP Framework]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/RazorFlow-Create-Responsive-HTML5-Dashboards-with-PHP-Framework.jpg
[Link 4]: http://razorflow.com/demo/
[Link 5]: http://razorflow.com/download/
[Zebra]: /images/20220331/70b15bf20ed94c689e433ed2bd9bc4da.png
[Zebra_ Desktop-Like User Interface With HTML5 Canvas]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/Zebra-Desktop-Like-User-Interface-With-HTML5-Canvas.jpg
[Link 6]: http://www.zebkit.org/samples/index.html
[Link 7]: https://github.com/barmalei/zebra
[Workless]: http://workless.ikreativ.com/
[Workless_ HTML5-CSS3 Framework for Building Cross-Browsers Websites]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/Workless-HTML5-CSS3-Framework-for-Building-Cross-Browsers-Websites.jpg
[CSS3]: http://www.cnblogs.com/lhb25/category/146075.html
[Link 8]: https://github.com/iKreativ/Workless
[Native]: http://justspamjustin.github.com/junior/
[Native_ HTML5 Mobile Apps Framework]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/Native-HTML5-Mobile-Apps-Framework.jpg
[Link 9]: https://github.com/justspamjustin/junior
[Radi]: /images/20220331/e42cd0fbc3794a1a9e1a1da4d5709c75.png
[Radi_ Visual Design Application with HTML5 and Javascript]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/Radi-Visual-Design-Application.jpg
[Link 10]: /images/20220331/e42cd0fbc3794a1a9e1a1da4d5709c75.pngdownload/
[HTML5 Bones]: /images/20220331/8327f07a83c54b6991c6a87bf0960062.png
[HTML5 Bones_ Boilerplate for HTML5-powered Websites]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/HTML5Bones-Boilerplate-for-HTML5-powered-Websites.jpg
[Link 11]: https://github.com/iandevlin/html5bones
[Literally Canvas]: /images/20220331/05f4f2d2a04c41a0940ec3d523475eaf.png
[Literally Canvas_ HTML5 Drawing Widget]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/LiterallyCanvas-HTML5-Drawing-Widget.jpg
[Link 12]: https://github.com/literallycanvas/literallycanvas
[Gauge.js]: http://bernii.github.com/gauge.js/
[Gauge.js_ Animated Gauges With HTML5 Canvas]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/Gaugejs-Animated-Gauges-With-HTML5-Canvas.jpg
[Link 13]: https://github.com/bernii/gauge.js
[WYSIHTML5]: http://xing.github.com/wysihtml5/
[WYSIHTML5_ Rich Text Editor With HTML5 Markup]: http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2013/04/WYSIHTML5-Rich-Text-Editor-With-HTML5-Markup.jpg
[Link 14]: https://github.com/xing/wysihtml5
[HTML5 Sortable]: http://farhadi.ir/projects/html5sortable/
[27142157-85ec7763f6d7444baed699ba7cd949b1.jpg]: /images/20220331/50fafdd48dd84b8ebb3c80ab1d7d4337.png
[Link 15]: https://github.com/farhadi/html5sortable
[Chrome]: http://www.cnblogs.com/lhb25/archive/2012/10/26/impressive-chrome-experiments.html
[21_ HTML5]: http://www.cnblogs.com/lhb25/archive/2011/05/06/2020249.html
[10_ HTML5 1]: http://www.cnblogs.com/lhb25/archive/2011/11/21/10-online-html5-tools-for-web-designers.html
[2012_ HTML5]: http://www.cnblogs.com/lhb25/archive/2013/01/10/top-20-html5-sites-2012.html
[29_ HTML 5 Canvas]: http://www.cnblogs.com/lhb25/archive/2011/03/27/1993819.html
[25 Useful HTML5 Tools For Designer _ Developers]: http://graphicdesignjunction.com/2013/04/html5-tools-for-designers-developers/
[_ _Web_ _]: http://www.cnblogs.com/lhb25/