Web开发中HTML5技术的应用探讨

唐晓玲 常州科信交通科技有限公司 杨年丰 常州市武进第三人民医院

1 移动互联网技术的发展

1.1 移动广告

移动广告就是在手机、PSP、平板电脑上访问应用或者网页的时候出现的广告，这些广告包括图片、网页、动画广告等。

1.2 移动搜索

通过移动设备，如在手机、PSP、平板电脑等在互联网上进行搜索，从而使用户可以快速高效的获得需要的信息资源。目前搜索主要有两种方式：一是WAP 接入搜索 WAP/WEB，另一种是直接搜索WEB内容。

1.3 移动购物

在手机、平板电脑等上通过访问互联网的形式，在互联网上进行购买商品。

1.4 移动社交

用户在手机、PSP、平板电脑上通过访问互联网，在社交应用（QQ、Facebook、微博等）上进行广泛的交流。

1.5 在多媒体方面

用户在手机、PSP、平板电脑上通过接入互联网进行观看动画、影片等。

1.6 移动游戏

用户在手机、PSP、平板电脑上等移动设备上通过接入互联网享受互联网游戏的服务。

2 Web开发中HTML5技术的应用

2.1 什么是HTML5

1999年所制定的HTML4.01和XHTML1.0标准已经不能满足社会发展的需求。HTML5版本在此基础上发展起来，现在越来越多的浏览器已经支持HTML5技术。HTML5具有强化网页和数据库等Web应用的功能。HTML5标准已经成为了新的Web技术的标准，在移动浏览器中受到了欢迎。

2.2 Web网页开发中的HTML5技术

由于移动设备与电脑在硬件的配置是不同的，所以移动Web浏览器的功能受到了限制。在移动设备的屏幕分辨率低，不能很好地将网页上的内容清楚地显现出来，目前阶段可以通过屏幕的缩放来更好地显示页面，但是还是不能很好地满足用户的需求。HTML5技术很好地优化了界面，使Android 和iOS系统很好的支持了Webkit，也使CSS3更好地实现了UI界面。

HTML5技术中新产生的元素有header、article、footer 和 nav，这些新元素可以帮助HTML更好实现结构化和语义化。header通常可以说成头部，包含引导、导航信息、含列表、搜索框和主题相关的logo。article元素指的是文档、页面，主要作用是显示文章的内容。Footer的功能主要是对文章末尾的基本信息进行说明，如作者信息或者版权信息。nav用来显示当前页面的导航链接。

在移动设备的屏幕分辨与电脑分辨率存在差异，在移动设备屏幕上不能正常的显示网站信息，但是Html5技术Viewport窗口和MediaQueries样式模块就可以让网页很好地适应移动端设备的屏幕。为了解决移动设备屏幕分辨率的问题，Html5提供了Viewport窗口，开发者就可以创建一个缩放和自定义大小的窗口。MediaQueries样式模块的主要作用是改变传统的页面布局。但MediaQueries样式模块需要在HTML页面内引入一个 CSS 样式表文件后才能直接使用，同时，还需要在CSS样式文件中定义一个media样式。

3 Web应用开发中的HTML5技术

UI 框架、mvc 框架和工具库都是开发一个完整的Web 应用涉及到的前端技术，虽然有很多的前端框架（YUI、closure Library 和 Dojo等）都包含了上述的前端技术，但是在移动端，这些重量级的前端框架不能满足人们的需求，需要我们在这方面进行完善创新。目前阶段，可以选择很多轻量级的框架，这些框架具有完整的移动设备UI式样，如按钮、列表、文本框、日历选择器、Slider 、工具栏、Bootstrap、jquery mobile和 Foundation等组件。

在进行大中型应用的开发过程中，需要大量的DOM操作和服务器之间的数据交互，这不仅仅是一个简单的开发过程，还需要MVC 框架的支持。单页应用正值会对MVC 框架造成很严重的影响，当单页应用正值太多时就会导致MVC 框架瘫痪。在应用开发过程中，还需要对特定的任务进行开发，如为了减小应用的大小可以使用ZEPTO 自带的jquery工具，为了节省流量的使用，需要用UNDERscoreCch 处理列表数组。在移动应用界还存在非常重要的重量级的框架，如Sencha。Html5技术在开发页面的时候，还需要访问移动操作系统没有开放的信息，就需要应用些平台兼容层的工具将 javascript代码编译成Objective-C或者Java代码，最终生成iOS 或者Android 应用。Html相关的技术几乎都是开源的，一定要合理的选择合适的技术。

Web技术 HTML、JS 和 CSS在 创建跨平台的移动应用时,需要PhoneGap移动框架的支持。PhoneGap 程序包含config.xml文件和通过 PhoneGap的API调用设备两个部分。config.xml控制应用中的行为，对Cordova 的API功能、要启动的插件和一些平台相关的设置进行控制。

4 结束语

随着社会的进步，经济的发展，Html5技术顺应时代的潮流发展起来。Web 开发过去在安全和设备访问等方面存在很大的缺陷，Web开发中的HTML5技术可以方便的构建移动端的网页APP，可以对磁盘系统和摄像头等敏感设备进行访问。Html5技术可以很好地支持定位、触摸和传感器等功能。可以说，以往Web开发过程中的限制都被Html5技术很好地解决了，而且进一步促进了Web开发的发展。本文主要就Web网页开发中和Web应用中HTML5技术进行探讨研究，丰富了手机、PSP、平板电脑等移动设备的web应用。