HTML5的新特性及其在基于Web的教學平臺開發(fā)中的應用前景

摘要：HTML是Web編程中的基礎語言，絕大多數(shù)遠程教學平臺都是基于Web的，在移動互聯(lián)網(wǎng)時代，由于Web部署上的優(yōu)勢，越來越多的應用系統(tǒng)也將會轉(zhuǎn)移到Web上來。然而，目前所廣泛使用的HTML4.01推出已有十多年時間，它本身的缺陷表現(xiàn)得愈加明顯，它逐漸成為了Web發(fā)展的制約因素。盡管HTML5還處于不斷完善階段，但在IE、Firefox、Opera等新版PC瀏覽器已支持絕大部分HTML 5功能，移動設備的瀏覽器對HTML5支持情況更好。HTML5新開放的API、新增的標記及離線支持等特性能顯著提升Web應用的開發(fā)效率。該文介紹了HTML 5中新增標記的富媒體特性，探討了表單及離線支持等特性并簡要分析了HTML5在教學平臺開發(fā)中的應用前景。

關鍵詞： 教學平臺；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

遠程教學系統(tǒng)具備網(wǎng)絡資源整合、多媒體信息展示、智能信息處理等能力，它為學習者提供了一個群學、開放的學習環(huán)境。遠程教學系統(tǒng)良好的用戶界面（UI）設計、功能設計、交互設計、用戶體驗設計能幫助學習者在使用過程中形成正確的空間感和方向感。由于HTML4.01拋棄了一些重要的UI（如樹型導航菜單），只能借助于JavaScript等腳本語言或插件來實現(xiàn)這些UI功能，從而導致了Web應用系統(tǒng)可視化特性差、交互性差[1]，遠程教學系統(tǒng)普遍存在界面單一、交互性差、用戶體驗差、代碼不規(guī)范、臃腫、維護困難等問題，系統(tǒng)的開發(fā)效率也受到了影響，HTML4.01在富因特網(wǎng)應用時代和移動互聯(lián)網(wǎng)時代局限性越來越明顯。HTML5是下一代超文本標記語言，盡管它還處于不斷完善的階段，但它已經(jīng)得到了包括Internet Explorer、Chrome、Firefox、Opera等新版本瀏覽器的支持，絕大部分功能已經(jīng)在新版瀏覽器中得以實現(xiàn)。

1 HTML5簡介

HTML（HyperText Markup Language）是一種用于網(wǎng)頁創(chuàng)建的標記語言，它是網(wǎng)站開發(fā)的基礎性語言，在“內(nèi)容與表現(xiàn)相分離”的設計原則指導下，HTML用來定義內(nèi)容，CSS（Cascading Style Sheets）用來定義網(wǎng)頁的表現(xiàn)。HTML最近版本是1999年推出的HTML4.01，十年來互聯(lián)網(wǎng)領域已經(jīng)發(fā)生了巨大變化，HTML4.01越來越難以適應新的應用需求，迫切需要添加新功能來適應Web應用開發(fā)的需求。HTML5開始于2004年，隨之產(chǎn)生了Web2.0概念，開創(chuàng)了Web發(fā)展的第二個時代，舊的靜態(tài)網(wǎng)站被具備更多特性的動態(tài)網(wǎng)站和社交網(wǎng)站所取代成為了那時的發(fā)展趨勢，時至今日，在W3C和WHATWG組織的努力下HTML5已經(jīng)得到了越來越多的瀏覽器廠商的支持。

HTML5引入并加強了一系列功能， 包括專門的布局標記、表單控制、 應用程序接口（API）、富媒體特性， 結構化和語義化等，它提供了更靈活、更簡便、更具互操作性的Web應用實現(xiàn)方案。HTML5減少了對外部插件的需求，提供了更多的能取代腳本的標記及具有富媒體特性的標記，HTML5除能在傳統(tǒng)PC端有很好的表現(xiàn)外，在移動設備上具有更優(yōu)秀的表現(xiàn)，它強化了Web的表現(xiàn)性能并增強了本地數(shù)據(jù)庫等Web應用功能，可以說在移動互聯(lián)網(wǎng)時代它給HTML標記語言注入了新的生命力。

2 HTML 5新增標記及其富媒體特性

HTML4.01拋棄了一些重要的UI，一些類Windows控件只能依賴JavaScript等腳本語言或者本地繪圖API實現(xiàn)，這影響了應用系統(tǒng)的開發(fā)效率，并且腳本通常是解釋執(zhí)行的，效率低且受制于瀏覽器端的設置。

以音、視頻播放為例，在HTML4.01中大多數(shù)音、視頻播放是通過插件來實現(xiàn)的，這種實現(xiàn)方式要求在瀏覽器端安裝插件，對于Web應用系統(tǒng)來說存在著部署問題，瀏覽器端的插件還可能被禁用或屏蔽，使用插件還存在邊界、剪裁和透明度等用戶體驗問題，可以說弊端很多。然而，HTML5時代的瀏覽器能提供原生的支持音、視頻能力，對外置插件的有效性依賴性已不再重要，在HTML5中可通過在網(wǎng)頁中加入Video標記來方便地嵌入視頻，視頻的呈現(xiàn)不需要虛擬機，所需要的計算資源少且頁面的數(shù)據(jù)量也較小，對于移動設備來說，響應將更快，從而帶來了更好的用戶體驗。endprint

Video標記支持width、height、autoplay、preload、controls等屬性來實現(xiàn)對視頻窗口外觀設置、視頻文件的預加載及播放控制，Audio標記則提供了對音頻文件的支持。圖1中

HTML4.01依賴于Cookie來實現(xiàn)客戶端數(shù)據(jù)存儲，然而在客戶端為Cookie所分配的空間只有4KB，Cookie不適合大量數(shù)據(jù)的存儲，而將大量數(shù)據(jù)存儲在服務器端通常效率低下，這也成為了Web應用系統(tǒng)的瓶頸。HTML5的這種離線支持對于交互式Web應用來說至關重要，它已經(jīng)被Firefox、Safari、Chrome等廣泛的瀏覽器所實現(xiàn)。

HTML5通過在html標記的manifest屬性中指定cache.manifest文件為Web應用在網(wǎng)絡斷開時使用的資源清單，瀏覽器依據(jù)清單緩存這些資源到本地，chche.manifest文件也可指出哪些資源是需要在線訪問的。

HTML5開放了DOM Storage API，localStorage與sessionStorage對象實現(xiàn)了該接口，這兩個對象的生命周期不同，前者在瀏覽器端能持久存儲數(shù)據(jù)，而后者僅用來存儲與會話相關的數(shù)據(jù)，它的生命周期是某次客戶機與服務器的交互會話期。localStorage對象實現(xiàn)了數(shù)據(jù)的本地存儲，通過它能方便地從服務器端高速緩存數(shù)據(jù)，從而能減少對服務器的數(shù)據(jù)請求次數(shù)，提高了Web應用的響應速度，它還能跨多個用戶會話共享數(shù)據(jù)以此實現(xiàn)對用戶行為的跟蹤及個性化服務的提供。

DOM Storage API采用“名/值”數(shù)據(jù)結構，常用方法及作用如下：

1）getItem（name）：用以返回與name名稱相關聯(lián)的值；

2）setItem（name，value）：新增或更改“名/值”對到localStorage結構中；

3）removeItem（name）：從localStorage中刪除“名/值”對。

除sessionStorate和localStorage方式外，HTML5還提供了Web SQL Database數(shù)據(jù)存儲方式來實現(xiàn)常用的關系型數(shù)據(jù)庫功能，如在瀏覽器端創(chuàng)建或打開sqllite數(shù)據(jù)庫、創(chuàng)建或打開表、執(zhí)行SQL語句等。Web SQL Database 還支持數(shù)據(jù)庫事務操作，實現(xiàn)事務的提交或回滾，從而避免多瀏覽器操作相同數(shù)據(jù)時的沖突問題，圖4是在瀏覽器端創(chuàng)建數(shù)據(jù)庫的代碼。目前，DOM Storage API及Web SQL Database已經(jīng)在國內(nèi)的一些門戶網(wǎng)站中得到了應用。

基于Web的遠程教學平臺非常依賴來自Internet的數(shù)據(jù)和服務，傳統(tǒng)Web應用中經(jīng)常因為網(wǎng)絡連接的原因而不能正常使用系統(tǒng)功能，而HTML 5離線存儲功能能使Web應用程序具備類似于桌面應用程序的能力。此外，離線功能還支持盡可能多地緩存HTML、JavaScript、CSS、圖像等資源，當某次會話需要這些資源時能實現(xiàn)迅速加載。

5 總結與展望

隨著互聯(lián)網(wǎng)的影響不斷擴大，基于B/S架構的Web應用得到了迅猛的發(fā)展，B/S應用領域越來越廣泛。Web發(fā)展經(jīng)歷了以HTML為代表的標記語言、以CSS為代表的樣式語言及以JavaScript為代表的程序設計語言、以ASP為代表的服務器端環(huán)境。Web發(fā)展的下一階段將是以HTML 5為代表的富因特網(wǎng)應用，它會顯著提升Web應用的表現(xiàn)能力，文中僅介紹了HTML 5部分特性，HTML5規(guī)范中還包含很多功能強大的特性，例如實現(xiàn)“推送”功能的Server-Sent Event和WebSockets特性，這些特性能將瀏覽器變成功能完善的RIA客戶端平臺。RIA應用的興起必將促使過時而低效的傳統(tǒng)Web應用開發(fā)框架盡早退出歷史舞臺。

近年，Web技術在遠程教育領域得到了廣泛應用，基于HTML5的B/S架構具有“零部署”的優(yōu)點，又具有C/S架構功能強大、表現(xiàn)力豐富的優(yōu)點，它更能滿足遠程教學平臺開發(fā)的需求，在移動互聯(lián)網(wǎng)時代有著巨大的應用潛力，勢必引起越來越多的瀏覽器廠商支持及開發(fā)者的關注。HTML5結合CSS3具有較高的應用系統(tǒng)開發(fā)效率及卓越的運行效率、且支持離線運行，發(fā)展前景樂觀。

參考文獻：

[1] 錢鈺.基于Flex的RIA 技術在教學軟件中的應用[J].計算機與數(shù)字工程，2009（5）：160-163.

[2] Jesse James Garrett. 用戶體驗的要素[M].北京：機械工業(yè)出版社， 2007.

[3] 呂曉鵬.Flex3.0——基于ActionScript3.0實現(xiàn)[M].北京：人民郵電出版社，2008.

[4] 王沛.征服Ajax——Web2.0開發(fā)技術詳解[M]. 北京：人民郵電出版社，2006.

[5] 前沿科技. 精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007.

[6] James Kalbach. Web導航設計[M].北京：電子工業(yè)出版社，2009.

[7] Kristofer Layon.移動Web實現(xiàn)指南[M].北京：人民郵電出版社，2012.endprint

HTML4.01依賴于Cookie來實現(xiàn)客戶端數(shù)據(jù)存儲，然而在客戶端為Cookie所分配的空間只有4KB，Cookie不適合大量數(shù)據(jù)的存儲，而將大量數(shù)據(jù)存儲在服務器端通常效率低下，這也成為了Web應用系統(tǒng)的瓶頸。HTML5的這種離線支持對于交互式Web應用來說至關重要，它已經(jīng)被Firefox、Safari、Chrome等廣泛的瀏覽器所實現(xiàn)。

HTML5通過在html標記的manifest屬性中指定cache.manifest文件為Web應用在網(wǎng)絡斷開時使用的資源清單，瀏覽器依據(jù)清單緩存這些資源到本地，chche.manifest文件也可指出哪些資源是需要在線訪問的。

HTML5開放了DOM Storage API，localStorage與sessionStorage對象實現(xiàn)了該接口，這兩個對象的生命周期不同，前者在瀏覽器端能持久存儲數(shù)據(jù)，而后者僅用來存儲與會話相關的數(shù)據(jù)，它的生命周期是某次客戶機與服務器的交互會話期。localStorage對象實現(xiàn)了數(shù)據(jù)的本地存儲，通過它能方便地從服務器端高速緩存數(shù)據(jù)，從而能減少對服務器的數(shù)據(jù)請求次數(shù)，提高了Web應用的響應速度，它還能跨多個用戶會話共享數(shù)據(jù)以此實現(xiàn)對用戶行為的跟蹤及個性化服務的提供。

DOM Storage API采用“名/值”數(shù)據(jù)結構，常用方法及作用如下：

1）getItem（name）：用以返回與name名稱相關聯(lián)的值；

2）setItem（name，value）：新增或更改“名/值”對到localStorage結構中；

3）removeItem（name）：從localStorage中刪除“名/值”對。

除sessionStorate和localStorage方式外，HTML5還提供了Web SQL Database數(shù)據(jù)存儲方式來實現(xiàn)常用的關系型數(shù)據(jù)庫功能，如在瀏覽器端創(chuàng)建或打開sqllite數(shù)據(jù)庫、創(chuàng)建或打開表、執(zhí)行SQL語句等。Web SQL Database 還支持數(shù)據(jù)庫事務操作，實現(xiàn)事務的提交或回滾，從而避免多瀏覽器操作相同數(shù)據(jù)時的沖突問題，圖4是在瀏覽器端創(chuàng)建數(shù)據(jù)庫的代碼。目前，DOM Storage API及Web SQL Database已經(jīng)在國內(nèi)的一些門戶網(wǎng)站中得到了應用。

基于Web的遠程教學平臺非常依賴來自Internet的數(shù)據(jù)和服務，傳統(tǒng)Web應用中經(jīng)常因為網(wǎng)絡連接的原因而不能正常使用系統(tǒng)功能，而HTML 5離線存儲功能能使Web應用程序具備類似于桌面應用程序的能力。此外，離線功能還支持盡可能多地緩存HTML、JavaScript、CSS、圖像等資源，當某次會話需要這些資源時能實現(xiàn)迅速加載。

5 總結與展望

隨著互聯(lián)網(wǎng)的影響不斷擴大，基于B/S架構的Web應用得到了迅猛的發(fā)展，B/S應用領域越來越廣泛。Web發(fā)展經(jīng)歷了以HTML為代表的標記語言、以CSS為代表的樣式語言及以JavaScript為代表的程序設計語言、以ASP為代表的服務器端環(huán)境。Web發(fā)展的下一階段將是以HTML 5為代表的富因特網(wǎng)應用，它會顯著提升Web應用的表現(xiàn)能力，文中僅介紹了HTML 5部分特性，HTML5規(guī)范中還包含很多功能強大的特性，例如實現(xiàn)“推送”功能的Server-Sent Event和WebSockets特性，這些特性能將瀏覽器變成功能完善的RIA客戶端平臺。RIA應用的興起必將促使過時而低效的傳統(tǒng)Web應用開發(fā)框架盡早退出歷史舞臺。

近年，Web技術在遠程教育領域得到了廣泛應用，基于HTML5的B/S架構具有“零部署”的優(yōu)點，又具有C/S架構功能強大、表現(xiàn)力豐富的優(yōu)點，它更能滿足遠程教學平臺開發(fā)的需求，在移動互聯(lián)網(wǎng)時代有著巨大的應用潛力，勢必引起越來越多的瀏覽器廠商支持及開發(fā)者的關注。HTML5結合CSS3具有較高的應用系統(tǒng)開發(fā)效率及卓越的運行效率、且支持離線運行，發(fā)展前景樂觀。

參考文獻：

[1] 錢鈺.基于Flex的RIA 技術在教學軟件中的應用[J].計算機與數(shù)字工程，2009（5）：160-163.

[2] Jesse James Garrett. 用戶體驗的要素[M].北京：機械工業(yè)出版社， 2007.

[3] 呂曉鵬.Flex3.0——基于ActionScript3.0實現(xiàn)[M].北京：人民郵電出版社，2008.

[4] 王沛.征服Ajax——Web2.0開發(fā)技術詳解[M]. 北京：人民郵電出版社，2006.

[5] 前沿科技. 精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007.

[6] James Kalbach. Web導航設計[M].北京：電子工業(yè)出版社，2009.

[7] Kristofer Layon.移動Web實現(xiàn)指南[M].北京：人民郵電出版社，2012.endprint

HTML4.01依賴于Cookie來實現(xiàn)客戶端數(shù)據(jù)存儲，然而在客戶端為Cookie所分配的空間只有4KB，Cookie不適合大量數(shù)據(jù)的存儲，而將大量數(shù)據(jù)存儲在服務器端通常效率低下，這也成為了Web應用系統(tǒng)的瓶頸。HTML5的這種離線支持對于交互式Web應用來說至關重要，它已經(jīng)被Firefox、Safari、Chrome等廣泛的瀏覽器所實現(xiàn)。

HTML5通過在html標記的manifest屬性中指定cache.manifest文件為Web應用在網(wǎng)絡斷開時使用的資源清單，瀏覽器依據(jù)清單緩存這些資源到本地，chche.manifest文件也可指出哪些資源是需要在線訪問的。

HTML5開放了DOM Storage API，localStorage與sessionStorage對象實現(xiàn)了該接口，這兩個對象的生命周期不同，前者在瀏覽器端能持久存儲數(shù)據(jù)，而后者僅用來存儲與會話相關的數(shù)據(jù)，它的生命周期是某次客戶機與服務器的交互會話期。localStorage對象實現(xiàn)了數(shù)據(jù)的本地存儲，通過它能方便地從服務器端高速緩存數(shù)據(jù)，從而能減少對服務器的數(shù)據(jù)請求次數(shù)，提高了Web應用的響應速度，它還能跨多個用戶會話共享數(shù)據(jù)以此實現(xiàn)對用戶行為的跟蹤及個性化服務的提供。

DOM Storage API采用“名/值”數(shù)據(jù)結構，常用方法及作用如下：

1）getItem（name）：用以返回與name名稱相關聯(lián)的值；

2）setItem（name，value）：新增或更改“名/值”對到localStorage結構中；

3）removeItem（name）：從localStorage中刪除“名/值”對。

除sessionStorate和localStorage方式外，HTML5還提供了Web SQL Database數(shù)據(jù)存儲方式來實現(xiàn)常用的關系型數(shù)據(jù)庫功能，如在瀏覽器端創(chuàng)建或打開sqllite數(shù)據(jù)庫、創(chuàng)建或打開表、執(zhí)行SQL語句等。Web SQL Database 還支持數(shù)據(jù)庫事務操作，實現(xiàn)事務的提交或回滾，從而避免多瀏覽器操作相同數(shù)據(jù)時的沖突問題，圖4是在瀏覽器端創(chuàng)建數(shù)據(jù)庫的代碼。目前，DOM Storage API及Web SQL Database已經(jīng)在國內(nèi)的一些門戶網(wǎng)站中得到了應用。

基于Web的遠程教學平臺非常依賴來自Internet的數(shù)據(jù)和服務，傳統(tǒng)Web應用中經(jīng)常因為網(wǎng)絡連接的原因而不能正常使用系統(tǒng)功能，而HTML 5離線存儲功能能使Web應用程序具備類似于桌面應用程序的能力。此外，離線功能還支持盡可能多地緩存HTML、JavaScript、CSS、圖像等資源，當某次會話需要這些資源時能實現(xiàn)迅速加載。

5 總結與展望

隨著互聯(lián)網(wǎng)的影響不斷擴大，基于B/S架構的Web應用得到了迅猛的發(fā)展，B/S應用領域越來越廣泛。Web發(fā)展經(jīng)歷了以HTML為代表的標記語言、以CSS為代表的樣式語言及以JavaScript為代表的程序設計語言、以ASP為代表的服務器端環(huán)境。Web發(fā)展的下一階段將是以HTML 5為代表的富因特網(wǎng)應用，它會顯著提升Web應用的表現(xiàn)能力，文中僅介紹了HTML 5部分特性，HTML5規(guī)范中還包含很多功能強大的特性，例如實現(xiàn)“推送”功能的Server-Sent Event和WebSockets特性，這些特性能將瀏覽器變成功能完善的RIA客戶端平臺。RIA應用的興起必將促使過時而低效的傳統(tǒng)Web應用開發(fā)框架盡早退出歷史舞臺。

近年，Web技術在遠程教育領域得到了廣泛應用，基于HTML5的B/S架構具有“零部署”的優(yōu)點，又具有C/S架構功能強大、表現(xiàn)力豐富的優(yōu)點，它更能滿足遠程教學平臺開發(fā)的需求，在移動互聯(lián)網(wǎng)時代有著巨大的應用潛力，勢必引起越來越多的瀏覽器廠商支持及開發(fā)者的關注。HTML5結合CSS3具有較高的應用系統(tǒng)開發(fā)效率及卓越的運行效率、且支持離線運行，發(fā)展前景樂觀。

參考文獻：

[1] 錢鈺.基于Flex的RIA 技術在教學軟件中的應用[J].計算機與數(shù)字工程，2009（5）：160-163.

[2] Jesse James Garrett. 用戶體驗的要素[M].北京：機械工業(yè)出版社， 2007.

[3] 呂曉鵬.Flex3.0——基于ActionScript3.0實現(xiàn)[M].北京：人民郵電出版社，2008.

[4] 王沛.征服Ajax——Web2.0開發(fā)技術詳解[M]. 北京：人民郵電出版社，2006.

[5] 前沿科技. 精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007.

[6] James Kalbach. Web導航設計[M].北京：電子工業(yè)出版社，2009.

[7] Kristofer Layon.移動Web實現(xiàn)指南[M].北京：人民郵電出版社，2012.endprint