H5 是什么？
171 个回答
前一段时间很火的 吴亦凡入伍的广告
你看静态新闻的时候，是在加载后面两个视频，加载完成之后，吴亦凡就蹦出来了
所以你们看到吴亦凡从画面里面出来的时候脑海里的台词是：
卧槽，这是怎么做到的！
而我的内心台词是：
卧槽，我知道是怎么做到的，你把流量还给我好么！
================================
更新一张之前和甲方之间的聊天记录，在整个minisite已经交付上线以后，甲方突然问了这么一句，大家感受一下。
这就是为什么我很反感别人跟我说H5，我特么知道你到底什么意思。。。
===================================================
先科普一下，HTML5并不是一项技术，而是一个标准。
标准的意思就是：学生准则手册。你可以按照准则做，甚至可以超出准则更加严格的要求自己，也可以不按照准则来，但是会被老师训斥小伙伴讨厌，别人都不找你玩，就像IE6一样。
那HTML5这些标准浏览器厂商到底姿持不姿持呢？这要看他们各自的尿性了。像chrome这种不仅在很多标准上支持的非常好，还积极上进很多地方超出了标准，支持一些标准中还是草案的部分。
所以其实要么我们是作为理论派讨论HTML5标准，要么是作为实践派讨论HTML5标准在某浏览器的应用。但是实际上我们在说到H5的时候，并不是指标准，也不是指标准的应用，而是一个硬生生造出来的奇怪概念合集，所以我是旗帜鲜明的反对这个称呼的。
最近一年的时间，我主要靠这个东西养家（并没有家）糊口。所以我是懂得甲方打电话过来询问，“你是不是会做H5开发？”的时候，我知道他们要的是那种可以在朋友圈分享的，看起来很酷炫的小页面，他们实际要的东西拆开来看大概包括以下技术点;
1. 页面素材预加载技术，可以使用createJS之中的preloadJS。我没有看preloadJS的源码，不过预加载并不是HTML5标准中更新的方法。
2. 音乐加载播放技术，createJS中同样有soundJS可以实现，而且这部分说起来确实是HTML5标准支持的内容，在上个时代并没有audio这样的标签。
3.可以滑动的页面，大多数是用了swiper.js这个Jquery插件，也有一些是手写的swipe，比较拙劣的手写版页面是不会跟手滑动的，其中touchstart等四个touch系列的事件是HTML5标准中的事件
4.可以涂抹擦除，多半是canvas叠加层，canvas是HTML5标准里面的标签，是代表了先进生产力的标签。
5.有动态的文字和图片，常见的是使用了css3或者直接使用js动画。很多时候提到HTML5多半还会带上CSS3，而CSS的分级又是另外的一个问题了，在不同的项目标准上，CSS会独立定级，以后应该不会有CSS4这个东西，所以大家也不用担心在H5以后又冒出来了C4（不过真是想用C4炸死那些每天把H5挂在嘴上的人）
6.可以填表报名，这是最基本的表单，是有网页以来就有的东西。
7.可以支持分享自定义的文案和图片，这个是用到了微信的jssdk，和HTML标准半毛钱关系都没有。
8.还有其他我想起来再补充的。
所以我们在谈论H5的时候，实际上是一个解决方案，一个看起来酷炫的移动端onepage网站的解决方案。而这个解决方案不仅包含了HTML5新增的audio标签，canvas，拖拽特性，本地存储，websocket通信，同时也包括了盒模型，包括绝对定位，包括一切前端的基本知识。
有学弟来问我说，学长我想学H5，应该从哪里开始？
我说HTML5新增特性在W3C上都可以查得到的。
学弟说，不，我想学的是H5，想做H5的页面。
于是我猜测他所指的就是上面论述的这种酷炫小页面，我就说，那你要先学习HTML，包括HTML5的新标准和之前的全部标准，然后学CSS以及CSS3，了解它们在浏览器的实现情况，原生JS了解一点就可以，大多的操作可以用Jquery，了解常用的几个Jquery插件的用法，应该就差不多了。如果想要做更酷炫的的，学一下egret或者cocos2d更好。如果要优化加载速度，还要学一下grunt一类的自动化工具。微信的sdk有很多坑，至少nodejs或者php一类的后端语言要会一点。
学弟说，那这不就是前端了么？我只是想学H5啊。
所以你看，当我们对一个概念的内涵无法统一的时候，我们根本不知道彼此之间在谈论的是什么。
”H5“本应是一个技术合集，却被意会成了一项技术，变成可以在质上而不是量上描述的概念。
对于营销来说，我们只要讲我们可以做H5或者不能做，这种定性的描述就够了。但是对于技术上，这是定量的事情，只能在具体某个技术项上是否，无法对这个本不存在的概念说是否。
就比如我遇到过有甲方说，我们之前找了一个人做H5，做的还不错，但是这个case他又说做不了，我也搞不懂H5和H5之间也有那么大差别吗？我只能笑笑和他说，世界这么大，各种各样的H5都是有的。
这就是为什么我反对H5，因为这个名词和它表示的内涵是严重不符的，这让我们难以沟通，让营销人和技术人之间产生误解，让浑水摸鱼的培训师们赚的盆满钵满，让技术新人不踏踏实实的学习技术。
每当有人问我，”你是不是做H5的？“
我的内心都很想咆哮一句，”你才是做H5的，你全家都是做H5的“
刚写的文章，或许能解答一二
什么是HTML？
通俗易懂版：
HTML就是你跟浏览器下达命令的语言。比如要把一篇文章显示在浏览器上，文章既有图片又有文字，你要告诉它哪些是文字，哪些是图片，并且分别都放在哪个地方，需要用什么样式（颜色、大小、对齐……），我们把浏览器显示的页面叫做网页。举个例子，要让下面这个简单的文字+图片显示在浏览器上：
翻译成浏览器懂的语言就是：
<title style=”text-align:center”> 最简洁易懂的“H5”技术科普 <title>
<img src=”/img/h5教学” />
如果HTML是中国人发明的，那么表达方式就是：
<标题 格式=”文字对齐:居中”> 最简洁易懂的“H5”技术科普 <标题>
<图片 图片地址=”/img/h5教学” />
专业装逼版：
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
什么是HTML5？
HTML5是HTML的第五个版本，上一个版本是HTML4，于1997年发布。
HTML5本质上不是什么新的技术，但是由于其在功能特性上有了极大的丰富，在加上各大浏览器性能上的支持，HTML5相对以前的HTML4有着更广泛的应用。
HTML5主要的新特性：
语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。简单来说就是程序猿更方便跟浏览器沟通。
本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，因为可以将一些常用、不常更新的内容存储在本地。
设备兼容特性 (Class: DEVICE ACCESS)
HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
连接特性（Class: CONNECTIVITY）
HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助实现服务器将数据“推送”到客户端的功能。更有效的连接工作效率，可以实现基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能。
三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，视觉效果将大大增强，在线3D网游就是最典型的例子。
性能与集成特性（Class: Performance & Integration）
HTML5会通过XMLHttpRequest2等技术，帮助Web应用和网站在多样化的环境中更快速的工作。最直观的就是加载会更快。
CSS3特性(Class: CSS3)
如果把网页比喻成舞台，文字图片视频这些比喻成演员，那么CSS3就是化妆师和舞美，它控制着网页所有元素的视觉和动作效果。相对于旧的CSS版本，HTML5所支持的CSS3中提供了更多的风格和更强的效果，也提供了更高的灵活性和控制性。
基于以上的功能特性，HTML5将有着极大的想象空间，最典型的应用前景是谷歌的浏览器OS概念——既浏览器取代操作系统，所有软件、APP都运行在云端，用户通过浏览器获取软件服务；在此假设下，Chrome浏览器相当于Windows操作系统，电脑软件（比如Office、Photoshop等等）界面就是Chrome上不同网址的一个个新建窗口，而软件操作界面就是HTML5网页。
技术科普到此，有意了解更多HTML知识的同学，可以看一下Julie Meloni的《HTML与CSS入门经典》。下面讲讲商业应用。
H5又是什么鬼？
HyperText Mark-up Language 5.0 → HTML5 → H5
当然，HTML5是英文规范简称，但H5就完全是国内特定人群的叫法。目前的事实是，H5已经成为微信HTML5网页的专有名词。
以现在的定义，H5特指基于HTML5技术的交互网页应用，以商业用途为主。
以下列举一些H5商业应用场景，供参考：
1、微信H5
目前HTML5应用最多的形式，因为移动端完全不支持Flash，而HTML5在动画展现和交互上基本可以满足企业需求，同时也因为微信的大力支持，HTML5网页作为一种营销的形式被广泛应用，营销圈简称H5。
案例：
H5动画（品牌/产品推广）
http://ih5.cn/idea/jky81t1 (二维码自动识别)
Uber卡通优惠码
微官网
http://ih5.cn/idea/jky81t1 (二维码自动识别)
中贸广场
小游戏
http://ih5.cn/idea/oHZsPnG (二维码自动识别)
CCTV创意答题游戏
H5弹幕
http://ih5.cn/idea/sXespSU (二维码自动识别)
港囧吐槽大会
节日贺卡
http://ih5.cn/idea/urtBEoe (二维码自动识别)
中秋贺卡
……
2、交互视频
HTML5对于多媒体的支持，让丰富的视频应用成为可能。iH5的交互视频技术可以将视频、动画、多屏通信等有机结合，极大地丰富了内容的表达方式。
案例：
3、户外大屏交互解决方案
传统的户外大屏交互需要复杂的软件实施，不仅成本极高，并且灵活度低。基于HTML5技术，不需软件实施，内容更新方便快捷。iH5的智墙技术提供了户外大屏交互的解决方案，支持多屏拼接和多点触摸。
案例：
4、PC HTML5广告
即苹果浏览器不支持Flash之后，谷歌浏览器已在2015年9月不再支持Flash自动播放，在可预见的未来，HTML5将取代Flash作为网页动画广告的首选。
案例：