于企業(yè)或個人來說，原創(chuàng)制作一個網(wǎng)站需要很多時間，先用 Photoshop 做網(wǎng)頁設(shè)計，接著用 DIV+CSS 來寫編寫HTML代碼，最后可能還要程序開發(fā)才能完成，不僅花費時間長，成本也是比較昂貴的。

如果你缺少設(shè)計或前端技能，但又想快速完成一個網(wǎng)站，那么我們建議你直接選擇網(wǎng)站模板，比如靜態(tài)類的 HTML/CSS 網(wǎng)站模板，使用他們可以省下設(shè)計、前端這個階段的工作，而程序開發(fā)是可選的，只有需要后臺才需要程序編寫，不需要的話也可以直接替換模板的文字、圖片就行。

今天我們整理了一些優(yōu)秀免費無版權(quán)限制的 HTML5 網(wǎng)站模板，有不同的類型，比如作品展示用的模板適合攝影師、設(shè)計師、企業(yè)產(chǎn)品展示等。

注：小編已經(jīng)打包好，下載模板地址在文章底部哦！！

New Age

這款是 APP 產(chǎn)品宣傳官網(wǎng)模板，現(xiàn)在有很多 APP 程序員自己開發(fā)了一些有趣 APPs，但是不懂設(shè)計或沒時間來制作網(wǎng)站，那么這款模板就可以用上啦，使用Bootstrap 框架搭建，手機端完全兼容。

在線演示

Howdy（個人簡歷式網(wǎng)頁模板）

想做一份創(chuàng)意個人簡歷嗎？請不要錯過 Howdy 這款個人簡歷模板，設(shè)計、動畫、實用性全有了！設(shè)計達人網(wǎng)小編推薦哦！

同時推薦：22款高端個人簡歷模板 含PSD或HTML版本下載

還有技術(shù)展示數(shù)據(jù)表，增加簡歷描述的可視化，HR 看后一定會加分哦。

在線演示暫無，請下載源文件查看 DEMO ~~（建議下載查看，動畫好帥）

Ethereal

Ethereal 模板有意思，是直接向左右滾動來查看網(wǎng)頁，界面也的設(shè)計也很棒，喜歡個性獨特風格的朋友不要錯過。

在線演示

Creative

一個工作室類的單網(wǎng)頁模板，有了個，就算你是個人，也可以用他來做個工作室一樣的網(wǎng)站，用于宣傳你的業(yè)務(wù)也是不錯的。

在線演示

Megakit

這個免費模板可以說是超值哦，一共13種類型頁面，每個頁面設(shè)計都不簡單哦，頁面有 Service，About, Team, Events, FAQ, Contacts, Corporate, App Landing, Portfolio, Coming Soon等等，建議下載下來看 DEMO。

在線演示

Story

Story是一款左右布局為主的列表展示頁以及作品展示 ，適用于作品介紹。

同時還支援當前頁面彈窗來展示作品圖片，很適合用來放自己的作品上去。

在線演示

Agency

在線演示

Karmo

超時尚的 Protfolio 網(wǎng)頁模板，Bootstrap 模板構(gòu)建，布局新穎，再加上流暢的動畫效果，Nice！

有4個主要頁面，分別是：Home / Services / SingleProject / Contact.

免費有這樣的質(zhì)量，真的超值哦！

在線演示

KapukAlas

響應(yīng)式模板 KapukAlas，首頁效果不錯，但目前只有首頁，如果有子頁面就更好了！

在線演示 (HTML演示請下載源文件方可查看）

AitOnepage

這款主師來自 keenthemes 出品，質(zhì)量很棒，流行的單頁面設(shè)計，布局有 Aabout,Products, Pricing, Work, Service 和 Contact頁面。

在線演示

Magnet

想展示作品集，并且喜歡簡約設(shè)計感？嘿嘿~ 這個經(jīng)典簡約模板是不二之先啊。

在線演示

頭條不給放網(wǎng)盤地址，需要下載的的，私信我！

年H5學(xué)習寶典——網(wǎng)頁設(shè)計師必備，平面設(shè)計轉(zhuǎn)型的人好好學(xué)習、天天向上的好去處。來不及看可以先分享以便保存，隨時隨地瞄一眼，發(fā)現(xiàn)原來還有這么多東西可以學(xué)，絕對是一針能讓我們復(fù)活的雞血~

注：以下網(wǎng)站合集和市面各種200+個工具的不負責任羅列不一樣，每個網(wǎng)站都是筆者親測實用非常有必要學(xué)習/使用的。

【行業(yè)新知類】

HTML和CSS入門

https://cn.udacity.com/course/intro-to-html-and-css--ud304/

谷歌在Udecity開設(shè)的中文視頻課程，設(shè)計師培養(yǎng)Web開發(fā)思維/前端入門必備！現(xiàn)在設(shè)計師不學(xué)點網(wǎng)頁知識，大概會被時代拋棄的吧？和國內(nèi)很多按部就班的慕課不同，谷歌的課程設(shè)計靈活——集中精力一天就能知道個大概。

響應(yīng)式網(wǎng)站設(shè)計基礎(chǔ)

https://cn.udacity.com/course/responsive-web-design-fundamentals--ud893/

谷歌在Udecity開設(shè)的中文視頻課程，響應(yīng)式設(shè)計入門與進階必備（需先了解《HTML和CSS入門》）——如果你足夠聰明，一下午就能學(xué)完。

站酷網(wǎng)文章

http://www.zcool.com.cn/articles/

各種設(shè)計相關(guān)的案例制作教程與創(chuàng)作經(jīng)驗，設(shè)計師每日閑逛學(xué)習必備。

UI中國文章

http://www.ui.cn/exp.html

各種網(wǎng)頁設(shè)計相關(guān)的制作教程與創(chuàng)作經(jīng)驗，交互設(shè)計師每日閑逛必備。

眾成翻譯

http://www.zcfy.cc/

實時收錄并翻譯國外各種前沿的Web開發(fā)知識，Web設(shè)計師&開發(fā)者與時俱進的好去處——因為有很多作者是自發(fā)翻譯的，行業(yè)資訊更新速度極快，而且內(nèi)容優(yōu)質(zhì)。

Smashing Magazine [英文]

https://www.smashingmagazine.com/

世界一流的設(shè)計博客，包含各種網(wǎng)頁設(shè)計相關(guān)的創(chuàng)作經(jīng)驗、行業(yè)資訊——做網(wǎng)頁設(shè)計的，估計沒聽過它的名字也買過它的書？

【H5廣告類】

數(shù)英網(wǎng)

http://www.digitaling.com

數(shù)字廣告資訊，包括廣告案例收集、創(chuàng)作經(jīng)驗分享、案例下載等服務(wù)——H5案例豐富。

H5案例分享

http://www.h5-share.com/

國內(nèi)行業(yè)H5精品案例的合集（移動廣告為主），包括預(yù)覽、說明與技術(shù)講解，更新及時——移動端比較方便。

iH5互動大師

http://www.ih5.cn/

使用iH5制作的精品案例合集（移動廣告為主），網(wǎng)站包含H5頁面制作工具、案例教學(xué)、在線咨詢等服務(wù)。

哇呸網(wǎng)

http://thewap.cn/

國內(nèi)行業(yè)H5優(yōu)質(zhì)廣告合集（移動為主），分類齊全。

H5doo

http://www.h5doo.com/

國內(nèi)行業(yè)H5優(yōu)質(zhì)廣告合集（移動為主），優(yōu)勢在于移動版可以直接點擊預(yù)覽，不需掃碼——PC端可以用開發(fā)者工具打開實現(xiàn)移動效果。

Sizmek

http://showcase.sizmek.com/

世界行業(yè)優(yōu)質(zhì)Web廣告的合集（PC端為主），分為HTML5和Flash等類別，對于網(wǎng)頁嵌入廣告的樣式參考很有幫助。

【H5網(wǎng)站&特效篇】

PIXID

https://www.iiiimg.com/

世界HTML5優(yōu)秀網(wǎng)站合集（PC端為主），尤其是日系風格的網(wǎng)站，經(jīng)常看會發(fā)現(xiàn)很多寶藏。

Codepen [英文]

http://codepen.io/

各種拽酷炫狂的網(wǎng)頁特效實例與源碼，勾搭世界一流網(wǎng)頁設(shè)計師和開發(fā)者的寶地——見識一下，絕不會后悔。

HTML5SHOWCASE [英文]

http://html5-showcase.com/

世界HTML5優(yōu)秀網(wǎng)站合集（PC端為主），分類齊全，尤其是Web應(yīng)用——如果你還不知道PWA（漸進式應(yīng)用）這個最近這么火的概念，可以先去pwa.rocks逛逛。

Codrops [英文]

https://tympanus.net/codrops/

各種網(wǎng)頁特效實例（以PC端為主）、免費設(shè)計素材，設(shè)計師的創(chuàng)作靈感、程序員的動效參考——更新有點慢，但篇篇精華。

SiteInspire [英文]

https://www.siteinspire.com/

世界HTML5優(yōu)秀網(wǎng)站合集（PC端為主），收錄很多視覺效果不錯的網(wǎng)站，更新及時。

TRESENSA [英文]

http://www.tresensa.com/games/

世界HTML5精品游戲合集，可以在線試玩，H5游戲創(chuàng)作的靈感來源。

【W(wǎng)eb設(shè)計&開發(fā)篇】

優(yōu)秀網(wǎng)頁設(shè)計聯(lián)盟

http://www.uisdc.com/

各種網(wǎng)頁設(shè)計相關(guān)的資源、教程和經(jīng)驗，網(wǎng)頁設(shè)計師必備。

Media Queries

http://mediaqueri.es.

現(xiàn)在你還沒聽說過屏幕自適應(yīng)的網(wǎng)頁設(shè)計概念，可能落后別人一大截了……這個網(wǎng)站有各種使用Media Queries（媒體查詢，HTML5相關(guān)方法）的響應(yīng)式設(shè)計網(wǎng)站，有在不同屏幕下的對比圖，可以觀察網(wǎng)站自適應(yīng)屏幕的斷點，非常好用。

ISUX

https://isux.tencent.com/

騰訊ISUX（社交用戶體驗設(shè)計）團隊，包含各種網(wǎng)頁設(shè)計、Web開發(fā)的解決方法、用戶體驗優(yōu)化技巧，以HTML5網(wǎng)頁、APP應(yīng)用為主。

設(shè)計達人

http://www.shejidaren.com/

集大成者的設(shè)計博客，包含網(wǎng)頁設(shè)計、產(chǎn)品設(shè)計、交互設(shè)計、前端開發(fā)等信息——涉獵較廣，富含各種新鮮知識。

Web基本原則--設(shè)計&界面 [中英混合]

https://developers.google.cn/web/fundamentals/design-and-ui/

谷歌Web開發(fā)設(shè)計規(guī)范，從響應(yīng)式設(shè)計、用戶體驗、輸入框、動畫等方面說明HTML5網(wǎng)頁開發(fā)的最佳解決方案。

Material design 中文版

https://material.io/guidelines/

谷歌Material設(shè)計規(guī)范，設(shè)計師必看！從動效、樣式、布局等多個方面定義了世界一流的Web跨平臺設(shè)計方案——原質(zhì)化設(shè)計。

Mobile Design Inspiration [英文]

http://inspirationmobile.tumblr.com/

iPhone、Android、iPad等移動網(wǎng)頁設(shè)計實例，很多網(wǎng)頁動效設(shè)計值得參考——由于收錄于tumblr網(wǎng)站，查看需翻~墻。

SimilarWeb [英文]

https://www.similarweb.com/top-websites

世界頂尖網(wǎng)站排名，可以按類別、國別查看，參考行業(yè)頂尖網(wǎng)站設(shè)計非常實用。

【實用云端工具篇】

搜百度盤

http://www.sobaidupan.com/

按格式（doc、pdf、mp4等）一鍵搜索各種百度云盤資源！缺點是熱門資源需要多試幾次，因為可能點進去后發(fā)現(xiàn)被刪——搜書、視頻、軟件什么的，非常有用。

iH5互動大師

http://www.ih5.cn

H5網(wǎng)頁可視化制作的專業(yè)工具，功能、性能和用戶體驗上秒殺各大國產(chǎn)甚至國外的工具，用于微信廣告、HTML5網(wǎng)頁制作、小游戲、小程序制作等。

Befunky

https://www.befunky.com/create/

快速編輯、導(dǎo)出圖片的在線工具，分為編輯器、照片拼貼、設(shè)計師三種模式，支持剪裁、系統(tǒng)字體、濾鏡等功能，網(wǎng)頁設(shè)計師偷懶、設(shè)計小白裝逼必備……

百度腦圖

http://naotu.baidu.com/

思維導(dǎo)圖在線制作工具，可導(dǎo)出成圖片——做思維導(dǎo)圖的很多，其實一個就夠了。

BROWSER SHOTS [英文]

http://browsershots.org/

一鍵對比網(wǎng)站在近百個瀏覽器的顯示效果，可以自定義屏幕大小、系統(tǒng)類別、顏色顯示、是否支持Flash等性能，H5網(wǎng)頁測試必備。

Can I use [英文]

http://caniuse.com/

一鍵測試各大瀏覽器具體性能上對HTML5的支持，Web開發(fā)必備。

智圖

http://zhitu.isux.us/

圖片壓縮、提高網(wǎng)頁性能必備，相比業(yè)內(nèi)知名的Tinypng的好處是可以實時預(yù)覽不同圖片質(zhì)量的差別。

【資源下載篇】

365psd

http://cn.365psd.com/

各種免費、付費PSD、矢量圖資源下載。

繪藝素材

http://www.huiyi8.com/yinxiao/

各種各樣的音效試聽與下載，用來為H5頁面動態(tài)變化聽覺上增色必備。

愛思資源

http://www.aseoe.com/webook/

各種HTML、CSS、Javas cript相關(guān)的書籍下載。

jQuery之家

http://www.htmleaf.com/

各種jQuery、HTML5、CSS3的插件庫下載，分門別類，可供網(wǎng)頁設(shè)計師參考動效設(shè)計或使用源碼。

jQuery插件庫

http://www.jq22.com/

各種網(wǎng)頁特效實例（以jQurey為主）預(yù)覽和源碼下載——經(jīng)常更新，還附帶一定講解。

Emojipedia [英文]

http://emojipedia.org/

高清圖標大全，分不同設(shè)備顯示的各種Emoji表情，支持打包下載。

Freebiesbug [英文]

http://freebiesbug.com/

各種免費的網(wǎng)頁設(shè)計資源下載，非常齊全。

Freepik [英文]

http://freepik.com/

各種免費PSD、矢量圖資源。

PSDDD [英文]

http://www.psddd.co/

各種免費圖標、設(shè)備、元素的設(shè)計資源。

Material System ICONS [英文]

https://material.io/icons/

谷歌Material Design圖標大全，原質(zhì)化設(shè)計需要ICON必備。

UI-Cloud [英文]

http://ui-cloud.com/browse/

各種UI源文件下載——更新比較慢，不過資源都是精品。

當你以為你很了解設(shè)計的時候，

可能正是發(fā)現(xiàn)你自己一無所知的時候。

【作者說明】

iH5_cn良心出品，轉(zhuǎn)載請注明來源：H5頁面制作工具iH5.cn，或ih5_cn。