内容发布更新时间 : 2024/12/27 6:37:58星期一 下面是文章的全部内容请认真阅读。

龙源期刊网 http://www.qikan.com.cn

基于HTML5的移动Web技术

作者：王庆，杨文晖

来源：《软件导刊》2013年第12期

摘要：随着科技的发展，移动终端已进入人们的生活，而传统的网页开发技术很难适应这种小屏幕界面，HTML5的问世在很大程度上解决了这一难题。介绍了HTML5的特性并提出了简单明了、可订制性、以用户为中心的移动Web设计原则。HTML5新增的视频、音频、画布、离线应用等功能为网页开发带来了新的希望和曙光。新技术不仅能很好地适应移动终端界面，而且很大程度上减少了代码冗余，提高了设备运行效率。

关键词：移动互联网；HTML5；移动终端；小屏幕界面；移动Web

中图分类号：TP393文献标识码：A文章编号文章编号：1672-7800（2013）012-0145-02 作者简介：王庆（1987-），女，成都理工大学硕士研究生，研究方向为界面设计。 0引言

随着智能机的出现，我国网民接入互联网的方式发生了翻天覆地的变化。7月17日，中国互联网络信息中心（CNNIC）发布了第32次 《中国互联网络发展状况统计报告》[1]。报告显示，截至2013年6月底，我国网民数量达到5.91亿，互联网普及率为44.1%，较2012年底提升2%。与此同时，我国手机网民数量达4.64亿，较2012年底增加4379万人，网民中使用手机上网的人群占比提升至78.5%。3G的普及、无线网络的发展和手机应用的创新促成了我国手机网民数量的快速提升，手机成为我国最大的移动终端。由于手机移动终端屏幕较小、运行能力有限，传统的网页并不适合设备直接访问。随着HTML5的提出，其跨平台的特性为移动Web开发提供了广阔的前景。 1HTML5介绍

HTML5超文本描述语言是下一代HTML的标准。HTML5有两大特点：首先强化了 Web 网页的表现能力，其次追加了本地数据库等相关功能。所谓的HTML5实际上是指包括HTML、CSS和JavaScript在内的一套技术组合，目前支持HTML5的主流浏览器有Google Chrome、Firefox、Internet Explorer 9和10等。 2HTML5新特性 2.1视频、音频

当我们浏览网页时或多或少都遇到过这样的问题，比如打开不同的播放器需要安装不同的插件，甚至更换浏览器后同样也需要安装插件。现在Web处于严重依赖插件的时代，听歌、

龙源期刊网 http://www.qikan.com.cn

看视频、购物等都要依赖插件，在不便的同时还存在着许多安全隐患。HTML5新增的视频、音频元素，使得这一切变得简单，我们在观看视频、音频时不再依赖第三方插件，直接点击播放器就可以得到我们想要的内容。目前标签只支持Ogg、MPEG 4、WebM 格式。其中Ogg是指带有 Theora 视频编码和 Vorbis 音频编码的Ogg文件；MPEG4是指带有H.264视频编码和AAC音频编码的MPEG 4文件；WebM是指带有VP8视频编码和 Vorbis 音频编码的 WebM 文件。以下是HTML5实现的一段视频代码：

Your browser does not support the video tag.

目前对于移动终端而言，HTML5的音频、视频功能应用是有限的。苹果的iPhone手机支持标签，但在一个手机页面上不能完全嵌入视频数据，也不能提供由HTML5定义的控制和访问水平。智能手机提供的是静态图像，当用户访问视频时提供QuickTime播放[2]。IPad虽然能实现标签，但它不能同时管理多个视频页面。 2.2表单

现在流行的移动设备大多采用触摸方式进行输入，并且有一个虚拟的触摸键盘。由于移动设备本身屏幕较小，按键大小和布局对用户的影响非常大，过大或过小都会降低用户体验感。如果能做到输入不同的内容显示不同的键盘，那么在提高用户体验的同时就提高了输入效率[3]，HTML5的表单元素很好地解决了这一问题。不同元素与键盘的对应关系如表1所示。 表单元素中除了上面几个新增元素外，还有Date pickers week、time、color等元素。HTML5中的表单组件是对HTML4表单的扩展，增加了内置表单验证、输入框占位符、外部表单关联等[4]，避免了采用HTML4中的冗余代码验证和样式控制，为网页开发带来了便捷。例如：就定义了一个遵循邮件地址格式的输入框，在输入地址时系统会自动辨别格式是否正确，若不正确不允许提交。以前这些相关验证都需要很复杂的代码才能实现，现在只需几个简单的语句就能轻松完成。 2.3画布

龙源期刊网 http://www.qikan.com.cn

目前要在网页上绘图几乎不可能，就连最基本的图形都很难实现。HTML5引入的Canvas绘画功能，为开发人员提供了动态产出和图形渲染功能。开发人员不再依赖Flash来进行动画绘制，利用Canvas就可以直接在网页上高效快速地绘制图形图表，从而减少网络传输，提高了效率。Canvas画布是一个矩形区域，可以在其中随意画图，也可以加载照片。Canvas元素本身没有绘画能力，绘画工作必须在JavaScript内部才能完成。 2.4离线应用

互联网拉近了彼此的距离，让世界变成了地球村，网络带给我们的方便不言而喻。众所周知，Web的应用非常强大，但是它存在一个致命的缺陷就是严重依赖网络，没有网络的Web就如离开水的鱼儿活不下去。虽然现在网络无处不在，但是网络信号的好坏却各不相同。我们常常遇到掉线的情况，很多时候掉线会带来严重的后果，那么有什么办法能解决这个难题呢？HTML5给我们带来了希望。HTML5强大的功能就是离线应用，将应用数据缓存到本地浏览器中，掉线时一样可以浏览网页。

其实，离线Web应用就是一个URL列[5]，列表中的URL可以指向HTML、CSS、JavaScript文件、图片或者其它资源，该列表被称为Manifest File。通过创建Cache Manifest文件，可以轻松创建Web应用的离线版本。当使用离线Web时，会引入这一清单，浏览器会从清单文件中读取相应的URL信息，并下载相应的资源将其缓存到本地。因此，在离线状态下访问Web应用时浏览器就会自动切换到从本地直接读取这些资源，从而能够脱离网络使用。 2.5标签和样式

移动终端因为受到屏幕尺寸和分辨率的限制，无法将普通页面全屏显示在一个页面上，就算通过屏幕缩放技术[6]来访问传统的网页也很难得到最佳体验。不过HTML5已经考虑到这点，在网页头部加上就可以了。它根据终端屏幕尺寸来自动调整网页大小，从而可以适应不同屏幕大小的移动终端设备。 3移动Web设计原则

无论是手机还是平板电脑都不同于PC机，这些设备屏幕较小、运行能力低，若直接移植大屏幕界面的设计方案，会给用户带来不便。为了提高界面设计效果和用户体验，在设计界面时可以遵循以下原则。 3.1简洁明了

我们浏览网页时往往一下子就被那些漂亮的图片所吸引，这是因为图片对眼睛的吸引远远大于文字对眼睛的吸引。然而对于小屏幕而言，图片并不是越多越好，适当的图片会给人一种欣喜若狂的感觉，起到画龙点睛的作用，过多的图片会让人觉得眼花缭乱，产生视觉疲劳，过多的图片还会让人觉得信息杂乱无章，没有重点。针对终端界面，应该把一些图片、图形的数