1.1 什么是H5

在互联网传播领域，H5开启了交互式广告时代，也让用户逐渐成为广告的参与者，大大提升了广告传播的精准性和有效性。那么，H5到底是什么？它与App有什么区别呢？

1.1.1 认识H5

H5有广义和狭义之分，下面将分别对其进行介绍。

1. 广义上的H5

广义上的H5，就是指第五代“超文本标记语言”（Hyper Text Markup Language5，HTML5），也指用H5语言制作的一切数字产品。我们上网所看到的网页，多数是由HTML代码写成的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来。

在H5之前，网页的访问主要是在计算机上进行。但随着智能手机的迅速普及，互联网的访问已经从计算机逐渐转移到移动设备，上网方式的变更推动了相关技术的发展。

H5最重要的特性就是增强了对移动设备的支持。我们可以利用它开发出更符合移动端操作的界面，调用手机特殊硬件的支持。现在H5之所以会引发人们的广泛关注，根本原因在于它不再只是一种标记语言，而是为下一代互联网提供了全新的框架和平台，包括提供免插件的音频/视频、图像动画、本体存储，以及其他更多重要的功能，并使这些应用标准化和开放化。

2. 狭义上的H5

狭义上的H5，是指互动形式的多媒体广告页面，它是和移动互联网一起发展起来的。H5最显著的优势在于它的跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows系统、Linux系统、安卓系统与iOS系统。它可以轻易地被移植到各种不同的开放平台与应用平台上，打破了平台各自为政的局面。这种强大的兼容性可以显著降低站点与应用的开发与运营成本，让企业特别是创业者获得更多的发展机遇。

此外，H5的本地存储特性也给用户带来了更多的便利性。基于H5开发的轻应用比本地App拥有更短的启动时间和更快的联网速度，而且无须下载占用存储空间，特别适合手机等移动媒体。H5让开发者无须依赖第三方浏览器插件即可创建高级图形、版式、动画及过渡效果，这也能让用户用较少的流量就可以欣赏到炫酷的视觉与听觉效果。

1.1.2 H5与App的区别

为了进一步认识H5，下面将介绍H5与应用软件（Application，App）之间的区别。

1. App和H5的优势和劣势

App是指运行在智能移动终端上的第三方应用程序，在智能手机上运行的App应用程序又分为基于本地操作系统运行的Native App和基于浏览器运行的Web App。其中，Native App（原生App）就是我们通常所理解的App，它具有很强的交互性，可拓展性强，需要下载安装使用。下面所介绍的App与H5的区别指的是原生App与H5的区别。

App的优势与劣势如表1-1所示。

H5是采用HTML5写出的页面（即Web App），不需要下载安装，是生存在浏览器中的应用，需要通过浏览器和系统进行交互，因此受限于网速和设备硬件，App与H5的区别如图1-1所示。但随着网速的不断提高与硬件性能的不断提升，H5在速度、稳定性、流畅度等方面和App越来越接近。

HTML5作为一门重要的开发语言，有着显著的优势，其开发速度快、运行效率高、安全性好、可扩展性强、开源自由等。与手机端App相比，H5具有以下优势和劣势。

（1）H5的优势

· 制作及传播成本低：H5制作过程简单，成本低，同时可以跨多个平台和终端，只需要转发就可以转播，降低了传播方面的成本。

· 维护成本低：不需要用户手动升级即可更新，没有维护老版本的成本。

· 更新速度快：不需要经过复杂的上线流程即可更新，便于前期产品的不断试错。

· 本地储存特性：更短的启动时间，更快的联网速度，而且无须下载占用存储空间，特别适合手机等移动设备，客户端资源减少，节约用户存储空间。

· 更容易推广：技术难度低，开发的工作量少，实施周期短，用户接受程度更高。

（2）H5的劣势

· 受限于移动设备的系统和硬件，很多动效在H5上的实现效果不好。

· 只提供临时性的系统入口，无法获取系统级别的权限，如系统弹窗、通知、通讯录等。

· 不稳定性较强，页面跳转时复杂，运行速度容易受网络影响，很容易造成不流畅，甚至出现卡顿或卡死现象。

· H5页面空间比App小，在本身就小的移动设备屏幕中容易造成信息记忆负担。虽然可以利用滚屏扩大页面，但人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。

· 导航不明显，原有底部导航消失，有效的导航遇到挑战。

· 交互动态效果受到限制，影响一些页面场景、逻辑的理解。

· 功能实现相比App存在差距，用户重复使用难度大，用户黏性差。

H5的优势是显而易见的，随着微信小程序的推出，H5的应用将更加广泛。但H5的天然缺陷也是无法避免的，我们可以通过交互、UI的设计来弱化这些缺点，为用户带来更好的产品体验。

2. App中的H5

App中的一些非核心需求页面可以用H5制作，当这些页面需要进行功能调整时，不用跟随版本迭代即可快速更新，如淘宝首页的特色好货、热门市场等栏目。对于阶段性的营销活动页面，特别是功能、布局等经常需要修改的页面，也可以用H5来做，如节日的有奖活动页面。

3. H5设计的局限性

App与H5在界面设计上存在很多差异，图1-2和图1-3所示为天猫App与天猫H5的首页对比。

通过对比就会发现，天猫H5的首页功能比天猫App的首页功能减少了许多，例如，扫一扫、消息功能以及底部导航都没有了，同类的Banner（专题）广告布局也变得相对简单。H5界面的顶部的导航条是不可更改的，且底部显示浏览器自身的导航栏。