HTML5在移动互联网中的优势分析及典型应用

孙瑰琪

HTML5在移动互联网中的优势分析及典型应用

孙瑰琪

本文结合HTML5特点和移动网络应用发展的需要，对HTML5在移动互联网中的应用优势进行了分析，并针对优势技术，列举了HTML5在移动网络中的典型应用。

HTML5简介

HTML5是HTML（超文本标记语言）的第五代修订版，拥有大量新功能和布局技术。广义的HTML是包括HTML、CSS和JavaScript在内的一套技术组合，对网页的内容编排和展现做了进一步地增强，大大提升了Web在语义化、交互、终端资源调用及多媒体等方面的能力，促使Web成为标准化、全功能的应用承载平台，随着移动互联网的普及和人们对移动应用的需求增加，HTML5的相对于其它语言的开发优势也变得更加明显，如今，它已成为实现移动互联应用的主要发展方向。

移动互联网应用的发展

时下，“移动互联网+”理念正在蓬勃发展，人们对智能终端的依赖程度也越来越高，移动端的生活、办公变得常态化，而终端的不同平台为我们早期的应用开发增加了繁重的工作和成本，阻碍着应用平台的进步，伴随着HTML5标准的不断完善，移动平台的应用开发变得更简洁，而HTML5也势必会引领移动联网开发走向一个新高度。

HTML5开发移动应用的技术优势

离线存储技术。HTML5 中引入了DOM Storage机制和Web SQL Database存储方式，实现了大数据和交互数据的离线存储，对构成Web应用程序的图像、JavaScript文件、HTML文件、CSS文件进行本地存储。用户可以通过Web应用，在设备在线时进行数据缓存，离线时，浏览应用内容或进行数据编辑，当设备再次连网时，数据自动实现服务器同步上传。强大的离线存储能力，使得HTML5开发的网页App拥有更短的启动时间，更快的联网速度。一方面减轻了本地设备的硬件压力，另一方面也解决了Web应用必须联网工作的弊端。

定位技术。HTML5 Geolocation API可以获得用户的地理位置，打破了传统导航软件和预装地图在定位上的垄断。通过Geolocation和移动设备的GPS功能可以实现准确的定位，如今我们再通过手机浏览器使用百度地图时，也可以直接实现导航功能，而不用麻烦的输入起点和终点了。地理位置的获取在新闻、天气等综合型网站上也有着广泛的应用。

网页的多媒体特性。HTML5规定了通过audio 和video来规定音频和视频元素的基本方法，打破了早期大部分网页中的音、视频都需要通过flash插件来显示的传统方法，减少了页面的加载时间和使用插件带来的危险。并且相对于原生App的开发，可以将文字、音视频灵活的混排，而不用专门嵌入webview，大大的减轻了设计师的工作负担。

HTML5添加了画布（Canvas）绘图功能。Canvas、SVG（可缩放矢量图形）与JavaScript结合可以实现在网页上绘制图形，并调整大小等从而摆脱flash、Silverlight等插件。实现大型地图的渲染和密集型游戏的制作，为移动端的游戏制作和电子地图开发增加了新的选择。

多样化的交互能力。

硬件设备兼容特性：HTML5有强大的对终端设备的访问和调用能力。通过一系列的Device API 接口实现对文件、日历、触摸、终端系统信息、通信录、通讯、多媒体捕捉等操作。文件API使文件直接拖放上传和显示上传进度并允许浏览器访问和管理本地文件系统，改善了基于浏览器的Web应用程序处理文件上传的方式；多媒体捕捉API，管理设备的摄像头和麦克风，用于音、视频的录制的播放，在网页上进行拍照、摄像操作等；文件API借助接口可以实现本地图片预览功能；终端系统信息API则可以获取终端设备的基本信息。

交互事件：HTML5规范实现了原生拖放功能，利用拖拽API，使得元素拖放的实现更加方便和高效。默认情况下，可以实现对任何对象的拖动。

移动端新增touchstart，touchmove，touchend事件，利用这3个事件，判断手指的点击和划动轨迹，我们可以封装各种手势的识别功能。

数据推送技术： HTML5可以通过WebSocket 规范实现双向的通信信道的建立，服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息，不限于以Ajax(或XHR)方式通——XHR受到域的限制，而WebSocket允许跨域通信。使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。

跨平台性：HTML5技术可以实现跨平台，适配多终端。传统移动终端上的原生App，开发者必须针对不同的操作系统进行，开发成本较高。同时对于App版本升级和审核也都要针对不同的平台分别操作，对于用户还存在着管理、存储以及性能消耗成本，HTML5/ JavaScript/CSS3语言所开发的应用只要一次开发就能进入所有浏览器进行分发，用户也无需进行产品升级，只需服务器端更新便可。

HTML5在移动网络中的典型应用

移动端营销广告和轻游戏的开发和推广。微信公众号为主的新媒体营销在近年有了很大的发展。从国际品牌到本地企业，再到小微企业甚至个人电商，都正在积极地通过社交媒体进行营销。HTML5的跨平台性、交互性和音、视频使用的灵活性，摆脱了网页对flash插件的依赖，提高了网页的加载速度，促使了微场景和轻游戏的出现，将线上、线下活动，通过广告与游戏的形式结合，增加了营销行为的亲和力，促使了用户的主动参与和传播，在用户参与和传播游戏的同时，进行了营销宣传并实现了后台的大数据分析。

电子地图性能的提升。传统的电子地图存在矢量数据可视化标准不统一，不能显示三维场景，与用户的交户能力差、空间分析能力较弱等不足。HTML5中的一些技术很好地解决了这些问题：Canvas和WebGL实现了图形的矢量化和地图的三维化；定位技术，通过移动设备的GPS，实时获取用户的位置信息，增强地图的交互性；离线存储技术，可以让用户机器高速缓存文件和资源，用户在使用地图时不用每次都重新下载地图数据，同时减少网络传输量，提高访问速度。

移动端数字化信息系统的开发应用。随着移动网络的发展和人们对移动生活模式的依赖，越来越多的数字化系统平台开始开发移动阵地。传统的在线教学、在线图书馆、在线办公系统都开始从PC端到移动设备的拓展。HMTL5的双向通信技术、多设备兼容特性使用户能够在线协同处理文档和实时交流，最大限度地实现实时交互；音、视频的灵活混排特性、Canvas的绘图技术让网页的显示摆脱了对flash插件的依赖，排除了插件使用带来的不安全隐患，保护用户信息；离线存储技术，摆脱网络环境变动对系统使用的限制，用户不必担心网络终断而引起的数据丢失和应用终止，使用户体验变得更顺畅。

（作者单位：大连市房地产学校）