【精品】16款加速编码的HTML5在线工具 - Web前端

众所周知，现在html5+css3越来越成熟了，应用到WEB页面越来越多，尤其是在手机端，HTML5是目前最为流行的语言之一，大受开发者和设计师们的青睐。Html5有许多属性，包括支持现代主流浏览器（firefox 6、googleChrome、ie9等）、特定结构标签、视觉元素比如内置的圆角元素，拖拽、新的视频、音频以及Canvas元素等等。但是如何让我们写的编码加速呢，推荐16款针对html5急速编码的工具，如下：

1.  Mockups

Moqups是一款完美的HTML5 APP，用于创建线框、模型或UI、原型。有了它让工作变得更简单且直观，因此，你可以充分发挥自己的创造力，无任何障碍。

2.  Stitches

Stitches一款HTML5版网页生成器。你只需简单拖放图片文件至页面空白处并点击 “Generate” 即可创建出一款简单的样式列表。Stitches使用一组HTML5 API，它是目前唯一一款兼容chrome和Firefox最新版本的应用，暂不支持ie9。对于老版本的浏览器，需要安装JQuery 1.7.1+、Modernizr、Dropfile、FLASHcanvas。该产品基于MIT许可证发行。

3.  HTML5 Maker

HTML5 Maker是一款在线的动画设备/工具，利用HTML、HTML5、CSS及javascript创建互动内容。它不仅简洁易用 ，还能帮助你实现非常好的效果。支持跨浏览器的动画内容包括JavaScript和HTML5动画、幻灯片、演示文稿及幻灯片。

4.  Initializr

Initializr是一款HTML5版的模板生成器。这是一款完全可定制的模板！

5.  Sprite Box

spritebox是一款所见即所得的工具，帮助Web设计师快速、轻松构建css类及IDs。它是基于使用背景位置属性来调整图像区域，从而形成Web页面的模块元素。该产品是使用jQuery、CSS3和HTML5组合创建而来，完全免费。

6. Liveweave

liveweave在html4/HTML5、CSS2/CSS3中含有内置的自动完成上下文特性，让你工作起来更加轻松。你只需输入HTML5和CSS3 标签/元素即可，就是这么简单。

7. Literally Canvas

Literally canvas是一款开源的HTML5组件，可集成到任何页面，用户可在线进行绘制。它配备了一套简单的工具，包括绘图、擦除、颜色选择器、撤销、恢复、平移以及缩放。该工具利用jquery+和Underscore.JS创建而来，利用API定义背景色、工具以及尺寸。

8. HTML5 Demos

HTML5 Demos能够让你立即知道Firefox是否支持HTML5 Canvas，Safari能否运行HTML5 聊天客户端。

9.  HTML5 Visual Cheat Sheet

HTML5 Visual Cheat Sheet是专为Web设计师和开发者设计的一款速查表。这份速查表包含了HTML tag列表以及支持HTML4.01/5版本的相关属性。

10. Switch to HTML5

switch to HTML5是一款基本的且又高效的模板生成器。如果你想启动某个新项目，记住一定要访问该网站。各种各样的HTML5网站模板将会呈现在你的眼前。

11.  Online SVG to HTML5 Canvas Tool

这款工具可以将svg转换成HTML5 Canvas Javascript函数。它几乎可以运行在任何主机上，帮助用户去尝试使用Canvas，可以导出大量的矢量艺术包（Illustrator，Inkscape）。

12. On/OFF FlipSwitch

13.  HTML5 Test

利用HTML5 test可以测试你的浏览器支持即将推出HTML5 标准和相关规范的得分情况。尽管该规范还没有最终敲定，但是所有主流浏览器厂商都在为未来做好准备。

你可以查看浏览器支持HTML5 哪些部分并与其他浏览器进行对比。

14.  Patternizer

Patternizer是用来创建条纹图案的生成器。

15. Lime JS

这是一款HTML5游戏框架用于创建游戏，让你轻松体验在现代触摸屏和桌面浏览器上的速度。

Limejs是由谷歌的Closure Library创建而来。其自带的功能/类可控制时间轴、时间、形状以及动画。此外，该框架完全支持图表功能（你可以在单独的文件中收集图像）。

16. HTML5 Reset

HTML5 Reset是（HTML，CSS等）一套设计组件，旨在帮助用户节省大量的时间，创建更加高效的项目。

我们一直在努力中.....