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商务垂直滑动侧边栏

您的项目需求