基于HTML5移动Web技术.docVIP

基于HTML5移动Web技术 　　摘要：随着科技的发展，移动终端已进入人们的生活，而传统的网页开发技术很难适应这种小屏幕界面，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处于严重依赖插件的时代，听歌、看视频、购物等都要依赖插件，在不便的同时还存在着许多安全隐患。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. 　　 　　var _gaq = _gaq || [];_gaq.push([_setAccount, UA1]);_gaq.push([_setDomainName, .]);_gaq.push([_trackPageview]);(function () {var ga = document.createElement(script); ga.type = text/javascript; ga.async = true;ga.src = (https: == tocol ? https://ssl : http://www) + ./ga.js;var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s);})();var _userid = ;var _siteid =75;var _istoken = 1;var _model = Model03; WebPageSpeed =250; UrchinTrack(); 　　 　　目前对于移动终端而言，HTML5的音频、视频功能应用是有限的。苹果的iPhone手机支持标签，但在一个手机页面上不能完全嵌入视频数据，也不能提供由HTML5定义的控制和访问水平。智能手机提供的是静态图像，当用户访问视频时提供QuickTime播放[2]。IPad虽然能实现标签，但它不能同时管理多个视频页面。 　　2.2表单 　　现在流行的移动设备大多采用触摸方式进行输入，并且有一个虚拟的触摸键盘。由于移动设备本身屏幕较