oqups

Moqups是一款免费的HTML5在线应用，可创建线框图、实体模型和UI概念。该程序使用起来非常简单，并且有内置的模板可以直接使用（模板包括单选按钮、链接、图像占位符、文本框以及滑块等）。

Stitches

Stitches是一个HTML5 sprite sheet生成器。用户只需要经过简单的拖拽图片文件到空白处，然后点击“Generate”就可以生成一个图像图标和样式表了。

HTML5 Maker

HTML5 Maker是一个在线的动画制作工具/服务，可通过HTML, HTML5, CSS和JavaScript创建动画和交互式内容。

Initializr

Initializr是一款HTML5模板生成器，帮助你快速启动基于HTML5模板的新项目。总之，Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。

Sprite Box

Sprite Box是一款WYSIWYG工具，可帮组Web开发人员轻松、快速地创建CSS类和ID。它是基于使用背景位置属性原则来调整插入到网页块元素中的精灵小图像。这款工具是使用 JQuery，HTMl5 和 CSS3 组合来运转的，而且是一款完全免费的工具。

Liveweave

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

Literally Canvas

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

HTML5 Demos

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

HTML5 Visual Cheat Sheet

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

Switch to HTML5

Switch to HTML5是一款高效的模板生成器。如果你开始一个新的项目，记住一定要访问该网站。各种各样的HTML5网站模板将会呈现在你的眼前。

Online SVG to HTML5 Canvas Tool

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

HTML5 Test

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

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

Patternizer

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

Lime JS

LimeJS 是一个 JavaScript 游戏开发框架,允许开发者创建基于 HTML5 的游戏,支持主流浏览器包括iOS。

HTML5 Reset

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

HTML5 Tracker

HTML5 Tracker能够用于跟踪HTML5相关的最新修订信息。

Cross browser HTML5 forms

表单是一个网站非常重要的一部分。 HTML5的特性日历，色彩板，滑动部件，客户端验证等这些都是非常强大的工具，但现实的情况就是，大多数的浏览器不支持所有的功能。这是一个很大的问题，刚好Cross browser HTML5能够帮您如何轻松创建一个跨浏览器的表单。

TML5和CSS3现在越来越备受网站建设者们的关注，它既简单，且网页版也好看。那么生成器就在自动生成代码时扮演者重要角色，它们非常适用于那些要做很多重复性工作的开发人员和设计人员，生成器可以帮他们解决这些繁琐的工作。在本文中，我们精心挑选了一些经验丰富开发人员和设计人员常用HTML5、CSS3代码生成器。

HTML5代码生成器

网上有五六种可以生成优质代码的HTML5生成器，其中的真谛是HTML5样板文件，我们不要自以为然的把样板文件当成是生成器，虽说这样，大多数开发者还是把它当作是他们第一个网站的模板。回到主题，要找到一个好的HTML5生成器并不是那么容易的事，因为网上有成千上万的网站提供各种各样的代码生成器。正因为如此，我们经常会被搞的稀里糊涂。不过，我们还是设法找到了一些比较好的生成器在本文中分享给大家。

Shikiryu HTML5生成器

Shikiryu HTML5生成器可以让你为应用程序添加一个中介器，而且很多人都喜欢这么用。你可以在模板里面增加特性和修改布局。事实上，这个是非常实用的。开发人员更钟爱这个生成器，因为相比其他的生成器，这个语义性更强，更易懂。

Initializr生成器

如果你要新建一个以HTML5样板文件为基础的项目，这将是你要开始你项目的好工具。它可以生成一个简洁的可自定义的模板。当你从各式各样的框架和类库中选择或是自定义模板时，模板就会以压缩文件的格式下载下来，然后你就可以拿这些代码来设计你的网站了。

Quackit HTML5生成器

Quackit 不仅可以给你提供一系列的代码，还允许你输入你的所有信息。这对初学者非常有帮助。所以，如果一开始你学的是CSS和html，你就可以用这个生成器来简化你的工作任务了。这些生成器可以说是非常棒的，因为它们专注于圆角边框，阴影，颜色渐变以及和html5模板的设计。

Modernizr生成器

Modernizr是一个开源的脚本类库，它可以帮助你建立HTML5和CSS3来使你的网站更强大。这样你就可以创建一些很好的，而且可以完美运行你代码的网站，不管用户用的是什么样的浏览器或是什么样的设备，都能优雅的展现。

CSS 代码生成器

CSS3 Maker

你可以很容易在网上找到这个生成器。一旦你开始用这个生成器，我相信你一定会完全依赖它的。有了它，你可以做很多动画、自定义字体、文本滚动、盒子模型阴影、圆角边框、文字阴影、过渡、渐变等等方面的效果。

me

个人而言，我是很喜欢这个生成器， CSS3.me是由设计师Eric Hoffman设计出来的。它使用起来很简便，是一个轻量级的、个性化而又功能强大的生成器。你可以用它来设置透明度、下拉阴影，改变和设置圆角边框，增加渐变效果等等。

CSS3-Tricks 按钮生成器

这是一个很经典古老的按钮生成器，它是非常线性的，而且没有图形界面。你可以在你的项目中用它来生成没有任何效果的按钮。

图片边框和圆角边框生成器

1.圆角边框生成器（Border-Radius）

这是个非常好的、轻量级的工具，主要拿来设置边角的圆角边框。一旦完成了边角设置，就可以在浏览器上检查你想要包含的前缀，这些都是已经完成了的。是个界面很简洁友好的生成器。

2.图片边框生成器（Border-Image)

假如你要画一个箭头或是一个三角形时，想让生成器把它平铺到你的网站边框或者是元素边框。这是最好用的图片边框生成器，当它要复制图片去找到最合适的边框样式时候。也就是说，届时，你就可以操作设置它的大小、偏移量，可以平铺这张图片等等。开发者经常喜欢拿它来设置背景。

CSS3渐变效果生成器

Color Zilla Gradient 生成器

此编辑器绑定了非常多的特性，用起来也非常容易。你可以单单稍微移动一下画笔就可以观察到他们的变化。它也可以在浏览器上直接使用，非常适合在网页上开发的开发人员和设计人员。

@fontface 生成器

这个生成器可以让你上传网页上的字体或是系统里面的字体。然后生成一个可以拿来用的输出文件。这个生成器给字体属性生成了一个CSS文件，然后字体就可以显示在HTML文件里了。这是一个非常好的检查字体工具，尤其是你没有足够的时间去创建一个使用许多重复性字体的完整的网站时候。

CSS3下拉阴影生成器

Webestools 阴影生成器

如果你想要对下拉阴影效果有更深、更具体的运用，这个生成器是我最强烈推荐的。因为它自带调节栏，外部阴影，内部阴影的设置，还可以设置阴影的颜色，偏移量和很多你意想不到的炫酷效果。

HTML5与CSS3如果协调的好，就会为您减轻部分工作压力，且能节省更多的精力。工具的好坏取决于您怎么去使用/去看待的，希望此篇文章能给您有所本帮！