HTML5的新特性及其在基于Web的教学平台开发中的应用前景

摘要：HTML是Web编程中的基础语言，绝大多数远程教学平台都是基于Web的，在移动互联网时代，由于Web部署上的优势，越来越多的应用系统也将会转移到Web上来。然而，目前所广泛使用的HTML4.01推出已有十多年时间，它本身的缺陷表现得愈加明显，它逐渐成为了Web发展的制约因素。尽管HTML5还处于不断完善阶段，但在IE、Firefox、Opera等新版PC浏览器已支持绝大部分HTML 5功能，移动设备的浏览器对HTML5支持情况更好。HTML5新开放的API、新增的标记及离线支持等特性能显著提升Web应用的开发效率。该文介绍了HTML 5中新增标记的富媒体特性，探讨了表单及离线支持等特性并简要分析了HTML5在教学平台开发中的应用前景。

关键词： 教学平台；HTML5；表单；富媒体；离线支持；Web应用

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）16-3829-03

Abstract： HTML is the basic language for web programming， most distance education systems are web-based， with the wide usage of new technologies， more and more applications will be transferred to web. However， the currently widely used HTML4.01 has been available for more than ten years， It exposes an increasing number of defects. Although HTML5 standard is still in a developing stage， but IE， Firefox， Opera and other browsers has partially supported HTML 5s features， HTML5 newly open APIs， new markups and offline support and other features can significantly improve the efficiency of Web application development. This article describes the newly added HTML5 tags， form and characteristics of offline support and their application in the development of distance education systems.

Key words： Distance Teaching Platform；HTML5；RIA；offline support； web application

远程教学系统具备网络资源整合、多媒体信息展示、智能信息处理等能力，它为学习者提供了一个群学、开放的学习环境。远程教学系统良好的用户界面（UI）设计、功能设计、交互设计、用户体验设计能帮助学习者在使用过程中形成正确的空间感和方向感。由于HTML4.01抛弃了一些重要的UI（如树型导航菜单），只能借助于JavaScript等脚本语言或插件来实现这些UI功能，从而导致了Web应用系统可视化特性差、交互性差[1]，远程教学系统普遍存在界面单一、交互性差、用户体验差、代码不规范、臃肿、维护困难等问题，系统的开发效率也受到了影响，HTML4.01在富因特网应用时代和移动互联网时代局限性越来越明显。HTML5是下一代超文本标记语言，尽管它还处于不断完善的阶段，但它已经得到了包括Internet Explorer、Chrome、Firefox、Opera等新版本浏览器的支持，绝大部分功能已经在新版浏览器中得以实现。

1 HTML5简介

HTML（HyperText Markup Language）是一种用于网页创建的标记语言，它是网站开发的基础性语言，在“内容与表现相分离”的设计原则指导下，HTML用来定义内容，CSS（Cascading Style Sheets）用来定义网页的表现。HTML最近版本是1999年推出的HTML4.01，十年来互联网领域已经发生了巨大变化，HTML4.01越来越难以适应新的应用需求，迫切需要添加新功能来适应Web应用开发的需求。HTML5开始于2004年，随之产生了Web2.0概念，开创了Web发展的第二个时代，旧的静态网站被具备更多特性的动态网站和社交网站所取代成为了那时的发展趋势，时至今日，在W3C和WHATWG组织的努力下HTML5已经得到了越来越多的浏览器厂商的支持。

HTML5引入并加强了一系列功能， 包括专门的布局标记、表单控制、 应用程序接口（API）、富媒体特性， 结构化和语义化等，它提供了更灵活、更简便、更具互操作性的Web应用实现方案。HTML5减少了对外部插件的需求，提供了更多的能取代脚本的标记及具有富媒体特性的标记，HTML5除能在传统PC端有很好的表现外，在移动设备上具有更优秀的表现，它强化了Web的表现性能并增强了本地数据库等Web应用功能，可以说在移动互联网时代它给HTML标记语言注入了新的生命力。

2 HTML 5新增标记及其富媒体特性

HTML4.01抛弃了一些重要的UI，一些类Windows控件只能依赖JavaScript等脚本语言或者本地绘图API实现，这影响了应用系统的开发效率，并且脚本通常是解释执行的，效率低且受制于浏览器端的设置。

以音、视频播放为例，在HTML4.01中大多数音、视频播放是通过插件来实现的，这种实现方式要求在浏览器端安装插件，对于Web应用系统来说存在着部署问题，浏览器端的插件还可能被禁用或屏蔽，使用插件还存在边界、剪裁和透明度等用户体验问题，可以说弊端很多。然而，HTML5时代的浏览器能提供原生的支持音、视频能力，对外置插件的有效性依赖性已不再重要，在HTML5中可通过在网页中加入Video标记来方便地嵌入视频，视频的呈现不需要虚拟机，所需要的计算资源少且页面的数据量也较小，对于移动设备来说，响应将更快，从而带来了更好的用户体验。endprint

Video标记支持width、height、autoplay、preload、controls等属性来实现对视频窗口外观设置、视频文件的预加载及播放控制，Audio标记则提供了对音频文件的支持。图1中

HTML4.01依赖于Cookie来实现客户端数据存储，然而在客户端为Cookie所分配的空间只有4KB，Cookie不适合大量数据的存储，而将大量数据存储在服务器端通常效率低下，这也成为了Web应用系统的瓶颈。HTML5的这种离线支持对于交互式Web应用来说至关重要，它已经被Firefox、Safari、Chrome等广泛的浏览器所实现。

HTML5通过在html标记的manifest属性中指定cache.manifest文件为Web应用在网络断开时使用的资源清单，浏览器依据清单缓存这些资源到本地，chche.manifest文件也可指出哪些资源是需要在线访问的。

HTML5开放了DOM Storage API，localStorage与sessionStorage对象实现了该接口，这两个对象的生命周期不同，前者在浏览器端能持久存储数据，而后者仅用来存储与会话相关的数据，它的生命周期是某次客户机与服务器的交互会话期。localStorage对象实现了数据的本地存储，通过它能方便地从服务器端高速缓存数据，从而能减少对服务器的数据请求次数，提高了Web应用的响应速度，它还能跨多个用户会话共享数据以此实现对用户行为的跟踪及个性化服务的提供。

DOM Storage API采用“名/值”数据结构，常用方法及作用如下：

1）getItem（name）：用以返回与name名称相关联的值；

2）setItem（name，value）：新增或更改“名/值”对到localStorage结构中；

3）removeItem（name）：从localStorage中删除“名/值”对。

除sessionStorate和localStorage方式外，HTML5还提供了Web SQL Database数据存储方式来实现常用的关系型数据库功能，如在浏览器端创建或打开sqllite数据库、创建或打开表、执行SQL语句等。Web SQL Database 还支持数据库事务操作，实现事务的提交或回滚，从而避免多浏览器操作相同数据时的冲突问题，图4是在浏览器端创建数据库的代码。目前，DOM Storage API及Web SQL Database已经在国内的一些门户网站中得到了应用。

基于Web的远程教学平台非常依赖来自Internet的数据和服务，传统Web应用中经常因为网络连接的原因而不能正常使用系统功能，而HTML 5离线存储功能能使Web应用程序具备类似于桌面应用程序的能力。此外，离线功能还支持尽可能多地缓存HTML、JavaScript、CSS、图像等资源，当某次会话需要这些资源时能实现迅速加载。

5 总结与展望

随着互联网的影响不断扩大，基于B/S架构的Web应用得到了迅猛的发展，B/S应用领域越来越广泛。Web发展经历了以HTML为代表的标记语言、以CSS为代表的样式语言及以JavaScript为代表的程序设计语言、以ASP为代表的服务器端环境。Web发展的下一阶段将是以HTML 5为代表的富因特网应用，它会显著提升Web应用的表现能力，文中仅介绍了HTML 5部分特性，HTML5规范中还包含很多功能强大的特性，例如实现“推送”功能的Server-Sent Event和WebSockets特性，这些特性能将浏览器变成功能完善的RIA客户端平台。RIA应用的兴起必将促使过时而低效的传统Web应用开发框架尽早退出历史舞台。

近年，Web技术在远程教育领域得到了广泛应用，基于HTML5的B/S架构具有“零部署”的优点，又具有C/S架构功能强大、表现力丰富的优点，它更能满足远程教学平台开发的需求，在移动互联网时代有着巨大的应用潜力，势必引起越来越多的浏览器厂商支持及开发者的关注。HTML5结合CSS3具有较高的应用系统开发效率及卓越的运行效率、且支持离线运行，发展前景乐观。

参考文献：

[1] 钱钰.基于Flex的RIA 技术在教学软件中的应用[J].计算机与数字工程，2009（5）：160-163.

[2] Jesse James Garrett. 用户体验的要素[M].北京：机械工业出版社， 2007.

[3] 吕晓鹏.Flex3.0——基于ActionScript3.0实现[M].北京：人民邮电出版社，2008.

[4] 王沛.征服Ajax——Web2.0开发技术详解[M]. 北京：人民邮电出版社，2006.

[5] 前沿科技. 精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007.

[6] James Kalbach. Web导航设计[M].北京：电子工业出版社，2009.

[7] Kristofer Layon.移动Web实现指南[M].北京：人民邮电出版社，2012.endprint

HTML4.01依赖于Cookie来实现客户端数据存储，然而在客户端为Cookie所分配的空间只有4KB，Cookie不适合大量数据的存储，而将大量数据存储在服务器端通常效率低下，这也成为了Web应用系统的瓶颈。HTML5的这种离线支持对于交互式Web应用来说至关重要，它已经被Firefox、Safari、Chrome等广泛的浏览器所实现。

HTML5通过在html标记的manifest属性中指定cache.manifest文件为Web应用在网络断开时使用的资源清单，浏览器依据清单缓存这些资源到本地，chche.manifest文件也可指出哪些资源是需要在线访问的。

HTML5开放了DOM Storage API，localStorage与sessionStorage对象实现了该接口，这两个对象的生命周期不同，前者在浏览器端能持久存储数据，而后者仅用来存储与会话相关的数据，它的生命周期是某次客户机与服务器的交互会话期。localStorage对象实现了数据的本地存储，通过它能方便地从服务器端高速缓存数据，从而能减少对服务器的数据请求次数，提高了Web应用的响应速度，它还能跨多个用户会话共享数据以此实现对用户行为的跟踪及个性化服务的提供。

DOM Storage API采用“名/值”数据结构，常用方法及作用如下：

1）getItem（name）：用以返回与name名称相关联的值；

2）setItem（name，value）：新增或更改“名/值”对到localStorage结构中；

3）removeItem（name）：从localStorage中删除“名/值”对。

除sessionStorate和localStorage方式外，HTML5还提供了Web SQL Database数据存储方式来实现常用的关系型数据库功能，如在浏览器端创建或打开sqllite数据库、创建或打开表、执行SQL语句等。Web SQL Database 还支持数据库事务操作，实现事务的提交或回滚，从而避免多浏览器操作相同数据时的冲突问题，图4是在浏览器端创建数据库的代码。目前，DOM Storage API及Web SQL Database已经在国内的一些门户网站中得到了应用。

基于Web的远程教学平台非常依赖来自Internet的数据和服务，传统Web应用中经常因为网络连接的原因而不能正常使用系统功能，而HTML 5离线存储功能能使Web应用程序具备类似于桌面应用程序的能力。此外，离线功能还支持尽可能多地缓存HTML、JavaScript、CSS、图像等资源，当某次会话需要这些资源时能实现迅速加载。

5 总结与展望

随着互联网的影响不断扩大，基于B/S架构的Web应用得到了迅猛的发展，B/S应用领域越来越广泛。Web发展经历了以HTML为代表的标记语言、以CSS为代表的样式语言及以JavaScript为代表的程序设计语言、以ASP为代表的服务器端环境。Web发展的下一阶段将是以HTML 5为代表的富因特网应用，它会显著提升Web应用的表现能力，文中仅介绍了HTML 5部分特性，HTML5规范中还包含很多功能强大的特性，例如实现“推送”功能的Server-Sent Event和WebSockets特性，这些特性能将浏览器变成功能完善的RIA客户端平台。RIA应用的兴起必将促使过时而低效的传统Web应用开发框架尽早退出历史舞台。

近年，Web技术在远程教育领域得到了广泛应用，基于HTML5的B/S架构具有“零部署”的优点，又具有C/S架构功能强大、表现力丰富的优点，它更能满足远程教学平台开发的需求，在移动互联网时代有着巨大的应用潜力，势必引起越来越多的浏览器厂商支持及开发者的关注。HTML5结合CSS3具有较高的应用系统开发效率及卓越的运行效率、且支持离线运行，发展前景乐观。

参考文献：

[1] 钱钰.基于Flex的RIA 技术在教学软件中的应用[J].计算机与数字工程，2009（5）：160-163.

[2] Jesse James Garrett. 用户体验的要素[M].北京：机械工业出版社， 2007.

[3] 吕晓鹏.Flex3.0——基于ActionScript3.0实现[M].北京：人民邮电出版社，2008.

[4] 王沛.征服Ajax——Web2.0开发技术详解[M]. 北京：人民邮电出版社，2006.

[5] 前沿科技. 精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007.

[6] James Kalbach. Web导航设计[M].北京：电子工业出版社，2009.

[7] Kristofer Layon.移动Web实现指南[M].北京：人民邮电出版社，2012.endprint

HTML4.01依赖于Cookie来实现客户端数据存储，然而在客户端为Cookie所分配的空间只有4KB，Cookie不适合大量数据的存储，而将大量数据存储在服务器端通常效率低下，这也成为了Web应用系统的瓶颈。HTML5的这种离线支持对于交互式Web应用来说至关重要，它已经被Firefox、Safari、Chrome等广泛的浏览器所实现。

HTML5通过在html标记的manifest属性中指定cache.manifest文件为Web应用在网络断开时使用的资源清单，浏览器依据清单缓存这些资源到本地，chche.manifest文件也可指出哪些资源是需要在线访问的。

HTML5开放了DOM Storage API，localStorage与sessionStorage对象实现了该接口，这两个对象的生命周期不同，前者在浏览器端能持久存储数据，而后者仅用来存储与会话相关的数据，它的生命周期是某次客户机与服务器的交互会话期。localStorage对象实现了数据的本地存储，通过它能方便地从服务器端高速缓存数据，从而能减少对服务器的数据请求次数，提高了Web应用的响应速度，它还能跨多个用户会话共享数据以此实现对用户行为的跟踪及个性化服务的提供。

DOM Storage API采用“名/值”数据结构，常用方法及作用如下：

1）getItem（name）：用以返回与name名称相关联的值；

2）setItem（name，value）：新增或更改“名/值”对到localStorage结构中；

3）removeItem（name）：从localStorage中删除“名/值”对。

除sessionStorate和localStorage方式外，HTML5还提供了Web SQL Database数据存储方式来实现常用的关系型数据库功能，如在浏览器端创建或打开sqllite数据库、创建或打开表、执行SQL语句等。Web SQL Database 还支持数据库事务操作，实现事务的提交或回滚，从而避免多浏览器操作相同数据时的冲突问题，图4是在浏览器端创建数据库的代码。目前，DOM Storage API及Web SQL Database已经在国内的一些门户网站中得到了应用。

基于Web的远程教学平台非常依赖来自Internet的数据和服务，传统Web应用中经常因为网络连接的原因而不能正常使用系统功能，而HTML 5离线存储功能能使Web应用程序具备类似于桌面应用程序的能力。此外，离线功能还支持尽可能多地缓存HTML、JavaScript、CSS、图像等资源，当某次会话需要这些资源时能实现迅速加载。

5 总结与展望

随着互联网的影响不断扩大，基于B/S架构的Web应用得到了迅猛的发展，B/S应用领域越来越广泛。Web发展经历了以HTML为代表的标记语言、以CSS为代表的样式语言及以JavaScript为代表的程序设计语言、以ASP为代表的服务器端环境。Web发展的下一阶段将是以HTML 5为代表的富因特网应用，它会显著提升Web应用的表现能力，文中仅介绍了HTML 5部分特性，HTML5规范中还包含很多功能强大的特性，例如实现“推送”功能的Server-Sent Event和WebSockets特性，这些特性能将浏览器变成功能完善的RIA客户端平台。RIA应用的兴起必将促使过时而低效的传统Web应用开发框架尽早退出历史舞台。

近年，Web技术在远程教育领域得到了广泛应用，基于HTML5的B/S架构具有“零部署”的优点，又具有C/S架构功能强大、表现力丰富的优点，它更能满足远程教学平台开发的需求，在移动互联网时代有着巨大的应用潜力，势必引起越来越多的浏览器厂商支持及开发者的关注。HTML5结合CSS3具有较高的应用系统开发效率及卓越的运行效率、且支持离线运行，发展前景乐观。

参考文献：

[1] 钱钰.基于Flex的RIA 技术在教学软件中的应用[J].计算机与数字工程，2009（5）：160-163.

[2] Jesse James Garrett. 用户体验的要素[M].北京：机械工业出版社， 2007.

[3] 吕晓鹏.Flex3.0——基于ActionScript3.0实现[M].北京：人民邮电出版社，2008.

[4] 王沛.征服Ajax——Web2.0开发技术详解[M]. 北京：人民邮电出版社，2006.

[5] 前沿科技. 精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007.

[6] James Kalbach. Web导航设计[M].北京：电子工业出版社，2009.

[7] Kristofer Layon.移动Web实现指南[M].北京：人民邮电出版社，2012.endprint