基于HTML5的移动Web技术

基于HTML5的移动Web技术

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

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

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新增的视频

controls="controls">

Your browser does not support the video tag.

目前对于移动终端而言，HTML5的音频、视频功能应用是有限的。苹果的iPhone手机支持

2.2表单

现在流行的移动设备大多采用触摸方式进行输入，并且有一个虚拟的触摸键盘。由于移动设备本身屏幕较小，按键大小和布局对用户的影响非常大，过大或过小都会降低用户体验感。如果能做到输入不同的内容显示不同的键盘，那么在提高用户体验的同时就提高了输入效率[3]，HTML5的表单元素很好地解决了这一问题。不同元素与键盘的对应关系如表1所示。

表单元素中除了上面几个新增元素外，还有Date pickers week、time、color等元素。HTML5中的表单组件是对HTML4表单的扩展，增加了内置表单验证、输入框占位符、外部表单关联等[4]，避免了采用HTML4中的冗余代码验证和样式控制，为网页开发带来了便捷。例如：就定义了一个遵循邮件地址格式的输入框，在输入地址时系统会自动辨别格式是否正确，若不正确不允许提交。以前这些相关验证都需要很复杂的代码才能实现，现在只需几个简单的语句就能轻松完成。

2.3画布

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

2.4离线应用

互联网拉近了彼此的距离，让世界变成了地球村，网络带给我们的方便不言而喻。众所周知，Web的应用非常强大，但是它存在一个致命的缺陷就是严重依赖网络，没有网络的Web就如离开水的鱼儿活不下去。虽然现在网络无处不在，但是网络信号的好坏却各不相同。我们常常遇到掉线的情况，很多时候掉线会带来严重的后果，那么有