iH5：H5最新資源大合集！

年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。

果動圖

做前端不會寫滑動側邊欄???NO

web前端基礎課題：HTML5商務垂直滑動側邊欄

知識點：盒子模型與css樣式,CSS3選擇器、CSS3偽元素畫三角形，

DIV+CSS布局基礎，html性能優化與布局精解，

jQuery插件使用指南，企業需求分析等

對于企業網站來說，一個滑動側邊欄的設定一般來說是都會有的，思路其實很簡單，而且javascript代碼也只要幾行，本次我們使用的是Jquery，雖然簡單，但是現在應該很多學習者還是很難動手寫出這個功能，但是前端學習并不是把代碼，標簽記住就行了，而是根據需求能做出相應的產品，所以希望大家能多動手，而不是紙上談兵。

HTML/CSS代碼里附加詳細的注解

點擊查看源碼動圖

頭條號里有很多企業求職必備的案例的視頻/源碼/項目，歡迎大家關注！

如果需要下載視頻或者文檔版的源碼可以加我的前端學習群470593776大家一起交流學習提升！

片尾互動：你真的是喜歡前端嗎？還是為了高薪~

mail 類型用于郵件地址的輸入，很明顯，它只適用于郵箱輸入。

使用格式如下：

<input type="email" />

如果你輸入的郵箱格式不正確，會提醒你格式錯誤。

url 類型是專門用來輸入網址的。

使用格式如下：

<input type="url" />

也同樣會校驗網址格式是否合法。

number 類型用于數字的輸入，number 類型表單有以下屬性：

屬性	描述
max	輸入框允許的最大值。
min	輸入框允許的最小值。
step	合法的數字間隔，例如 step=2，則合法為：2、4、6、8。
value	默認值。

例如：設置默認值為 5，步長為 2，每點 ?? 一次，數字 + 2。

<input type="number" value="5" step="2" />

range 類型用于包含一定范圍內數值的輸入。與number不同的是，range顯示為進度條。

其使用格式為：

<input type="range" />

六種常用的日期選擇類型：

date
month
week
time
datetime
datetime-local

統稱為 Date pickers：

類型	描述
date	選取年、月、日
month	選取年、月
week	選取年、周
time	選取時間小時、分鐘
datetime	選取年、月、日和 UTC 時間
datetime-local	選取年、月、日和本地時間

例如，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      date： <input type="date" /> <br />
      datetime-local：<input type="datetime-local" /> <br />
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

顯示效果如下：

search 類型的 input 標簽提供用于輸入搜索關鍵字的文本框，從外觀看 search 和 text 是一樣的，功能也是相近的可以輸入任意的字符串。

使用格式如下：

<input type="search" />

不能從外觀和功能上能發現 search 類型和 text 類型的區別。那么我們為何還要學 search 類型呢？

如果使用不同的瀏覽器去看，就會發現有細微的差異，比如 Chrome 瀏覽器給 search 類型的輸入框提供了清空按鈕。如果在移動端的話，虛擬鍵盤會根據不同類型的輸入框給出不同的反應。還有就是起到語義化的作用，我們一眼能夠明白這里的 input 是起到搜索的效果。

tel 類型是 input 標簽專門用來輸入電話號碼的文本框，它并不僅局限輸入數字，還可以輸入一些其他的字符，例如：- +（）等。

語法格式如下：

<input type="tel" />

datalist 標簽，為輸入框提供一個可選擇的數據列表。在具有自動提示功能的文本框中可以使用這些選擇項來自動補全文本框。該標簽由 datalist 和 option 標簽組合應用。

一個 datalist 標簽中可以包含多個 option 標簽。他們的關系和表單元素 select 和 option 的關系一樣。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    你最愛的水果：
    <input list="fruits" id="fruit" name="fruit" />

    <datalist id="fruits">
      <option value="蘋果"></option>
      <option value="李子"></option>
      <option value="蘋果"></option>
      <option value="西瓜"></option>
      <option value="櫻桃"></option>
    </datalist>
  </body>
</html>

顯示為，下拉菜單為提示框

HTML5 新增的 output 元素用于在瀏覽器中顯示計算結果或者腳本輸出，輸出的結果在標簽之間顯示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form oninput="r.value=parseInt(num1.value)+parseInt(num2.value)">
      <!--定義了兩個 number 類型的輸入框，其默認值為 100-->
      <input type="number" id="num1" value="100" />
      +
      <input type="number" id="num2" value="100" />=<!--for 屬性可以綁定對應 id 名的表單元素-->
      <output name="r" for="num1 num2"></output>
    </form>
  </body>
</html>

在上面代碼中，有 oninput="r.value=parseInt(num1.value)+parseInt(num2.value)"，我們使用 oninput 來及時獲取輸入框中改變后的值。在等號右側，使用 parseInt 是把輸入框中的值按照整型來解析。

關于 form 標簽中的 oninput 屬性是當元素獲得輸入時被觸發，其中 parseInt 是 JavaScript 中解析整數的函數，這里只要知道它所起的作用就好，不需要去深究。

顯示為，202就是output顯示的

在線咨詢

上一篇：Python數據分析實戰-爬取某個關鍵詞搜索的最新5
下一篇：類原生系統exTHmUI安裝刷入教程：可能是本地化最

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

iH5：H5最新資源大合集！

做前端不會寫滑動側邊欄???NO

web前端基礎課題：HTML5商務垂直滑動側邊欄

您的項目需求