HTML5在移动互联网应用中的特性研究

孙华

摘要：随着移动互联网技术的不断发展和创新，HTML5技术俨然已成为下一代互联网的Web标准。基于HTML5的移动互联网应用正逐渐成为一种新的应用形式。文章重点介绍了HTML5的部分特性，对基于HTML5的移动互联网应用的技术进行了阐释，对HTML5技术对于移动互联网的发展趋势及前景做了展望。

关键词：HTML5；移动互联网；APP； CSS3； Web

1 HTML5概述

HTML5是移动互联网最前沿的开发技术，运用HTML5可以很好地进行移动应用的开发。目前，苹果、微软和谷歌三大移动互联网巨头都在支持HTML5，它的发展也给移动互联网应用带来全新变化。本文研究HTML5应用于移动互联网应用开发的核心技术，探讨离线缓存、Web Workers、Ajax、地理定位等新技术的应用，并针对HTML5技术现有不足进行探讨。文章主要分析了 HTML5适合移动互联网应用开发的几大特性。

2 HTML5技术的优势

HTML5在HTML4的基础上，又增添了很多元素与属性，并在一定程度上废除掉了一些元素与属性。首先，它擁有较低的开发成本与维护成本；其次，它使用的页面数据量相对较小，运行更为流畅，耗电量不高，使用时，也可以随时完成设计，只需要将应用程序打开，则可以直接升级到最新的版本，无需下载并安装，使用时也可以完成更新，离线的状态下，也能够完成缓存，这些都是其他技术无法企及的[1]。总的来说，HTML5在文档结构、页面元素、本地存储、地理位置信息等多个方面都发生了很大变化，而这些变化也相应的提升了HTML5对Web应用的开发支持。像是在媒体支持上，HTML5中增进了video元素与audio元素，视频、音频以及动画等多媒体的播放，再也无需进行第三方插件的安装。另外，HTML5开发是使用统一的开发环境、开发语言、数据模型，在音频、视频和图像、文本绑定上都存在一整套规范。也就是说在HTML5标准下进行开发，便为“一次开发、多次分发”，无需在HTML5与其他开发环境间自由切换，由此简化移动网络的开发，开发成本与维护成本都有所降低。

2.1 离线缓存技术

HTML5 Web Storage API属于高级版的cookie，不会因数据大小发生变化，且架构以及弹性较好，能够将数据融入本机ROM中，如遇到突发情况，浏览器关闭后，再次打开后数据能够自动恢复，流量损耗也会减小[2]。

缓存技术也是另外一种方式的后台“操作记录”，但是不会对后台资源造成任何影响，不占用空间，同时程序对硬件设备造成的压力也会减小，运行更为流畅。

2.2 交互方式较多

HTML5技术的互动功能得以提升，能够轻松实现拖拽、撤销等操作，文本选择更为简单便捷，例如：Transition代表组件的移动效果；Transform代表组件的变形效果；Animation代表将移动和变形加入动画支持中。

2.3 加入视觉设计辅助——CSS3

CSS3支持了字体嵌入、版面排版以及动画功能。比如：丰富的弹性选择器——Selector；嵌入式的字体——Webfonts；形式多样的排版选择——Layout；圆角、渐变、阴影Stlying radius gradient shadow；边框背景支持——Border background。我们可以使用CSS3完成部分视觉设计，其具有载入速度快的特点，且代码、图片数据量小，能够为用户节约一定的流量[3]。

2.4 排版形式更为灵活，能够自由嵌入多媒体内容

HTML4在对文字和音视频混排的多媒体内容处理上是比较麻烦的，需将文字、图片、视频和音频等内容进行拆分，再解析对应的URL，再以不同方式加以处理，但是基于HTML5网络互动性的增强，便不会再受到限制。HTML5技术与其他技术不同，其能够在同一时间处理多媒体内容，利用Canvas对象加载图片，便于依照数据计算与作图，支持图片移动、缩放和旋转等常规编辑，借助HTML5的视频标签功能，辅助Web开发工作者更加容易地添加视频，从而灵活地展现出各类内容，这就是它的优势所在。

2.5 随时随地分享地理位置信息以及准确的定位技术

为保证位置精确，需要借助GPS，WiFi等实现定位。HTML5技术的应用，能够更为精准地实现定位，不论是何时何地，都可用任意设备来顺畅地完成任务[4]，打破了定位以及导航技术专属于导航软件的历史，无需下载大量的数据包，仅需要使用缓存即可完成，做到随用随下。它充分发挥了移动设备对定位上的优势，推动基于位置服务（Location Based Service，LBS）应用发展。

2.6 Canvas绘图对移动平台的绘图能力的优化

借助Canvas API就能够完成简单的热点图绘制[5]，同时，也能够对用户体验数据进行收集并分析，轻松实现图片的旋转、缩放、移动等功能，例如：Canvas代表2D的绘图功能支持；Canvas 3D代表3D的绘图功能支持；向量图的支持SVG。

2.7 拥有能够为移动平台定制的表单元素

表1为IE浏览器中显示的HTML5表单元素与对应键盘。只需要输入例如，就能够调用不同样式键盘，操作较为方便快捷。

2.8 完善的实时通信支持

由于Web页面使用的是HTTP协议，所以无法有效实现实时互动的全部功能，仅能够借助模拟达到实时通信效果，HTML5技术实时通讯支持较为完善，在应用中就能够将信息内容嵌入，更好地实现实时通信、实时提醒等功能。

2.9 优越的文档功能

在日常使用的Gmail邮件中，已经实现了通过拖拉等操作将文档作为附件上传到邮件中进行发送。而这一项技术就是HTML5文档功能中的Dragn Drop和File API的应用[6]。

2.10 语意化网络

语意化网络即计算机对当前页面显示内容有一定理解，这一点可以帮助我们在SB3技术上有进一步的突破。

2.11 更具优势的跨平台融合APP开发

按照当前最为流行的两个操作系统iOS和Android市场的占有率来看，如果未来想要利用智能手机更改应用程序，需要使用Objective-C+CocoaTouch Framework编写基于iOS的應用程序，也可以使用Java+Android Framework编写。如果同时使用两个平台，这就需要设计两套不同平台的程序，这样一来就不得不设计两套完全不同的程序。而使用HTML5及CSS3来撰写Web-based的应用程序，可以同时支援iOS及Android两种不同的操作系统，只需要维护一份程序即可，所以HTML5技术拥有更强的灵活性和优势。

3 结语

由于当前HTML5技术的标准还不成熟，处在一个不断完善的阶段，在开发方式上，仍未指定规范性的标准，由此，致使开发应用不规范，程序用户体验无法达到原生开发应用效果。为了提升用户体验满意度，则需要对程序进行改进。

目前阶段，用HTML5技术作为移动设备硬件接口的API，还无法发挥其作用，在调用移动硬件相关设备时仍较为困难，比如重力感应器、GPS、摄像头等。不过随着HTML5技术的不断发展和完善，这些功能也将一一实现。

[参考文献]

[1]于洋.浅析HTML5的特点及其在移动Web App中的应用[J].计算机光盘软件与应用，2014（24）：288.

[2]刘国红.HTML5在移动互联网开发中的应用[J].科技广场，2014（4）：59-62.

[3]严伟中.关于HTML5的核心技术研究与应用[J].网络安全技术与应用，2014（3）：30.

[4]杨鹏，芦阳.HTML5的发展与移动互联网的前景[J].电脑编程技巧与维护，2013（10）：67-68.

[5]李伟.HTML5技术在电子商务专业课程改革中的授课方法探讨[J].电脑知识与技术，2013（5）：1249-1250.

[6]彭涛，杨炼.基于移动浏览器的HTML5核心技术的研究及其应用[J].广东通信技术，2012（4）：47-50.