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

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

【行業新知類】

HTML和CSS入門

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

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

響應式網站設計基礎

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

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

站酷網文章

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

各種設計相關的案例制作教程與創作經驗，設計師每日閑逛學習必備。

UI中國文章

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

各種網頁設計相關的制作教程與創作經驗，交互設計師每日閑逛必備。

眾成翻譯

http://www.zcfy.cc/

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

Smashing Magazine [英文]

https://www.smashingmagazine.com/

世界一流的設計博客，包含各種網頁設計相關的創作經驗、行業資訊——做網頁設計的，估計沒聽過它的名字也買過它的書？

【H5廣告類】

數英網

http://www.digitaling.com

數字廣告資訊，包括廣告案例收集、創作經驗分享、案例下載等服務——H5案例豐富。

H5案例分享

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

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

iH5互動大師

http://www.ih5.cn/

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

哇呸網

http://thewap.cn/

國內行業H5優質廣告合集（移動為主），分類齊全。

H5doo

http://www.h5doo.com/

國內行業H5優質廣告合集（移動為主），優勢在于移動版可以直接點擊預覽，不需掃碼——PC端可以用開發者工具打開實現移動效果。

Sizmek

http://showcase.sizmek.com/

世界行業優質Web廣告的合集（PC端為主），分為HTML5和Flash等類別，對于網頁嵌入廣告的樣式參考很有幫助。

【H5網站&特效篇】

PIXID

https://www.iiiimg.com/

世界HTML5優秀網站合集（PC端為主），尤其是日系風格的網站，經常看會發現很多寶藏。

Codepen [英文]

http://codepen.io/

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

HTML5SHOWCASE [英文]

http://html5-showcase.com/

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

Codrops [英文]

https://tympanus.net/codrops/

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

SiteInspire [英文]

https://www.siteinspire.com/

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

TRESENSA [英文]

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

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

【Web設計&開發篇】

優秀網頁設計聯盟

http://www.uisdc.com/

各種網頁設計相關的資源、教程和經驗，網頁設計師必備。

Media Queries

http://mediaqueri.es.

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

ISUX

https://isux.tencent.com/

騰訊ISUX（社交用戶體驗設計）團隊，包含各種網頁設計、Web開發的解決方法、用戶體驗優化技巧，以HTML5網頁、APP應用為主。

設計達人

http://www.shejidaren.com/

集大成者的設計博客，包含網頁設計、產品設計、交互設計、前端開發等信息——涉獵較廣，富含各種新鮮知識。

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

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

谷歌Web開發設計規范，從響應式設計、用戶體驗、輸入框、動畫等方面說明HTML5網頁開發的最佳解決方案。

Material design 中文版

https://material.io/guidelines/

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

Mobile Design Inspiration [英文]

http://inspirationmobile.tumblr.com/

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

SimilarWeb [英文]

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

世界頂尖網站排名，可以按類別、國別查看，參考行業頂尖網站設計非常實用。

【實用云端工具篇】

搜百度盤

http://www.sobaidupan.com/

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

iH5互動大師

http://www.ih5.cn

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

Befunky

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

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

百度腦圖

http://naotu.baidu.com/

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

BROWSER SHOTS [英文]

http://browsershots.org/

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

Can I use [英文]

http://caniuse.com/

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

智圖

http://zhitu.isux.us/

圖片壓縮、提高網頁性能必備，相比業內知名的Tinypng的好處是可以實時預覽不同圖片質量的差別。

【資源下載篇】

365psd

http://cn.365psd.com/

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

繪藝素材

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

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

愛思資源

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

各種HTML、CSS、Javas cript相關的書籍下載。

jQuery之家

http://www.htmleaf.com/

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

jQuery插件庫

http://www.jq22.com/

各種網頁特效實例（以jQurey為主）預覽和源碼下載——經常更新，還附帶一定講解。

Emojipedia [英文]

http://emojipedia.org/

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

Freebiesbug [英文]

http://freebiesbug.com/

各種免費的網頁設計資源下載，非常齊全。

Freepik [英文]

http://freepik.com/

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

PSDDD [英文]

http://www.psddd.co/

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

Material System ICONS [英文]

https://material.io/icons/

谷歌Material Design圖標大全，原質化設計需要ICON必備。

UI-Cloud [英文]

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

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

當你以為你很了解設計的時候，

可能正是發現你自己一無所知的時候。

【作者說明】

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

在HTML5得到了廣泛的應用不管是在微信還是在app中，特別是在微信開發中通常會遇到要實現音頻或者視頻的播放功能，如背景音樂，視頻介紹等。如何實現自動播放功能呢？純的H5頁面在手機端中是無法實現自動播放的，移動端瀏覽器大部分是禁用video和audio的autoplay功能而且很多移動瀏覽器也不支持首次js調用play方法進行播放，只有用戶手動點擊了播放后暫停，然后用代碼進行play就可以。這樣做主要是為了防止一些不必要的自動播放浪費流量。

下面的代碼是實現用戶第一次觸摸后實現的播放和微信app下的自動播放：

function autoPlay() {

/* 自動播放效果，解決瀏覽器或者APP自動播放問題 */

function browserHandler() {

startPlay(true);

document.body.removeEventListener('touchstart', browserHandler);

}

document.body.addEventListener('touchstart', browserHandler);

/* 自動播放效果，解決微信自動播放問題 */

function weixinHandler() {

startPlay(true);

document.addEventListener("WeixinJSBridgeReady", function () {

startPlay(true);

}, false);

document.removeEventListener('DOMContentLoaded', weixinHandler);

}

document.addEventListener('DOMContentLoaded', weixinHandler);

}

不知道大家有沒有和小編一樣，在微信朋友圈中，我們常常可以看到各種制作精美的電子邀請函、企業招聘廣告、時尚的電子海報、趣味測試或是抽獎紅包等營銷活動。這些移動端營銷內容畫質精良、體驗流暢，還支持播放音樂、小視頻等多媒體素材。那么，這些看上去很炫酷的內容是怎樣制作出來的呢？

在這里，小編先給大家科普一下知識。簡單版：HTML5是萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。那么我們大家口中常說的H5跟這個是一個概念嗎？敲黑板！記住可以裝逼，別說我沒告訴你。

HTML5有以下特性：（1）語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。

（2）本地存儲特性（Class: OFFLINE & STORAGE）

基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。

（3）設備兼容特性 (Class: DEVICE ACCESS)

從Geolocation功能的API文檔公開以來，HTML5為網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。

（4）連接特性（Class: CONNECTIVITY）

（5）網頁多媒體特性(Class: MULTIMEDIA)

（6）三維、圖形及特效特性（Class: 3D, Graphics & Effects）

（7）性能與集成特性（Class: Performance & Integration）

（8）CSS3特性(Class: CSS3)

因為篇幅限制，小編只好不過多闡述。

那么H5又是什么？

HyperText Mark-up Language 5.0 → HTML5 → H5 但是，H5已經成為微信HTML5網頁的專有名詞。H5特指基于HTML5技術的交互網頁應用。對了，我們公司的程序猿說直接敲代碼不就行了。可以實現自己想要的效果是多么美妙的感覺啊。。。。。

好了，小編直接奉上干貨：

1、易企秀（eqxiu.com/home） 2、Maka（maka.im） 3、人人秀（rrxiu.net） 4、凡科微傳單（wcd.im） 5、兔展（rabbitpre.com） 6、iH5 (ih5.cn/） 7、we+（weplus.me/） 8、70C （70c.com/） 9、云來（http://www.liveapp.cn/） 10、BlueMP （www.bluemp.cn）