小程序资讯

派维特教你5分钟看懂H5是什么,及H5的应用场景举例。

行业新闻 2020-09-28 16:29:01

H5是指第5代HTML(超文本标记语言),也指用H5语言制作的一切数字产品。

网上的网页,多数都是由HTML写成的。

“超文本”是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。

浏览器通过解码HTML,就可以把网页内容显示出来。

H5之所以能引发如此广泛的效应,根本在于它不再只是一种标记语言,它为下一代互联网提供了全新的框架和平台,包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能,并使这些应用标准化和开放化,从而使互联网也能够轻松实现类似桌面的应用体验。

H5的最显著的优势在于跨平台性,用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上,打破各自为政的局面。

这种强大的兼容性可以显著地降低开发与运营成本,可以让企业特别是创业者获得更多的发展机遇。

H5主要缺点集中在性能上:同样的交互,用H5实现需要更多的系统资源,也可能会不够流畅。同时,应用还需要集成一个非常巨大的浏览器内核。

至少在5年内,HTML5的性能是不够的。

此外,H5的本地存储特性也给使用者带来了更多便利。

基于H5开发的轻应用比本地APP拥有更短的启动时间,更快的联网速度,而且无需下载占用存储空间,特别适合手机等移动媒体。

而H5让开发者无需依赖第三方浏览器插件即可创建高级图形、版式、动画以及过渡效果,这也使得用户用较少的流量就可以欣赏到炫酷的视觉听觉效果。

H5的兴起引发了业界的一个重要讨论:H5是否会替代APP?

在APP风光时,H5被看成是一个噱头;

而在H5风光时,又出现了“APP已死”的言论。

随着微信公众平台开放微信内网页开发工具包(小程序),H5眼看又要迎来新一波的风光期,那么它和APP之间真的是你死我活的关系吗?

对于一些常用的应用,用户还是会选择安装,以便可以即时的使用它,这并不会因为有同类的网络服务而改变。

用户不愿意在本地安装的大多是那些需求频次较低,或者更适合在浏览器场景下使用的产品。

H5和APP各有优缺点,各有其适用场合。

在媒体训练营冬季峰会上,搜狐董事局主席张朝阳的讲话就很能说明这一问题:“H5是轻应用,它是一个流量中枢,到达的流量非常多,像一个大树一样,每个叶子都在接下来的雨水。APP是一个重应用,但是它是一个强入口,用户下载的门槛比较高,一旦下载以后它的渲染能力很强。”

张朝阳认为APP只有大的才能活下去,因为它的技术和运营成本都很高。而H5 的门槛很低,适用于个人与中小媒体。

下面举例说明H5无处不在

首先,几乎所有在线的应用类网站,本质上都是一个“H5”

比如youtube和facebook:

比如在线的office 365,(没错,这个是浏览器中打开的页面,不是我们电脑上装的excel):

以及刚刚上线不久的谷歌地图在线版:

各种高大上的网站,基本上也是H5,比如苹果的网站:

H5还可以是各种在线游戏:

甚至户外大屏中的互动内容,也是H5:

当然,仅仅是用于微信营销的H5,也远远不是翻页广告页面:

H5即一种新的网页

看了那么多例子,也许你会发现,其实任何一个通过浏览器打开的网页,都可以是“H5”,那“H5”到底是什么呢?

首先,H5这个词,来自“HTML5”,且是国内的专门称呼,所以老外是完全不知道“H5”是什么的。

所谓“HTML5”,是指“HTML”的第5个版本,而“HTML”,则是指描述网页的标准语言。因此,HTML5,是第5个版本的“描述网页的标准语言”。

等等,“描述网页的标准语言”到底是什么鬼?

直白点说,“描述网页的标准语言”,其实就是网页文件的格式。就像word可以打开doc文件,ps可以打开psd文件,我们的浏览器,无论是Chrome,Firefox,还是360,都能打开html文件。而我们浏览网页,并在其中进行各种交互操作的过程,本质上都是我们的浏览器下载了一个网页文件,然后“播放”或者“运行”这个网页文件的过程。这个过程,和我们下载一个MP4的电影,然后用quickTime打开,基本上是一样的。

你可能会说,这个过程怎么会一样呢?我们访问一个网站,从来都不用下载啊,只要输入网址就可以了。实际上,当我们输入一个网址时,我们的浏览器就会自动从这个网址,下载一个网页文件,然后再打开运行,这样,我们才能使用各种在线的应用。

下图非常简单的描绘了这个过程:

如果你不信,可以下载这个简单的网页文件,然后断网,解压后双击打开里面的“网页.html”文件,看看是不是能看到一个简单的页面?

网页的简单构成

当然,以上过程,是我们对浏览器打开网页的最大程度上的简化,为了让大家对H5有一个更完整的了解,这里我们再做一个重要的补充。

大多数情况下,我们的浏览器从服务器下载的并不仅仅是一个独立的网页文件,而是三种类型的文件的集合,即网页文件,CSS文件和JS文件。

网页文件,构成了一个网页的骨架,描述了一个网页中的基本构成元素,以及这些元素的结构;

CSS文件,描述了网页的外观,比如文本的字体,颜色,图片的排版,按钮的动画效果等等;

JS文件,描述了网页的功能或行为,比如,当我们点击一个按钮时,网页要有什么反应,或者我们在玩一个在线游戏时,任何一个操作,对应于网页游戏的各种反馈等等。

下图描述了这三种文件的大致分工:

如果把一个网页比喻成一个完整人,那么html就是他的骨架,css决定了他的外观,而js则决定了他提供的功能。当然,这是对最常见的网页应用的描述,在日新月异的互联网中,我们常常可以看到这三个组合的各种变种。

H5的能力

有了以上的基本概念,让我们回到“HTML5”,就不难理解,它其实就是一种新的网页格式,配合CSS和JS文件,他能够提供相比旧版本的“HTML4”网页更多的功能和效果。

我们先来回顾一下10年前的网页:

我们现在习惯看到的各种酷炫的网页,和这些惨不忍睹的网页之间的区别,大多数应该归功于HTML5相对于之前的网页格式,而新增的能力。

根据MDN的总结,这些能力主要包括:

这里,我们不用一个一个去详细了解,只需要大概知道,相比上一个版本的网页格式“HTML4”,HTML5是一个革命性的升级,使用HTML5之后,之前只能下载到本地打开的PC软件或手机APP, 现在基本上都能搬到浏览器中来运行了。

总结来说,HTML5,或者“H5”,其实就是一种新的网页形式,是在浏览器中打开的网页应用,也是未来大多数软件存在的形式。