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

们来看看Chrome DevTools中的便捷实时编辑功能，以及它如何帮助您调试HTML和CSS，使您的前端更流畅。

Chrome DevTools是一款内置于Chrome浏览器中的强大的Web开发工具套件。DevTools对Web开发人员最有用的功能之一是能够在页面上实时编辑HTML和CSS。该功能允许任何开发人员，即使是HTML和CSS知识较弱的开发人员，都可以对网页的潜在变化进行快速原型和迭代。

在使用Lucidchart时，我最近的一个项目是在用户输入帐单信息时在输入中添加一些复选标记，以便在用户输入格式正确且有效的信息时即时提供反馈。尽管我在后端代码中比在CSS和HTML中工作更舒适，但我可以通过实时编辑功能轻松实现这些复选标记。

使用检查器工具编辑HTML有两种快速打开检查员的方法。首先是用F12打开DevTools ，选择“Elements”选项卡，然后单击左上角的光标图标。第二，更快，方法是使用键盘快捷键Ctrl + Shift + C。如果您经常在Linux环境中工作，那么在您意图复制文本时，很有可能很多次您都会在意外中使用此快捷方式！

一旦检查员处于活动状态，您可以通过单击它查找页面上任何元素的HTML。Chrome浏览器还会显示您将鼠标悬停在其上的元素的位置和大小信息。

一旦选择了一个元素，就可以通过各种方式与它进行交互。通过右键单击“元素”选项卡中的HTML并选择“编辑为HTML”，您可以实时编辑网页的标记，Chrome将在编辑完成后立即呈现该标记。

告诉DevTools您正在编辑可能会非常棘手。你的第一本能可能是击退Escape键，但这会使你退出编辑而放弃你的改变。您可以通过按Ctrl + Enter或直接单击您正在编辑的文本框外部来保存更改。

使用正常的Ctrl + Z和Ctrl + Y热键可以撤消或重做HTML编辑。除非您启用持续性编辑，否则它们也将在页面刷新时丢失。

为了开始我的复选标记项目，我开始创建一个原型元素作为测试我想要做的调整的地方。使用Chrome DevTools的实时编辑功能，我添加了一个仅包含字母“X”的占位符div，作为临时临时选中标记。

显然，这是一个非常糟糕的选择标记的借口，但它足以帮助我快速确定一些问题。首先，复选标记完全是错误的。另外，它弄乱了页面上其他元素的对齐。这两个问题都可以通过一些CSS来解决。幸运的是，Chrome还提供了一些优秀的工具，可以使用DevTools快速构建CSS更改原型。

从“元素”选项卡编辑CSS在“元素”选项卡的HTML视图右侧，有一个视图，显示了CSS规则适用于选定元素的细分。这个视图对于调试大量的CSS错误非常有用。例如，因为您可以看到哪些规则适用于当前元素，您可以确定某个元素是否获得了您所期望的CSS规则，或者缺少您认为应用于其中的CSS规则。CSS视图还显示何时由匹配规则应用的样式被更具体的规则覆盖。

CSS视图提供了一些非常有用的实时编辑功能。每种样式都在其旁边有一个复选框，让您启用或禁用某些样式，并查看它们如何影响页面上的元素。您还可以将新样式应用于特定元素，现有CSS规则或全新的CSS规则。所有这些更改都立即反映在页面上。

Chrome DevTools提供了一些便利的功能，可以使实时编辑CSS变得更容易。对那些不熟悉CSS的人最有帮助的是自动完成功能。在您输入风格名称时，Chrome会建议可能的匹配项。一旦输入样式的名称，Chrome也将帮助您使用该样式的正确值。对于枚举式样式，例如“位置”或“显示”，Chrome会显示合法值供您选择。对于数值输入，您可以使用向上和向下箭头将值增加1，而不必重新输入单位。

与实时编辑HTML一样，您可以使用Ctrl + Z和Ctrl + Y撤消或重做您的实时CSS更改。

使用DevTools，我能够很容易地找出CSS规则的组合，这些规则将我的伪复选框与我想要的对齐。这个过程涉及到一些试验和错误，但实时编辑使迭代周期非常短，这对于像我这样的CSS新手来说特别有用。

结论我们只是抓住了Chrome DevTools的实时编辑功能的能力，尤其是在CSS域。当我去调试一个CSS问题或快速原型化一个新的CSS变化时，这些基本技巧对我来说始终是非常宝贵的。