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如果協調的好，就會為您減輕部分工作壓力，且能節省更多的精力。工具的好壞取決于您怎么去使用/去看待的，希望此篇文章能給您有所本幫！