整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
年H5學(xué)習(xí)寶典——網(wǎng)頁設(shè)計(jì)師必備，平面設(shè)計(jì)轉(zhuǎn)型的人好好學(xué)習(xí)、天天向上的好去處。來不及看可以先分享以便保存，隨時(shí)隨地瞄一眼，發(fā)現(xiàn)原來還有這么多東西可以學(xué)，絕對(duì)是一針能讓我們復(fù)活的雞血~
注：以下網(wǎng)站合集和市面各種200+個(gè)工具的不負(fù)責(zé)任羅列不一樣，每個(gè)網(wǎng)站都是筆者親測(cè)實(shí)用非常有必要學(xué)習(xí)/使用的。
【行業(yè)新知類】
HTML和CSS入門
https://cn.udacity.com/course/intro-to-html-and-css--ud304/
谷歌在Udecity開設(shè)的中文視頻課程，設(shè)計(jì)師培養(yǎng)Web開發(fā)思維/前端入門必備！現(xiàn)在設(shè)計(jì)師不學(xué)點(diǎn)網(wǎng)頁知識(shí)，大概會(huì)被時(shí)代拋棄的吧？和國內(nèi)很多按部就班的慕課不同，谷歌的課程設(shè)計(jì)靈活——集中精力一天就能知道個(gè)大概。
響應(yīng)式網(wǎng)站設(shè)計(jì)基礎(chǔ)
https://cn.udacity.com/course/responsive-web-design-fundamentals--ud893/
谷歌在Udecity開設(shè)的中文視頻課程，響應(yīng)式設(shè)計(jì)入門與進(jìn)階必備（需先了解《HTML和CSS入門》）——如果你足夠聰明，一下午就能學(xué)完。
站酷網(wǎng)文章
http://www.zcool.com.cn/articles/
各種設(shè)計(jì)相關(guān)的案例制作教程與創(chuàng)作經(jīng)驗(yàn)，設(shè)計(jì)師每日閑逛學(xué)習(xí)必備。
UI中國文章
http://www.ui.cn/exp.html
各種網(wǎng)頁設(shè)計(jì)相關(guān)的制作教程與創(chuàng)作經(jīng)驗(yàn)，交互設(shè)計(jì)師每日閑逛必備。
眾成翻譯
http://www.zcfy.cc/
實(shí)時(shí)收錄并翻譯國外各種前沿的Web開發(fā)知識(shí)，Web設(shè)計(jì)師&開發(fā)者與時(shí)俱進(jìn)的好去處——因?yàn)橛泻芏嘧髡呤亲园l(fā)翻譯的，行業(yè)資訊更新速度極快，而且內(nèi)容優(yōu)質(zhì)。
Smashing Magazine [英文]
https://www.smashingmagazine.com/
世界一流的設(shè)計(jì)博客，包含各種網(wǎng)頁設(shè)計(jì)相關(guān)的創(chuàng)作經(jīng)驗(yàn)、行業(yè)資訊——做網(wǎng)頁設(shè)計(jì)的，估計(jì)沒聽過它的名字也買過它的書？
【H5廣告類】
數(shù)英網(wǎng)
http://www.digitaling.com
數(shù)字廣告資訊，包括廣告案例收集、創(chuàng)作經(jīng)驗(yàn)分享、案例下載等服務(wù)——H5案例豐富。
H5案例分享
http://www.h5-share.com/
國內(nèi)行業(yè)H5精品案例的合集（移動(dòng)廣告為主），包括預(yù)覽、說明與技術(shù)講解，更新及時(shí)——移動(dòng)端比較方便。
iH5互動(dòng)大師
http://www.ih5.cn/
使用iH5制作的精品案例合集（移動(dòng)廣告為主），網(wǎng)站包含H5頁面制作工具、案例教學(xué)、在線咨詢等服務(wù)。
哇呸網(wǎng)
http://thewap.cn/
國內(nèi)行業(yè)H5優(yōu)質(zhì)廣告合集（移動(dòng)為主），分類齊全。
H5doo
http://www.h5doo.com/
國內(nèi)行業(yè)H5優(yōu)質(zhì)廣告合集（移動(dòng)為主），優(yōu)勢(shì)在于移動(dòng)版可以直接點(diǎn)擊預(yù)覽，不需掃碼——PC端可以用開發(fā)者工具打開實(shí)現(xiàn)移動(dòng)效果。
Sizmek
http://showcase.sizmek.com/
世界行業(yè)優(yōu)質(zhì)Web廣告的合集（PC端為主），分為HTML5和Flash等類別，對(duì)于網(wǎng)頁嵌入廣告的樣式參考很有幫助。
【H5網(wǎng)站&特效篇】
PIXID
https://www.iiiimg.com/
世界HTML5優(yōu)秀網(wǎng)站合集（PC端為主），尤其是日系風(fēng)格的網(wǎng)站，經(jīng)常看會(huì)發(fā)現(xiàn)很多寶藏。
Codepen [英文]
http://codepen.io/
各種拽酷炫狂的網(wǎng)頁特效實(shí)例與源碼，勾搭世界一流網(wǎng)頁設(shè)計(jì)師和開發(fā)者的寶地——見識(shí)一下，絕不會(huì)后悔。
HTML5SHOWCASE [英文]
http://html5-showcase.com/
世界HTML5優(yōu)秀網(wǎng)站合集（PC端為主），分類齊全，尤其是Web應(yīng)用——如果你還不知道PWA（漸進(jìn)式應(yīng)用）這個(gè)最近這么火的概念，可以先去pwa.rocks逛逛。
Codrops [英文]
https://tympanus.net/codrops/
各種網(wǎng)頁特效實(shí)例（以PC端為主）、免費(fèi)設(shè)計(jì)素材，設(shè)計(jì)師的創(chuàng)作靈感、程序員的動(dòng)效參考——更新有點(diǎn)慢，但篇篇精華。
SiteInspire [英文]
https://www.siteinspire.com/
世界HTML5優(yōu)秀網(wǎng)站合集（PC端為主），收錄很多視覺效果不錯(cuò)的網(wǎng)站，更新及時(shí)。
TRESENSA [英文]
http://www.tresensa.com/games/
世界HTML5精品游戲合集，可以在線試玩，H5游戲創(chuàng)作的靈感來源。
【W(wǎng)eb設(shè)計(jì)&開發(fā)篇】
優(yōu)秀網(wǎng)頁設(shè)計(jì)聯(lián)盟
http://www.uisdc.com/
各種網(wǎng)頁設(shè)計(jì)相關(guān)的資源、教程和經(jīng)驗(yàn)，網(wǎng)頁設(shè)計(jì)師必備。
Media Queries
http://mediaqueri.es.
現(xiàn)在你還沒聽說過屏幕自適應(yīng)的網(wǎng)頁設(shè)計(jì)概念，可能落后別人一大截了……這個(gè)網(wǎng)站有各種使用Media Queries（媒體查詢，HTML5相關(guān)方法）的響應(yīng)式設(shè)計(jì)網(wǎng)站，有在不同屏幕下的對(duì)比圖，可以觀察網(wǎng)站自適應(yīng)屏幕的斷點(diǎn)，非常好用。
ISUX
https://isux.tencent.com/
騰訊ISUX（社交用戶體驗(yàn)設(shè)計(jì)）團(tuán)隊(duì)，包含各種網(wǎng)頁設(shè)計(jì)、Web開發(fā)的解決方法、用戶體驗(yàn)優(yōu)化技巧，以HTML5網(wǎng)頁、APP應(yīng)用為主。
設(shè)計(jì)達(dá)人
http://www.shejidaren.com/
集大成者的設(shè)計(jì)博客，包含網(wǎng)頁設(shè)計(jì)、產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)、前端開發(fā)等信息——涉獵較廣，富含各種新鮮知識(shí)。
Web基本原則--設(shè)計(jì)&界面 [中英混合]
https://developers.google.cn/web/fundamentals/design-and-ui/
谷歌Web開發(fā)設(shè)計(jì)規(guī)范，從響應(yīng)式設(shè)計(jì)、用戶體驗(yàn)、輸入框、動(dòng)畫等方面說明HTML5網(wǎng)頁開發(fā)的最佳解決方案。
Material design 中文版
https://material.io/guidelines/
谷歌Material設(shè)計(jì)規(guī)范，設(shè)計(jì)師必看！從動(dòng)效、樣式、布局等多個(gè)方面定義了世界一流的Web跨平臺(tái)設(shè)計(jì)方案——原質(zhì)化設(shè)計(jì)。
Mobile Design Inspiration [英文]
http://inspirationmobile.tumblr.com/
iPhone、Android、iPad等移動(dòng)網(wǎng)頁設(shè)計(jì)實(shí)例，很多網(wǎng)頁動(dòng)效設(shè)計(jì)值得參考——由于收錄于tumblr網(wǎng)站，查看需翻~墻。
SimilarWeb [英文]
https://www.similarweb.com/top-websites
世界頂尖網(wǎng)站排名，可以按類別、國別查看，參考行業(yè)頂尖網(wǎng)站設(shè)計(jì)非常實(shí)用。
【實(shí)用云端工具篇】
搜百度盤
http://www.sobaidupan.com/
按格式（doc、pdf、mp4等）一鍵搜索各種百度云盤資源！缺點(diǎn)是熱門資源需要多試幾次，因?yàn)榭赡茳c(diǎn)進(jìn)去后發(fā)現(xiàn)被刪——搜書、視頻、軟件什么的，非常有用。
iH5互動(dòng)大師
http://www.ih5.cn
H5網(wǎng)頁可視化制作的專業(yè)工具，功能、性能和用戶體驗(yàn)上秒殺各大國產(chǎn)甚至國外的工具，用于微信廣告、HTML5網(wǎng)頁制作、小游戲、小程序制作等。
Befunky
https://www.befunky.com/create/
快速編輯、導(dǎo)出圖片的在線工具，分為編輯器、照片拼貼、設(shè)計(jì)師三種模式，支持剪裁、系統(tǒng)字體、濾鏡等功能，網(wǎng)頁設(shè)計(jì)師偷懶、設(shè)計(jì)小白裝逼必備……
百度腦圖
http://naotu.baidu.com/
思維導(dǎo)圖在線制作工具，可導(dǎo)出成圖片——做思維導(dǎo)圖的很多，其實(shí)一個(gè)就夠了。
BROWSER SHOTS [英文]
http://browsershots.org/
一鍵對(duì)比網(wǎng)站在近百個(gè)瀏覽器的顯示效果，可以自定義屏幕大小、系統(tǒng)類別、顏色顯示、是否支持Flash等性能，H5網(wǎng)頁測(cè)試必備。
Can I use [英文]
http://caniuse.com/
一鍵測(cè)試各大瀏覽器具體性能上對(duì)HTML5的支持，Web開發(fā)必備。
智圖
http://zhitu.isux.us/
圖片壓縮、提高網(wǎng)頁性能必備，相比業(yè)內(nèi)知名的Tinypng的好處是可以實(shí)時(shí)預(yù)覽不同圖片質(zhì)量的差別。
【資源下載篇】
365psd
http://cn.365psd.com/
各種免費(fèi)、付費(fèi)PSD、矢量圖資源下載。
繪藝素材
http://www.huiyi8.com/yinxiao/
各種各樣的音效試聽與下載，用來為H5頁面動(dòng)態(tài)變化聽覺上增色必備。
愛思資源
http://www.aseoe.com/webook/
各種HTML、CSS、Javas cript相關(guān)的書籍下載。
jQuery之家
http://www.htmleaf.com/
各種jQuery、HTML5、CSS3的插件庫下載，分門別類，可供網(wǎng)頁設(shè)計(jì)師參考動(dòng)效設(shè)計(jì)或使用源碼。
jQuery插件庫
http://www.jq22.com/
各種網(wǎng)頁特效實(shí)例（以jQurey為主）預(yù)覽和源碼下載——經(jīng)常更新，還附帶一定講解。
Emojipedia [英文]
http://emojipedia.org/
高清圖標(biāo)大全，分不同設(shè)備顯示的各種Emoji表情，支持打包下載。
Freebiesbug [英文]
http://freebiesbug.com/
各種免費(fèi)的網(wǎng)頁設(shè)計(jì)資源下載，非常齊全。
Freepik [英文]
http://freepik.com/
各種免費(fèi)PSD、矢量圖資源。
PSDDD [英文]
http://www.psddd.co/
各種免費(fèi)圖標(biāo)、設(shè)備、元素的設(shè)計(jì)資源。
Material System ICONS [英文]
https://material.io/icons/
谷歌Material Design圖標(biāo)大全，原質(zhì)化設(shè)計(jì)需要ICON必備。
UI-Cloud [英文]
http://ui-cloud.com/browse/
各種UI源文件下載——更新比較慢，不過資源都是精品。
當(dāng)你以為你很了解設(shè)計(jì)的時(shí)候，
可能正是發(fā)現(xiàn)你自己一無所知的時(shí)候。
【作者說明】
iH5_cn良心出品，轉(zhuǎn)載請(qǐng)注明來源：H5頁面制作工具iH5.cn，或ih5_cn。
果動(dòng)圖
知識(shí)點(diǎn)：盒子模型與css樣式,CSS3選擇器、CSS3偽元素畫三角形，
DIV+CSS布局基礎(chǔ)，html性能優(yōu)化與布局精解，
jQuery插件使用指南，企業(yè)需求分析等
對(duì)于企業(yè)網(wǎng)站來說，一個(gè)滑動(dòng)側(cè)邊欄的設(shè)定一般來說是都會(huì)有的，思路其實(shí)很簡單，而且javascript代碼也只要幾行，本次我們使用的是Jquery，雖然簡單，但是現(xiàn)在應(yīng)該很多學(xué)習(xí)者還是很難動(dòng)手寫出這個(gè)功能，但是前端學(xué)習(xí)并不是把代碼，標(biāo)簽記住就行了，而是根據(jù)需求能做出相應(yīng)的產(chǎn)品，所以希望大家能多動(dòng)手，而不是紙上談兵。
HTML/CSS代碼里附加詳細(xì)的注解
點(diǎn)擊查看源碼動(dòng)圖
頭條號(hào)里有很多企業(yè)求職必備的案例的視頻/源碼/項(xiàng)目，歡迎大家關(guān)注！
如果需要下載視頻或者文檔版的源碼可以加我的前端學(xué)習(xí)群470593776大家一起交流學(xué)習(xí)提升！
片尾互動(dòng)：你真的是喜歡前端嗎？還是為了高薪~
mail 類型用于郵件地址的輸入，很明顯，它只適用于郵箱輸入。
使用格式如下：
<input type="email" />如果你輸入的郵箱格式不正確，會(huì)提醒你格式錯(cuò)誤。
url 類型是專門用來輸入網(wǎng)址的。
使用格式如下：
<input type="url" />也同樣會(huì)校驗(yàn)網(wǎng)址格式是否合法。
number 類型用于數(shù)字的輸入，number 類型表單有以下屬性：
屬性 | 描述 |
max | 輸入框允許的最大值。 |
min | 輸入框允許的最小值。 |
step | 合法的數(shù)字間隔，例如 step=2，則合法為：2、4、6、8。 |
value | 默認(rèn)值。 |
例如：設(shè)置默認(rèn)值為 5，步長為 2，每點(diǎn) ?? 一次，數(shù)字 + 2。
<input type="number" value="5" step="2" />range 類型用于包含一定范圍內(nèi)數(shù)值的輸入。與number不同的是，range顯示為進(jìn)度條。
其使用格式為：
<input type="range" />六種常用的日期選擇類型：
統(tǒng)稱為 Date pickers：
類型 | 描述 |
date | 選取年、月、日 |
month | 選取年、月 |
week | 選取年、周 |
time | 選取時(shí)間小時(shí)、分鐘 |
datetime | 選取年、月、日和 UTC 時(shí)間 |
datetime-local | 選取年、月、日和本地時(shí)間 |
例如，
<!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 標(biāo)簽提供用于輸入搜索關(guān)鍵字的文本框，從外觀看 search 和 text 是一樣的，功能也是相近的可以輸入任意的字符串。
使用格式如下：
<input type="search" />不能從外觀和功能上能發(fā)現(xiàn) search 類型和 text 類型的區(qū)別。那么我們?yōu)楹芜€要學(xué) search 類型呢？
如果使用不同的瀏覽器去看，就會(huì)發(fā)現(xiàn)有細(xì)微的差異，比如 Chrome 瀏覽器給 search 類型的輸入框提供了清空按鈕。如果在移動(dòng)端的話，虛擬鍵盤會(huì)根據(jù)不同類型的輸入框給出不同的反應(yīng)。還有就是起到語義化的作用，我們一眼能夠明白這里的 input 是起到搜索的效果。
tel 類型是 input 標(biāo)簽專門用來輸入電話號(hào)碼的文本框，它并不僅局限輸入數(shù)字，還可以輸入一些其他的字符，例如：- +（）等。
語法格式如下：
<input type="tel" />datalist 標(biāo)簽，為輸入框提供一個(gè)可選擇的數(shù)據(jù)列表。在具有自動(dòng)提示功能的文本框中可以使用這些選擇項(xiàng)來自動(dòng)補(bǔ)全文本框。該標(biāo)簽由 datalist 和 option 標(biāo)簽組合應(yīng)用。
一個(gè) datalist 標(biāo)簽中可以包含多個(gè) option 標(biāo)簽。他們的關(guān)系和表單元素 select 和 option 的關(guān)系一樣。
例子，
<!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 元素用于在瀏覽器中顯示計(jì)算結(jié)果或者腳本輸出，輸出的結(jié)果在標(biāo)簽之間顯示。
<!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)">
<!--定義了兩個(gè) number 類型的輸入框，其默認(rèn)值為 100-->
<input type="number" id="num1" value="100" />
+
<input type="number" id="num2" value="100" />=<!--for 屬性可以綁定對(duì)應(yīng) id 名的表單元素-->
<output name="r" for="num1 num2"></output>
</form>
</body>
</html>在上面代碼中，有 oninput="r.value=parseInt(num1.value)+parseInt(num2.value)"，我們使用 oninput 來及時(shí)獲取輸入框中改變后的值。在等號(hào)右側(cè)，使用 parseInt 是把輸入框中的值按照整型來解析。
關(guān)于 form 標(biāo)簽中的 oninput 屬性是當(dāng)元素獲得輸入時(shí)被觸發(fā)，其中 parseInt 是 JavaScript 中解析整數(shù)的函數(shù)，這里只要知道它所起的作用就好，不需要去深究。
顯示為，202就是output顯示的
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
