H5到底是什么

H5是一个在线制作H5的工具，在介绍H5之前，我们先来了解一下H5到底是什么吧。

大家可能觉得，H5是微信朋友圈看到的音乐相册，或者在群里分享的测试小游戏，总之，在微信中打开的链接，如果不是公众号文章，那就是“H5”。

对此，H5君表示大大的委屈。

在详细介绍H5之前，我们先来看看，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”，其实就是一种新的网页形式，是在浏览器中打开的网页应用，也是未来大多数软件存在的形式。