论文部分内容阅读
2012年12月，HTML5规范正式定稿，这意味着HTML5不仅是可以在传统PC的网页设计之中应用，而且能够在所有智能终端的使用，为移动互联时代的网页应用提供更加丰富、强大的开发标准。HTML5技术的突飞猛进，是Web开发标准一个质的飞跃，与先前的Web标准很不一样，HTML5不仅能表示Web内容，而且将Web带入一个成熟的应用平台。在HTML5平台上，图像、音频、视频、动画与移动终端的各种交互过程都被标准化。
1 移动应用开发技术的演变过程
移动应用开发技术的发展，分为三个阶段：早期的WAP（包括WAP1.0和WAP2.0）网站到目前流行的原生应用（NativeApplication），后变为以HTML5标准为基础的Web App。1998年，遵循WAP1.0协议的无线标记语言WML诞生，成为低功耗手机访问网站的标准设计语言。随着移动终端和互联网的发展，WAP2.0协议诞生，并出现了XHTML标记语言，较之WML，XHTML支持所有移动平台，适用于大部分智能移动终端，而且支持JavaScript、CSS 等交互技术，用户体验良好。
2008 年，HTML5标准草案颁布，有为移动应用开发提供了新的技术方案。2010年，苹果宣布其移动设备不支持Flash插件后，HTML5标准很快成为移动网站打造更加美观的网页应用的首选。为了响应移动互联应用“富内容、富交互、富体验、跨平台”的要求，HTML5与HTML4相比之下做了大幅的改善。最突出的特點是：支持离线访问、支持全媒体内容展示、支持交互式的2D/3D图像渲染、提供丰富的API以调用移动设备的硬件。这使得HTML5可以实现堪比Native App效果的Web App，而且，其具有更优越的安全性、跨平台访问性。更重要的是，Web App开发难度较之NativeApp大幅降低，易用性更高。
2.HTML5：移动应用开发的新潮流
从HTML4 到HTML5的提出，此过程经历了十年的变革，还是质量的大幅度飞跃。HTML5 彻底抛弃了HTML4 以网页文本为主的特点及功能，基于HTML5开发的Web App，在不借助第三方插件的情况下，能够实现丰富的交互操作以及多线程处理，这使得Web App能够完成复杂的操作任务。相比于以往的开发模式，基于HTML5 的 Web App 模式是更加理想的移动应用开发方案。
（1）相比于早期的WAP2.0标准以及近年新兴的Native App构建方案，HTML5标准具有明显的优势。WAP2.0是对WAP1.0的改进，其初衷是针对低能耗、低流量手机提供移动应用开发标准，虽然WAP2.0在功能及表现力上有所改善，但是，对于当前主流的智能移动终端的强大性能仍然欠缺支持。Native App是适应移动智能终端的开发方案，能够充分发挥设备的性能，为用户提供诸多新颖有趣的使用体验。但是，Native App高度绑定于移动操作系统，存在开发难度大、部署应用不便的缺陷。相对而言，HTML5是基于B/S架构的标准，不存在Native App的固有缺点，具有良好的跨平台统一性，而且，HTML5功能强全面，为开发者提供了丰富的移动应用开发标准，弥补了WAP 标准功能弱小的不足。总体而言，基于HTML5 的移动应用开发方案具有开发难度低、功能丰富、部署应用简易、跨平台访问便捷的优势。
（2）HTML5 大幅降低了移动应用开发的技术门槛。经过 PC 时代的互联网应用开发，对HTML标准下的应用开发技术与流程已经十分熟悉。HTML5继续沿用HTML4时代的开发部署方案，相对于全新的 NativeApp 构建方案，基于HTML5的移动应用开发更容易被技术人员接纳。
（3）基于HTML5的Web App开发为APP开发建设注入活力。2008年以来，随着智能移动设备的迅速普及，逐渐将移动服务的重点转移到移动应用程序开发和移动网站用户体验优化上面。但是，由于此前的移动应用开发难度大，真正参与移动应用开发的程度不高，移动应用服务基本来自于软件公司的产品。HTML5 标准的颁布有力地改变了这种局面，对于功能多样、体系复杂的移动应用适宜购买，而对于开发难度较低、个性化程度高的移动应用适宜自建。HTML5标准将以其易用、开放、强大的特点，成为共建WebApp的通用标准。
3 HTML5的关键技术介绍
3.1 HTML5 canvas技术
Canvas 是最强大的API之一，Canvas最先由苹果公司推出，在safari浏览器1.3版本中加入。Canvas—经推出便引来众多厂商注目，这使得在W沈环境下不依赖插件而处理和绘制图像成为了可能。Mozilla和Opera也立即加入canvas阵营，在Firefox1.5和Opera9引入了canvas。过去通过FLASH等插件实现的动画，现在只需使用JavaScript就能够实现。Canvas对于WebApp开发意义重大，也是HTML5中最受关注的功能之一。Canvas绘图API主要是通过context进行绘画和图像处理，将整个操作定义在一个getContext（）方法上。开发者通过这个context进行操作图像元素。
3.2 HTML5离线应用技术
离线应用是指在脱离网络连接的环境下，Web App依然能够进行数据存储与交换业务，从而保证程序的正常运行。这项技术使得Web App克服了过去离线即瘫痪的局限，应用适应性更强。在开发中，该技术涉及以下三种功能实现：①离线资源缓存。HTML5通过CacheManifest缓存清单指明Web App在离线工作时所需的资源文件，并支持自动和手动两种缓存更新方式。②在线状态检测。HTML5 提供了HTML5提供了Navigator.online屬性值判断和Online/Offline事件监控两种检测方式。③本地数据存储。HTML5提供Web Storage和Web SQLDatabase两种存储机制：Web Storage是在客户端以key-value形式保存数据的功能，类似于HTML4中的Cookie，但安全性更好;Web SQLDatabase是HTML5草案中追加的新功能，它允许用户在客户端通过JavaScript操作数据库。 3.3 HTML5 Device API 技术
HTML5 Device API主要包括访问设备摄像头和麦克风的Media Capture API和地理位置定位Gelocation API。Geolocation地理位置定位API是HTML5的重要组成部分。HTML5提供了地理位置定位API，在W沈应用中调用此API，就能够获取用户的当前位置，非常便捷。浏览器获取设备的坐标信息主要有四种方式：巧地址定位、WiFi定位、GPS全球定位和GSM网络定位。四种方法中GPS定位最为准确，IP地址定位误差最大。浏览器究竟使用哪种方法，主要依赖设备本身和设备是如何联网的。如果使用的是移动设备，而且参数enableHighAccura巧的值为true时，就会优先采用邸S定位，若设备没有GPS芯片，但设备是通過W姐上网就使用wifi定位，同样如果是通过3G上网就使用GSM定位。IP定位是最后才采用的方法
3.4 HTML5的表单技术
在Web应用中，使用HTML、javascript来实现用户输入信息是基础。但移动设备上键盘受限为用户输入信息构成了一定的影响。HTML5工作组根据用户遇到的一些问题给出了一套方案用来优化用户的输入方式。HTML5中对于表单做了一些功能的更新：
①表单结构更自由
在HTML4.0和XHTML中表单元素必须要放在<form>之中，比如<input>、<select>等。但是，在HTML5中，新增的表单元素不需要这么刻板，在文档中任意位置都可，只需要将id指向所属表单的id即可，这看似没什么大用，但在实际开发中，如果代码量比技大，在后期维护更新时，就不需要专口找到form的所在位置，只要知道他的id就行，可以节省不少时间。
②多样的输入类型
为了方便移动端用户的输入和降低移动端开发的繁琐度，HTML5表单引入了许多输入类型。最具代表性的就是email、姐、date、search和color等。例如：email类型：<input type="emair/>表单中引入email类型之后，用户就必须在相应的输入框输入正确的email地址，否则就会有一个错误提示，并且无法提交。需要注意的是，该类型在Opera中使用时，必须指定name属性的值，否则没有email类型的效果。
③新増表单属性
HTML5表单还新增了一些表单属性，比如placeholder、require/pattem、autofocus、list、max/min/step、autocomplete等。其中最实用的莫过于placeholder和max/min/step了。placeholder属性：<input type="text" placeholder="xxxx">
placeholder非常实用，不仅可以在表单中加入初始值，而且免去了通过js来控制删除初始值的麻烦，各个浏览器的支持度也非常不错。
4 结语
Web开发技术在不断发展，HTML语言也在在發展过程中更加规范并更易于使用。在移动互联时代，用户趋于年轻化，对于丰富的内容、更好的用户体验以及交互的媒体应用表示有更强烈的需求，为满足这些，关键在于技术的改进与提升。技术的进步也为APP的开发提供了更开放和更容易采用的技术支持。
1 移动应用开发技术的演变过程
移动应用开发技术的发展，分为三个阶段：早期的WAP（包括WAP1.0和WAP2.0）网站到目前流行的原生应用（NativeApplication），后变为以HTML5标准为基础的Web App。1998年，遵循WAP1.0协议的无线标记语言WML诞生，成为低功耗手机访问网站的标准设计语言。随着移动终端和互联网的发展，WAP2.0协议诞生，并出现了XHTML标记语言，较之WML，XHTML支持所有移动平台，适用于大部分智能移动终端，而且支持JavaScript、CSS 等交互技术，用户体验良好。
2008 年，HTML5标准草案颁布，有为移动应用开发提供了新的技术方案。2010年，苹果宣布其移动设备不支持Flash插件后，HTML5标准很快成为移动网站打造更加美观的网页应用的首选。为了响应移动互联应用“富内容、富交互、富体验、跨平台”的要求，HTML5与HTML4相比之下做了大幅的改善。最突出的特點是：支持离线访问、支持全媒体内容展示、支持交互式的2D/3D图像渲染、提供丰富的API以调用移动设备的硬件。这使得HTML5可以实现堪比Native App效果的Web App，而且，其具有更优越的安全性、跨平台访问性。更重要的是，Web App开发难度较之NativeApp大幅降低，易用性更高。
2.HTML5：移动应用开发的新潮流
从HTML4 到HTML5的提出，此过程经历了十年的变革，还是质量的大幅度飞跃。HTML5 彻底抛弃了HTML4 以网页文本为主的特点及功能，基于HTML5开发的Web App，在不借助第三方插件的情况下，能够实现丰富的交互操作以及多线程处理，这使得Web App能够完成复杂的操作任务。相比于以往的开发模式，基于HTML5 的 Web App 模式是更加理想的移动应用开发方案。
（1）相比于早期的WAP2.0标准以及近年新兴的Native App构建方案，HTML5标准具有明显的优势。WAP2.0是对WAP1.0的改进，其初衷是针对低能耗、低流量手机提供移动应用开发标准，虽然WAP2.0在功能及表现力上有所改善，但是，对于当前主流的智能移动终端的强大性能仍然欠缺支持。Native App是适应移动智能终端的开发方案，能够充分发挥设备的性能，为用户提供诸多新颖有趣的使用体验。但是，Native App高度绑定于移动操作系统，存在开发难度大、部署应用不便的缺陷。相对而言，HTML5是基于B/S架构的标准，不存在Native App的固有缺点，具有良好的跨平台统一性，而且，HTML5功能强全面，为开发者提供了丰富的移动应用开发标准，弥补了WAP 标准功能弱小的不足。总体而言，基于HTML5 的移动应用开发方案具有开发难度低、功能丰富、部署应用简易、跨平台访问便捷的优势。
（2）HTML5 大幅降低了移动应用开发的技术门槛。经过 PC 时代的互联网应用开发，对HTML标准下的应用开发技术与流程已经十分熟悉。HTML5继续沿用HTML4时代的开发部署方案，相对于全新的 NativeApp 构建方案，基于HTML5的移动应用开发更容易被技术人员接纳。
（3）基于HTML5的Web App开发为APP开发建设注入活力。2008年以来，随着智能移动设备的迅速普及，逐渐将移动服务的重点转移到移动应用程序开发和移动网站用户体验优化上面。但是，由于此前的移动应用开发难度大，真正参与移动应用开发的程度不高，移动应用服务基本来自于软件公司的产品。HTML5 标准的颁布有力地改变了这种局面，对于功能多样、体系复杂的移动应用适宜购买，而对于开发难度较低、个性化程度高的移动应用适宜自建。HTML5标准将以其易用、开放、强大的特点，成为共建WebApp的通用标准。
3 HTML5的关键技术介绍
3.1 HTML5 canvas技术
Canvas 是最强大的API之一，Canvas最先由苹果公司推出，在safari浏览器1.3版本中加入。Canvas—经推出便引来众多厂商注目，这使得在W沈环境下不依赖插件而处理和绘制图像成为了可能。Mozilla和Opera也立即加入canvas阵营，在Firefox1.5和Opera9引入了canvas。过去通过FLASH等插件实现的动画，现在只需使用JavaScript就能够实现。Canvas对于WebApp开发意义重大，也是HTML5中最受关注的功能之一。Canvas绘图API主要是通过context进行绘画和图像处理，将整个操作定义在一个getContext（）方法上。开发者通过这个context进行操作图像元素。
3.2 HTML5离线应用技术
离线应用是指在脱离网络连接的环境下，Web App依然能够进行数据存储与交换业务，从而保证程序的正常运行。这项技术使得Web App克服了过去离线即瘫痪的局限，应用适应性更强。在开发中，该技术涉及以下三种功能实现：①离线资源缓存。HTML5通过CacheManifest缓存清单指明Web App在离线工作时所需的资源文件，并支持自动和手动两种缓存更新方式。②在线状态检测。HTML5 提供了HTML5提供了Navigator.online屬性值判断和Online/Offline事件监控两种检测方式。③本地数据存储。HTML5提供Web Storage和Web SQLDatabase两种存储机制：Web Storage是在客户端以key-value形式保存数据的功能，类似于HTML4中的Cookie，但安全性更好;Web SQLDatabase是HTML5草案中追加的新功能，它允许用户在客户端通过JavaScript操作数据库。 3.3 HTML5 Device API 技术
HTML5 Device API主要包括访问设备摄像头和麦克风的Media Capture API和地理位置定位Gelocation API。Geolocation地理位置定位API是HTML5的重要组成部分。HTML5提供了地理位置定位API，在W沈应用中调用此API，就能够获取用户的当前位置，非常便捷。浏览器获取设备的坐标信息主要有四种方式：巧地址定位、WiFi定位、GPS全球定位和GSM网络定位。四种方法中GPS定位最为准确，IP地址定位误差最大。浏览器究竟使用哪种方法，主要依赖设备本身和设备是如何联网的。如果使用的是移动设备，而且参数enableHighAccura巧的值为true时，就会优先采用邸S定位，若设备没有GPS芯片，但设备是通過W姐上网就使用wifi定位，同样如果是通过3G上网就使用GSM定位。IP定位是最后才采用的方法
3.4 HTML5的表单技术
在Web应用中，使用HTML、javascript来实现用户输入信息是基础。但移动设备上键盘受限为用户输入信息构成了一定的影响。HTML5工作组根据用户遇到的一些问题给出了一套方案用来优化用户的输入方式。HTML5中对于表单做了一些功能的更新：
①表单结构更自由
在HTML4.0和XHTML中表单元素必须要放在<form>之中，比如<input>、<select>等。但是，在HTML5中，新增的表单元素不需要这么刻板，在文档中任意位置都可，只需要将id指向所属表单的id即可，这看似没什么大用，但在实际开发中，如果代码量比技大，在后期维护更新时，就不需要专口找到form的所在位置，只要知道他的id就行，可以节省不少时间。
②多样的输入类型
为了方便移动端用户的输入和降低移动端开发的繁琐度，HTML5表单引入了许多输入类型。最具代表性的就是email、姐、date、search和color等。例如：email类型：<input type="emair/>表单中引入email类型之后，用户就必须在相应的输入框输入正确的email地址，否则就会有一个错误提示，并且无法提交。需要注意的是，该类型在Opera中使用时，必须指定name属性的值，否则没有email类型的效果。
③新増表单属性
HTML5表单还新增了一些表单属性，比如placeholder、require/pattem、autofocus、list、max/min/step、autocomplete等。其中最实用的莫过于placeholder和max/min/step了。placeholder属性：<input type="text" placeholder="xxxx">
placeholder非常实用，不仅可以在表单中加入初始值，而且免去了通过js来控制删除初始值的麻烦，各个浏览器的支持度也非常不错。
4 结语
Web开发技术在不断发展，HTML语言也在在發展过程中更加规范并更易于使用。在移动互联时代，用户趋于年轻化，对于丰富的内容、更好的用户体验以及交互的媒体应用表示有更强烈的需求，为满足这些，关键在于技术的改进与提升。技术的进步也为APP的开发提供了更开放和更容易采用的技术支持。