揭秘H5是什么，附N个H5项目必备网站

公司经常要做H5，但对它的理解只是它显示出来的结果。

有时问开发者、设计师，这个能做吗？那个能做吗？

当答案是“YES”，后面开发时间耗时长就很难理解，不是说能做吗？

当答案是“NO”，也容易感慨：大概是技术水平不够硬吧。

但可能有些东西是H5本身的天然限制。

以下内容是对H5的入门解释，以及一些H5项目制作常用的参考工具。

H5是什么？

H5，HTML5，the Fifth HyperText Markup Language。

the Fifth，第五版——2014年10月制成。

HyperText，超文本——打破传统文本顺序，引入超链接。

Markup，标记——规定信息的结构、格式、语法、含义。

Language，语言——用于交流的符号系统。

HTML5，一套浏览器与服务器对谈的新型语言规范。

遵从HTML5规范的文档即对话内容。

开发者按照HTML5规范说一大段话，传到服务器；

服务器把这些话通过网络发到浏览器；

浏览器“翻译”给我们看。

HTML5的革命性，在于标记的极大丰富化，以至让这门语言脱胎换骨。

比如“他”、“妈”、“的”本是三个独立的字，合起来呢？

让人憋火！但脏话这门全新的“技术”也诞生了。

有新语言，就要有会说这门语言的人。

这两年浏览器更新换代，主要是紧跟HTML5步伐。

浏览器一直在学新的“翻译”技巧，否则我们收到内容也看不懂。

因为HTML5加入很多本来软件才有的功能，现在很难分清APP和网页的区别。

APP和Web APP什么关系？

图像软件的矢量绘制、拼贴、滤镜、蒙板，HTML5会。

动画软件的3D变形、粒子特效、关键帧、骨骼，HTML5会。

游戏软件的重力、弹力、加速度、光照，HTML5会。

应用软件的表单验证、数据存取、数值运算，HTML5也会。

HTML5实现这些要CSS、Javascript、WebGL、SVG、SQL等规范的配合。

但它们都可以通过网络进行连接，我们只需要准备一个最新版浏览器。

试想，下载一个Photoshop软件要1G内存。

就算你每次只用移动、文字的简单功能，也要占几百M内存。

如果你用网络版PS，在线加载一个简单功能可能只占几百K。

现在有非官方Photoshop网页版，可没有Adobe那么多滤镜库。

但其实滤镜库的本地化不是必要的，难道联网使用就不行吗？

世上有“云”，还一定留备几百G内存放东西？

只因为它适应于传统的软件售卖机制与内存加载体验。

HTML5的局限性

APP和Web APP还是有区别，除却功能外，一是流量，二是适配。

流量困局，源于网速的客观条件。

如果想5秒内加载出1G的游戏，我们网速得进步到2000兆。

流量没有质的飞越之前，大软件还得乖乖下载。

适配困局，软件开发也有。

APP需要给iOS、Android等移动系统分别开发，适配部分机型的DIY配置。

电脑应用也一样，苹果、微软等桌面系统要分别开发。

而H5网页，首先是不同设备的浏览器版本不同，“翻译”能力不同。

其次，虽然电脑手机可以打开同个页面，但尺寸相差极大。

怎么解决？

一、大家都用新版浏览器，或开发回退方案；

二、前期开发适配不同屏幕大小。

目前H5支持最好的是谷歌的Chrome浏览器。

还好，国内很多浏览器基于Chrome背后的引擎开发。

今天我们在微信上能做各种各样的事。

这么看，它不也是一个装载腾讯服务的浏览器？

N个H5实用学习网站

（需长按选中后用浏览器打开）

国内移动广告资讯与案例

数英网（国内知名数字广告公司集中地）

http://www.digitaling.com

H5案例分享（公众号同名，每天有案例分享）

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

酷5网（建议查阅“动效”、“声效”栏目）

http://www.ku-h5.com

哇呸网（案例更新快又全）

http://thewap.cn/

世界优秀HTML5网页合集

Awwwards（每日/周/月评比最佳网页，大多特效和适配俱佳）

https://www.awwwards.com/websites/

SiteInspire（世界优秀网页合集）

https://www.siteinspire.com/

HTML5SHOWCASE（各类H5 Web应用）

http://html5-showcase.com/

PIXID（日系为主的优秀网页）

https://www.iiiimg.com

网页特效与应用案例

Codepen（国际前沿H5特效示例与源码）

http://codepen.io/

Codrops（各类设计特效示例）

https://tympanus.net/codrops/

Sizmek（网页嵌入广告示例）

http://showcase.sizmek.com

TRESENSA（HTML5游戏合集）

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

Mobile Design Inspiration（移动网页动效参考）

http://inspirationmobile.tumblr.com/

免费可商用音乐音效

DigCCmixter（歌曲，风格偏老旧，但量大）

http://dig.ccmixter.org/free

Freesfx（主要是音效，也有少量音乐）

http://www.freesfx.co.uk/

Audionautix（主要是轻音乐，风格偏电子）

http://audionautix.com/

Freepd（主要是轻音乐，风格偏古典，使用需著名来源）

http://freepd.com/

NCS（国外一个开放所有音乐使用的电子厂牌，网址为网友热心收集的音乐合集）

http://music.163.com/#/playlist/50631203/5623472/?userid=44653897

【写在最后】

这个公众号不具备超链接功能，不能直接打开网址，后面会把以上网站导航加入菜单，并不定时更新。

篇幅与能力限制，有些内容没有细说，有疑问可留言。

如果你有什么好的网站/工具，希望能顺便分享给大家。

脑洞DT Seed

实用数字工具与知识

肉飞仙：ID hibeatsall，超人肉。为敏捷折叠重复性脑洞，内部新开张的纯HIPGC数据后台。