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

姜玉龍

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

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

姜玉龍

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

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

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

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

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

1.1 HTML5

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

1.2 HTML5的特征

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

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

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

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

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

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

在現(xiàn)代社會HTML5的發(fā)展十分迅猛，越來越多的瀏覽器開始支持HTML5，并且逐漸適應(yīng)HTML5的新特征，同時也出現(xiàn)了眾多基于HTML5技術(shù)的移動APP應(yīng)用。要在飛速發(fā)展的技術(shù)潮流中掌握Web開發(fā)的趨勢就需要充分熟悉掌握HTML5的相關(guān)特征。HTML5編碼開發(fā)過程中存在一些高效的實踐方法，其將會提升Web開發(fā)者的效率，改善Web開發(fā)的質(zhì)量。第一，模板生成器。在開始針對HTML5頁面進(jìn)行編寫的過程中可以利用現(xiàn)有的模板生成器來生成簡單的HTML5模板，從而避免重新編寫HTML5代碼。使用HTML5模板生成器十分便捷，通常來說只需要填寫基礎(chǔ)的表單，選擇簡單的選項就可以即時生成基本的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)頁的設(shè)置中選擇全新的HTML5樣式，并且支持在瀏覽器中開展HTML5/ CSS3特性檢測。

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

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

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

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

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

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

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

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

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

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

5 HTML5的缺陷

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

6 結(jié)語

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

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

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

[3]柳翔.基于HTML5技術(shù)的大壩安全監(jiān)測圖像繪制技術(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的跨平臺移動應(yīng)用關(guān)鍵技術(shù)的研究與實現(xiàn)[J].工業(yè)控制計算機(jī)，2013（3）：56-58.

[6]陳新澤，楊斌，仲維亮.基于HTML5的移動終端地理信息應(yīng)用設(shè)計[J].成都信息工程學(xué)院學(xué)報，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— ），男，甘肅蘭州，本科。