淺析HTML5的技術(shù)與應(yīng)用模式

姜玉龍

（曲阜師范大學(xué)，山東 日照 276826）

淺析HTML5的技術(shù)與應(yīng)用模式

姜玉龍

（曲阜師范大學(xué)，山東 日照 276826）

HTML5是全新的Web語(yǔ)言標(biāo)準(zhǔn)，其擁有眾多特點(diǎn)與特征，必將會(huì)成為互聯(lián)網(wǎng)核心關(guān)鍵用語(yǔ)之一，同時(shí)也會(huì)帶來新的創(chuàng)新應(yīng)用。HTML5能夠更加明顯地表達(dá)Web前端的內(nèi)容，并且有機(jī)會(huì)將Web前端變?yōu)楣δ芨訌?qiáng)大、性能更加優(yōu)越的平臺(tái)。文章主要針對(duì)HTML5的技術(shù)與應(yīng)用模式進(jìn)行研究。

HTML5；應(yīng)用模式；Web

HTML5并非對(duì)當(dāng)前技術(shù)的全部顛覆，而是通過新特點(diǎn)與優(yōu)勢(shì)來增添一些實(shí)用的新功能。在增加新功能的同時(shí)，能夠保證HTML5對(duì)所有網(wǎng)頁(yè)的兼容性，在提升用戶信息安全性能的同時(shí)改善網(wǎng)頁(yè)渲染的工作效率。針對(duì)HTML5的技術(shù)與應(yīng)用模式進(jìn)行研究，對(duì)于推動(dòng)HTML5的發(fā)展有著重大的實(shí)際意義。

1 HTML5技術(shù)及其特征

1.1 HTML5

HTML5是第五代超文本標(biāo)記語(yǔ)言，能夠建設(shè)互聯(lián)網(wǎng)前端內(nèi)容。同時(shí)，HTML5在互聯(lián)網(wǎng)的運(yùn)行中是一項(xiàng)關(guān)鍵的核心技術(shù)。雖然在若干年前已經(jīng)推出，但是其依然處于持續(xù)發(fā)展更新的階段。目前已經(jīng)有很多瀏覽器已經(jīng)兼容HTML5。HTML5摒除了與當(dāng)前Web技術(shù)不匹配的元素，并且在語(yǔ)法錯(cuò)誤上有很大的包容性，可以在最大程度上方便開發(fā)者開發(fā)，兼容格式錯(cuò)誤的HTML文檔。HTML5不單顯著改善了網(wǎng)頁(yè)的表現(xiàn)狀態(tài)，同時(shí)還把之前HTML需要設(shè)置第三方插件的多媒體功能以標(biāo)簽的形式嵌入至HTML5的功能當(dāng)中[1]。

1.2 HTML5的特征

當(dāng)前所有HTML5的功能均是原生支持，而不是通過插件來實(shí)現(xiàn)的。HTML5主要有以下幾個(gè)特點(diǎn)：

第一，HTML5定義了更新的HTML標(biāo)記來對(duì)元素的內(nèi)容進(jìn)行描述，以便使得網(wǎng)頁(yè)的建設(shè)更加便捷。其中包括article，nav，section；全新表單控件，例如time，url，date；全新的頁(yè)面元素，其中包括section，footer以及audio，video等。并且，還摒棄了big，font，noframes，blink，center，frame等。另外，HTML5新增的audio，video元素均需要利用API的配合來實(shí)現(xiàn)對(duì)細(xì)粒度的控制管理。

第二，瀏覽器在進(jìn)行網(wǎng)頁(yè)渲染的過程中會(huì)給網(wǎng)頁(yè)建立DOM（文檔對(duì)象模型），并且利用一系列對(duì)象模型來體現(xiàn)HTML的元素，加以javaScript API來針對(duì)對(duì)象模型進(jìn)行操作。而在HTML5中重新定義了相關(guān)JavaScrptAPI用以操作HTML5新增加的元素。二維繪圖AIP：Canvas是一種像素圖像護(hù)板，主要被利用于圖像的動(dòng)態(tài)渲染與游戲等方面[2]。在HTML5中，Canvas不單單是一個(gè)機(jī)遇繪圖的矩形區(qū)域，同時(shí)還規(guī)定了相關(guān)的API來對(duì)線路與多邊形等圖形開展繪制。離線存儲(chǔ)API：其是一種與Cooklie類似方式，主要被用于網(wǎng)絡(luò)數(shù)據(jù)儲(chǔ)存。相對(duì)于Cooklie來說，離線存儲(chǔ)API的信息更大，能夠長(zhǎng)時(shí)間存儲(chǔ)信息，并且讓JavaScriptAPI持續(xù)操作。同時(shí)，其擁有若干種的數(shù)據(jù)存儲(chǔ)方式，其中包括session Storage，local Storage等。地理定位API：該API技術(shù)能夠通過全球定位系統(tǒng)、無線局域網(wǎng)絡(luò)、蜂窩網(wǎng)絡(luò)等方式來獲取用戶的地理位置信息。定位結(jié)果準(zhǔn)確、有效、靈活，并且能夠應(yīng)用在多種地圖應(yīng)用中。HTML智能表單：可以對(duì)顏色、日期、郵件地址等不同要素進(jìn)行設(shè)置，從而提升用戶體驗(yàn)，轉(zhuǎn)變用戶的交互方式。

第三，多媒體。在HTML5中，新增了audio，video等標(biāo)簽，主要用于在Web網(wǎng)頁(yè)中添加不需要其他flash與插件支持就可以實(shí)現(xiàn)的音頻、視頻播放功能。當(dāng)前音頻支持Ogg Vorbis，MP3，AAC等格式，視頻支持Ogg Theora，MPEG4，H.264等格式。同時(shí)，HTML5還支持Canvas畫布元素，該元素是HTML5中最為實(shí)用的新加功能之一[3]。Canvas元素為塊級(jí)元素，其主要是針對(duì)不兼容Canvsa的瀏覽器以及其他用戶代理的備用內(nèi)容。該元素的應(yīng)用編程接口擁有幾十種方法用以繪制線條、矩形、圓形等，可以使用不同的樣式，不同的顏色，不同的書寫字體來操作視頻或圖像，進(jìn)行其他有趣的活動(dòng)。WebGL：在HTML5出現(xiàn)之前，在網(wǎng)頁(yè)中3D的形象無法直接展示，而是需要通過非標(biāo)準(zhǔn)的網(wǎng)頁(yè)語(yǔ)言語(yǔ)法來體現(xiàn)，或者利用瀏覽器中的其他插件來體現(xiàn)。而HTML5與WebGL則提供了一種技術(shù)使得開發(fā)者可以直接在瀏覽器上展現(xiàn)物體的3D狀態(tài)，并且可以直接使用設(shè)備中的圖形處理裝置來進(jìn)行處理，從而保證其繪圖性能。

第四，通信。（1）WebSockets。HTML5增加了一組API，能夠輔助實(shí)現(xiàn)Web應(yīng)用程序通信與協(xié)同工作。WebSockets可以讓W(xué)eb應(yīng)用程序形成與Web服務(wù)相互連接的通道，WebSockets可以使得Web應(yīng)用程序執(zhí)行多項(xiàng)工作任務(wù)，并且避免鎖死瀏覽器的情況出現(xiàn)。同時(shí)，WebSockets也可以在Web應(yīng)用程序與URI端點(diǎn)之間打造雙向通道，Sockets對(duì)象方能接收與發(fā)送相關(guān)信息，還能夠響應(yīng)WebSockets對(duì)象的工作狀態(tài)。（2）WebNotification。當(dāng)前瀏覽器依然使用的是沙盒工作方式[4]。這一工作方式使得瀏覽器與桌面相互獨(dú)立。而HTML5中的WebNotification則提供了一種可以跳過沙盒的通信API，讓用戶可以隨意訪問任何網(wǎng)頁(yè)，在瀏覽器最小化的時(shí)候也可以同時(shí)接收到來自Web應(yīng)用的通知。當(dāng)前，WebNotification依然處于初期狀態(tài)，為了充分保證用戶的安全性，該功能的使用需要用戶的授權(quán)。

2 HTML5技術(shù)下Web應(yīng)用編碼方法

在現(xiàn)代社會(huì)HTML5的發(fā)展十分迅猛，越來越多的瀏覽器開始支持HTML5，并且逐漸適應(yīng)HTML5的新特征，同時(shí)也出現(xiàn)了眾多基于HTML5技術(shù)的移動(dòng)APP應(yīng)用。要在飛速發(fā)展的技術(shù)潮流中掌握Web開發(fā)的趨勢(shì)就需要充分熟悉掌握HTML5的相關(guān)特征。HTML5編碼開發(fā)過程中存在一些高效的實(shí)踐方法，其將會(huì)提升Web開發(fā)者的效率，改善Web開發(fā)的質(zhì)量。第一，模板生成器。在開始針對(duì)HTML5頁(yè)面進(jìn)行編寫的過程中可以利用現(xiàn)有的模板生成器來生成簡(jiǎn)單的HTML5模板，從而避免重新編寫HTML5代碼。使用HTML5模板生成器十分便捷，通常來說只需要填寫基礎(chǔ)的表單，選擇簡(jiǎn)單的選項(xiàng)就可以即時(shí)生成基本的HTML5模板。當(dāng)前已經(jīng)有眾多十分優(yōu)秀高效的HTML5模板生成器，例如Switch TOHtml5（地址：http://switchtohtml5. com/）以及Shikiryu generator（地址：http://shikiryu.com/ html5/）。如果在使用過程中需要更加復(fù)雜的生成器可以選擇使用HTML5Boilerplate模板，該模板地址為：（http:// html5boilerplate.com/）。這一模板能夠在網(wǎng)頁(yè)的設(shè)置中選擇全新的HTML5樣式，并且支持在瀏覽器中開展HTML5/ CSS3特性檢測(cè)。

第二，Cheat sheet。HTML5正處于快速發(fā)展階段，因此在使用過中必然會(huì)出現(xiàn)眾多全新的特性。通常開發(fā)者難以將HTML5的特性全部掌握熟記，因此可以選擇使用備忘錄（chaeat sheet）來對(duì)HTML5的新特性與使用方法進(jìn)行查閱核對(duì)。

第三，兼容性。由于HTML5技術(shù)相對(duì)較新，因此各大瀏覽器對(duì)HTML5的兼容性均有所不同。例如，微軟的Internet Explorer瀏覽器就與其他的瀏覽器不同，因此在利用HTML5開發(fā)的時(shí)候要注意在各大瀏覽器中獲取技術(shù)平衡。例如，兼顧到用戶群體所使用的瀏覽器類型。開發(fā)者可以通過訪問http://caniuse.com/來對(duì)HTML5的各個(gè)屬性與事件在瀏覽器中的兼容情況進(jìn)行查看。在該網(wǎng)站中可以讓開發(fā)者清晰、詳細(xì)地認(rèn)識(shí)到SVG，CSS等在HTML5中的各項(xiàng)用法，并且通過表格的瀏覽形式來對(duì)各個(gè)瀏覽器支持HTML5的情況進(jìn)行對(duì)比[5]。

第四，正確使用元素。在尚未使用HTML5的時(shí)候，開發(fā)者需要在頁(yè)面使用大量沒有語(yǔ)義的標(biāo)簽，這使得HTML5變得十分難以理解，尤其是對(duì)于搜索引擎來說。因此，在HTML5中融合了大量的新標(biāo)簽，其中包括header，footer，article，section等。但是開發(fā)者在使用過程中要注意不同新標(biāo)簽的特性，選擇正確的使用方法。

3 HTML5的應(yīng)用模式

伴隨移動(dòng)互聯(lián)網(wǎng)的繁榮發(fā)展，移動(dòng)終端呈現(xiàn)出十分迅猛的發(fā)展態(tài)勢(shì)。在眾多移動(dòng)終端與平臺(tái)中，開發(fā)人員必須要面對(duì)眾多性能與體驗(yàn)上的妥協(xié)，在平臺(tái)的選擇方面浪費(fèi)了大量的時(shí)間。然而HTML5的出現(xiàn)給Web的應(yīng)用帶來了希望。Web的應(yīng)用可以實(shí)現(xiàn)常用的本地應(yīng)用的功能特征。同時(shí)，Web應(yīng)用的跨平臺(tái)特征，使得產(chǎn)品問世、版本更新與平臺(tái)均處于相互獨(dú)立的階段，使得開發(fā)者的開發(fā)過程更加便捷[6]。在HTML5標(biāo)準(zhǔn)發(fā)布后，HTML5技術(shù)下的移動(dòng)Web應(yīng)用也開始出現(xiàn)在人們的視線當(dāng)中。百度地圖、谷歌地圖的移動(dòng)版本使用了地理位置定位的API；優(yōu)酷、愛奇藝等視頻網(wǎng)站摒棄了Flash插件，使用了HTML5新特征來完成音頻、視頻的播放。總的來說，HTML5技術(shù)給移動(dòng)端的APP發(fā)展帶來了Web APP以及Hybrid APP兩種全新的開發(fā)模式，再結(jié)合以往存在的Native開發(fā)模式，移動(dòng)互聯(lián)網(wǎng)APP目前一共存在3種開發(fā)模式。

第一，Native App。開發(fā)者可以根據(jù)移動(dòng)終端的操作系統(tǒng)來選擇不同的語(yǔ)言來進(jìn)行開發(fā)設(shè)計(jì)。例如，移動(dòng)終端的系統(tǒng)為安卓，則一般使用Java語(yǔ)言開發(fā)落在IOS平臺(tái)則使用Object C語(yǔ)言來進(jìn)行開發(fā)。這一方式的優(yōu)勢(shì)在于不同的平臺(tái)能夠形成不同的客戶體驗(yàn)，并且開發(fā)出人性化、界面友好、精彩豐富的交互途徑。這一開發(fā)方式的缺點(diǎn)是維護(hù)成本過高，某一應(yīng)用需要根據(jù)移動(dòng)終端的操作系統(tǒng)同時(shí)開發(fā)多個(gè)版本，并且受到市場(chǎng)限制較大，難以獲得足夠的自由開發(fā)空間。

第二，Web App。Web App是基于Web技術(shù)的，但是卻依然依附于瀏覽器的解析。Web App與傳統(tǒng)網(wǎng)頁(yè)存在著一定的差異，其操作界面、操作方式都是直接適用于移動(dòng)端屏幕的。并且，利用HTML5中的Application Cache特征，可以讓用戶獲取與本地應(yīng)用相同良好的使用感受。當(dāng)前一部分移動(dòng)瀏覽器兼容瀏覽器地址欄隱藏、狀態(tài)欄帶有瀏覽器特征等元素，從而使得Web App與普通的本地應(yīng)用在使用中沒有明顯差異。Web App的出現(xiàn)改變了移動(dòng)瀏覽器與智能終端平臺(tái)的設(shè)計(jì)。例如，UC瀏覽器、QQ瀏覽器、360瀏覽器等均可以在瀏覽器主頁(yè)上通過應(yīng)用圖標(biāo)的方式來實(shí)現(xiàn)Web的應(yīng)用，讓瀏覽器在操作時(shí)候與操作系統(tǒng)桌面更加接近。

第三，Hybrid App。該開發(fā)模式為混合模式移動(dòng)應(yīng)用，其是一種處于Native App與Web App之間的開發(fā)模式。這一開發(fā)方式主要是通過HTML5來實(shí)現(xiàn)的。這一開發(fā)方式不單單擁有Native App良好的人機(jī)交互體驗(yàn)，同時(shí)還具有Web App跨平臺(tái)的優(yōu)勢(shì)，并且維護(hù)成本較低，經(jīng)濟(jì)效益良好。然而Hybrid App同時(shí)也存在一些開發(fā)商的問題。例如，版本的管理控制過程變得相對(duì)復(fù)雜，需要同時(shí)對(duì)客戶端版本與客戶端中的HTML5版本進(jìn)行同時(shí)管理控制。同時(shí)，開發(fā)設(shè)計(jì)過程變得相對(duì)復(fù)雜，由于HTML5可以直接展現(xiàn)業(yè)務(wù)的交互界面，假如沒有統(tǒng)一的設(shè)計(jì)規(guī)范，則十分有可能出現(xiàn)應(yīng)用的一部分邏輯由客戶端完成，另外一部分則是由HTML5技術(shù)完成。出現(xiàn)這種情況使得Hybrid App方式的開發(fā)、測(cè)試過程都變得十分復(fù)雜。

4 HTML5的應(yīng)用場(chǎng)景分析

當(dāng)前在應(yīng)用HTML5的時(shí)候沒有對(duì)場(chǎng)景存在著明顯的限制與規(guī)定，因此在利率上移動(dòng)互聯(lián)網(wǎng)中的應(yīng)用需求都可以通過Web App或Hybrid App等方式獲得。以金融行業(yè)為例，HTML5可以在下列領(lǐng)域得到廣泛的應(yīng)用。第一，互動(dòng)式的廣告營(yíng)銷。在新媒體時(shí)代，微信、微博、網(wǎng)頁(yè)已經(jīng)成為各大商家開展廣告宣傳、進(jìn)行市場(chǎng)營(yíng)銷、開展品牌推廣的重要平臺(tái)。而企業(yè)則可以利用HTML5在短時(shí)間內(nèi)制作出互動(dòng)式的營(yíng)銷服務(wù)界面，再通過微信、微博等平臺(tái)向受眾發(fā)送，將廣告深入傳播到受眾群體當(dāng)中。這就是HTML5在制作宣傳界面的優(yōu)勢(shì)，不需要編寫代碼，可以利用制作工具在短時(shí)間內(nèi)完成宣傳材料。并且HTML5還可以將圖片、文字、視頻等方式進(jìn)行結(jié)合，給予客戶立體感官的體驗(yàn)，使得客戶可以更加深入、更加直接地了解廣告內(nèi)容、產(chǎn)品特點(diǎn)與服務(wù)詳情。第二，場(chǎng)景化的應(yīng)用。場(chǎng)景化應(yīng)用即為L(zhǎng)ive-APP，其利用音頻、圖文、視頻、重力感應(yīng)等技術(shù)為客戶營(yíng)造出了一種身臨其境感受的、有活力的移動(dòng)應(yīng)用。不需要客戶特意進(jìn)行下載，只需要通過制定的平臺(tái)與工具來進(jìn)行制作就可以將其發(fā)布在互聯(lián)網(wǎng)上，再向客戶分享鏈接，客戶就可以通過點(diǎn)擊鏈接來訪問場(chǎng)景應(yīng)用。而HTML5則是場(chǎng)景應(yīng)用制作的關(guān)鍵技術(shù)之一。

5 HTML5的缺陷

雖然HTML5在使用過程中存在眾多優(yōu)勢(shì)，但是不可避免的，HTML5依然擁有當(dāng)前無法克服的缺陷。首先，離線存儲(chǔ)的安全性。在應(yīng)用程序出現(xiàn)問題的時(shí)候需要通過搜素查詢?nèi)罩緛韺?duì)其進(jìn)行研究。但是如果應(yīng)用程序在工作運(yùn)行若干天后依然無法發(fā)送日志，開發(fā)者則需要考慮是否客戶端出現(xiàn)了異常。日志的記錄累積則會(huì)導(dǎo)致客戶端出現(xiàn)運(yùn)行卡頓、存儲(chǔ)量增加、使用緩慢等情況。如在出現(xiàn)問題的時(shí)候再進(jìn)行日志記錄已經(jīng)為時(shí)已晚，而HTML5技術(shù)則只能夠存儲(chǔ)最新的日志，最大程度地保護(hù)應(yīng)用的使用性能。同時(shí)，通過后臺(tái)寫入日志的方式也能夠進(jìn)行離線存儲(chǔ)，運(yùn)用這一技術(shù)即使在設(shè)備出現(xiàn)問題時(shí)重啟，日志也能夠正常恢復(fù)。值得注意的是，無法在本地設(shè)備上存儲(chǔ)沒有進(jìn)行加密的日志，而HTML5不具備針對(duì)離線存儲(chǔ)加密的API，則開發(fā)者需要對(duì)日志進(jìn)行單獨(dú)加密。第二，開放性帶來的影響。由于新標(biāo)簽的增加，各個(gè)瀏覽器之間缺少統(tǒng)一的數(shù)據(jù)描述格式，從而導(dǎo)致了用戶體驗(yàn)不佳。HTML5出現(xiàn)后就建立了開放性原則。引出兩大陣營(yíng)對(duì)視頻格式的設(shè)置存在異議。

6 結(jié)語(yǔ)

總的來說，HTML5的出現(xiàn)與應(yīng)用使得程序員開發(fā)工作變得更加便捷，各種特征與優(yōu)勢(shì)也使得HTML5不斷地被普及應(yīng)用。HTML5可以在各個(gè)領(lǐng)域都發(fā)揮其應(yīng)有的作用與價(jià)值，雖然HTML5當(dāng)前依然存在一些問題，但是相信在以后HTML5將會(huì)擁有更加廣泛的發(fā)展空間，給用戶帶來與眾不同的互聯(lián)網(wǎng)體驗(yàn)。

[1]王英華，鐘琪，丁社紅.移動(dòng)辦公平臺(tái)MAA上的HTML5技術(shù)開發(fā)與應(yīng)用[J].電腦編程技巧與維護(hù)，2013（11）：53-61.

[2]李世滿.基于HTML5 Web技術(shù)APP快速開發(fā)研究—以移動(dòng)辦公APP軟件開發(fā)為藍(lán)本[J].電腦知識(shí)與技術(shù)，2016（3）：81-82.

[3]柳翔.基于HTML5技術(shù)的大壩安全監(jiān)測(cè)圖像繪制技術(shù)[J].數(shù)字技術(shù)與應(yīng)用，2015（11）：72-74.

[4]JACOBS I, JAFFE J, HEGARET, P. How the Open Web Platform Is Transforming Industry[J].Internet Computing, 2012（6）：82- 86.

[5]張玉晴，黃瑾娉.基于HTML5的跨平臺(tái)移動(dòng)應(yīng)用關(guān)鍵技術(shù)的研究與實(shí)現(xiàn)[J].工業(yè)控制計(jì)算機(jī)，2013（3）：56-58.

[6]陳新澤，楊斌，仲維亮.基于HTML5的移動(dòng)終端地理信息應(yīng)用設(shè)計(jì)[J].成都信息工程學(xué)院學(xué)報(bào)，2013（2）：119-123.

Analysis of HTML5 technology and application mode

Jiang Yulong
（Qufu Normal University, Rizhao 276826, China）

HTML5 is a new Web language standard, which has a number of features and characteristics, it will become one of the core internet key terms, also bring new and innovative application at the same time. HTML5 can more clearly express the content of the front end of the Web, and has the chance to make the front end of Web become the more powerful platform with superior performance. This article mainly aims at the technology and application mode of HTML5 to carry out the research.

HTML5; application mode; Web

姜玉龍（1993— ），男，甘肅蘭州，本科。