引言
網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越依賴Flash等插件支持視頻和音頻等組件以及高度圖形化和交互的應(yīng)用程序,帶來(lái)便利之時(shí),同時(shí)也在制約著網(wǎng)頁(yè)設(shè)計(jì)的自由之路。HTML5作為HTML和CSS規(guī)范的最新版本不再需要這些額外的瀏覽器組件來(lái)促進(jìn)此類功能,W3C預(yù)計(jì)HTML5在2022年將會(huì)成為主流。HTML5中增加了許多新特性,例如嵌入音頻、視頻和圖片的函數(shù)、客戶端存儲(chǔ)數(shù)據(jù)、交互式文檔等,通過(guò)制定如何處理所有HTML元素以及如何從錯(cuò)誤中恢復(fù)的精確規(guī)則,HTML5進(jìn)一步增強(qiáng)了互動(dòng)性,并有效減少了開(kāi)發(fā)成本,使得HTML5被廣泛認(rèn)為是計(jì)劃在2010年出現(xiàn)的最重要的新技術(shù)之一。本文將探討研究HTML5的核心技術(shù)的革新。
1 HTML5的技術(shù)革新
HTML5的革新,可以總結(jié)為:語(yǔ)義明確的標(biāo)簽體系、化繁為簡(jiǎn)的網(wǎng)頁(yè)富媒體技術(shù)、神奇的本地?cái)?shù)據(jù)存儲(chǔ)技術(shù)、不需要插件的動(dòng)畫(huà)(Canvas)、強(qiáng)大的APl支持。HTML 5讓人機(jī)交互,人網(wǎng)交互變得更加舒適,更加貼合用戶。以往對(duì)富媒體應(yīng)用與本存儲(chǔ)的支持乏力也不再是瀏覽器的切膚之痛,將web從多變的內(nèi)容平臺(tái)推向標(biāo)準(zhǔn)化的應(yīng)用平臺(tái)。
1.1結(jié)構(gòu)更明確簡(jiǎn)潔
表1 HTML4網(wǎng)頁(yè)與HTML 5網(wǎng)頁(yè)代碼對(duì)比表
隨著網(wǎng)頁(yè)內(nèi)容和形式的日益豐富,僅用原有的xhtml標(biāo)簽去語(yǔ)義化顯然已經(jīng)力不從心。因此HTML5提供了一系列新的標(biāo)簽及相應(yīng)屬性,以反應(yīng)現(xiàn)代網(wǎng)站典型語(yǔ)義。我們寫(xiě)出一個(gè)簡(jiǎn)單的例子來(lái)分析其革新之處。
通過(guò)表1可以看到。我們用這些新元素來(lái)替換的是ID。這四個(gè)新元素:section、article、aside和nav。之所以說(shuō)它們強(qiáng)大,原因在于它們代表了一種新的內(nèi)容模型。一種HTML中前所未有的內(nèi)容模型——給內(nèi)容分區(qū)。在此之前,我們一直都在用div來(lái)組織頁(yè)面中的內(nèi)容,div本身并沒(méi)有語(yǔ)義。但section、article、aside和nav實(shí)際上明確告訴你——這一塊就像文檔中的另一個(gè)文檔一樣。位于這些元索中的任何內(nèi)容。都可以擁有自己的概要、標(biāo)題,自己的腳部。
標(biāo)準(zhǔn)瀏覽器(比如Firefox、Chroome甚至新版的IE)都可以帶引客戶直接跳轉(zhuǎn)。HTML4網(wǎng)頁(yè)的問(wèn)題是DIV的ID值是設(shè)計(jì)者給定的,DIV這個(gè)標(biāo)簽是無(wú)語(yǔ)義的,所以,瀏覽器并不知道哪個(gè)應(yīng)該是導(dǎo)航鏈接所在區(qū)塊。HTML5書(shū)寫(xiě)的網(wǎng)頁(yè)。用新的標(biāo)記標(biāo)識(shí)出導(dǎo)航區(qū)塊,使得瀏覽器更好的識(shí)別網(wǎng)頁(yè)內(nèi)容。
另外HTML5還摒棄了許多冗余的代碼設(shè)計(jì),使得代碼的設(shè)計(jì)更加的簡(jiǎn)潔明確。
1.2降低插件的重要性,支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能
聲音、動(dòng)畫(huà)及一些非常生動(dòng)的網(wǎng)頁(yè),通過(guò)Sun、Adobe、RealAudio、微軟等公司開(kāi)發(fā)的插件讓人耳目一新。然而混亂的是插件的接口是向所有人開(kāi)放的,安全性讓人堪優(yōu)。其中最有名的插件就是Flash,我們幾乎要經(jīng)常更新插件,其他類似的插件更是數(shù)不勝數(shù)。
在2007年,Opera在Web Hypertext Application Technology Working Group(WHATWG)工作草案中提議使用<video>標(biāo)記,其目的是“將視頻制作成—個(gè)的網(wǎng)絡(luò)組件,以—個(gè)輕松、開(kāi)放的解決方案來(lái)將視頻整合到網(wǎng)頁(yè)、且在瀏覽器上本地支持視頻”,比起插件所需的冗長(zhǎng)的對(duì)象嵌入標(biāo)記。它更優(yōu)雅更易于操作。現(xiàn)在,在網(wǎng)頁(yè)中實(shí)現(xiàn)視頻的代碼簡(jiǎn)單且干凈。如需在HTML5中顯示視頻,您所有需要的是:
<video fire=“movie:ogg”eontrols=“controh”></video>
當(dāng)前,video元素支持三種視頻格式:
Ogg=帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件
MPEG4=帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件
WebM=帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件
當(dāng)然運(yùn)用插件與否取決于你想傲的事情。如果你想建立一個(gè)專業(yè)的3D世界,正如在復(fù)雜的Flash和Shoekwave游戲中所看到的那樣,你還得依賴插件技術(shù),因?yàn)檫@些插件技術(shù)可以直接訪問(wèn)視頻硬件,運(yùn)行3D游戲。即便如此,HTMLS帶來(lái)的資源節(jié)約還是足夠讓我們震驚的。
1.3支持動(dòng)態(tài)生成圖像
過(guò)去,網(wǎng)頁(yè)中顯示的圖像來(lái)自于GIF或JPG圖像,而在HTML5中,圖像可能并不是直接來(lái)自圖像文件,而是由某個(gè)Canvas(畫(huà)布)對(duì)象臨時(shí)生成的。網(wǎng)絡(luò)上已經(jīng)出現(xiàn)了大量的非常好的圖形庫(kù),這些圖形庫(kù)的存在使得動(dòng)態(tài)生成圖像更加容易。如今,JavaScript層可以根據(jù)數(shù)據(jù)進(jìn)行計(jì)算然后繪制出圖形,完全可以讓網(wǎng)絡(luò)上的一切變得更加生動(dòng),而純文本內(nèi)容越來(lái)越少。HTML5環(huán)境讓W(xué)eb開(kāi)發(fā)人員更易于開(kāi)發(fā)出復(fù)雜的圖像。這里可能存在的—個(gè)同題是,這種圖像的處理可能會(huì)帶來(lái)很大負(fù)擔(dān),比如對(duì)客戶端的處理器處理能力有一定要求,但是開(kāi)發(fā)者不應(yīng)該因擔(dān)心影響性能就不讓用戶體驗(yàn)生動(dòng)的圖像,只是開(kāi)發(fā)者應(yīng)該做出一個(gè)折中的選擇。
HTML5的矢量繪圖的功能由Canvas標(biāo)簽和各種繪圖API構(gòu)成。在JavaSeript的腳本中,通過(guò)Canvas節(jié)點(diǎn)可以獲得繪圖上下文,通過(guò)它調(diào)用API就可以繪制各種矢量圖醞布是一個(gè)矩形區(qū)域,您可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
1.4本地存儲(chǔ)允許Web程序利用
IE瀏覽器端的本地存儲(chǔ)空間存儲(chǔ)允許最多300個(gè)Cookie。最多存儲(chǔ)4096個(gè)字節(jié)的內(nèi)容。不過(guò),真正實(shí)用的Web程序,可能需要比這更多的存儲(chǔ)空間。例如,以前的Dojo工具包使用Flash插件來(lái)分配用戶硬盤上的部分空間,把它留給瀏覽器使用,而現(xiàn)在使用HTML5就可以達(dá)到同樣的目的。
1.5 Widget將更豐富
JavaScript和CSS為基礎(chǔ)的DHTML技術(shù)的迅猛發(fā)展,頁(yè)面設(shè)計(jì)的易用性、功能性和交互性已經(jīng)成為了業(yè)界的主流趨勢(shì)。但是,前端大規(guī)模的JavaScript和CSS開(kāi)發(fā)的復(fù)雜度比較高,而且還要支持不同的瀏覽器平臺(tái),出了很多JavaScript庫(kù)用來(lái)幫助前端開(kāi)發(fā)者,如jQllery、YUI Library、Ext JS等。HTML5為Widget提供了一個(gè)相互通信的標(biāo)準(zhǔn)機(jī)制。盡管仍然不能夠相互進(jìn)入對(duì)方的運(yùn)行環(huán)境中,但它們可以相互發(fā)送信息來(lái)協(xié)同工作了。
2 HTML5發(fā)展中存在的問(wèn)題
HTML5繼承Web應(yīng)用開(kāi)發(fā)簡(jiǎn)單、部署升級(jí)方便、可以跨平臺(tái),又能像本地應(yīng)用那樣功能強(qiáng)大,操作體驗(yàn)簡(jiǎn)便友好。目前存在制約HTML5業(yè)務(wù)發(fā)展的一些問(wèn)題。當(dāng)然。這些不足或問(wèn)題。并非不可克服:瀏覽器對(duì)HTML5的兼容性參差不齊,導(dǎo)致部分HTML5應(yīng)用無(wú)法跨平臺(tái);源代碼對(duì)用戶可見(jiàn),容易被拷貝;HTML5應(yīng)用的可用性,受制于網(wǎng)絡(luò)狀況的穩(wěn)定性;缺少優(yōu)秀的HTML5應(yīng)用開(kāi)發(fā)工具,影響應(yīng)用的質(zhì)量和數(shù)量。
如今已經(jīng)有越來(lái)越多的門戶網(wǎng)站在嘗試使用HTML5,當(dāng)大家都切身體會(huì)到這種新的網(wǎng)頁(yè)標(biāo)準(zhǔn)所帶來(lái)的視覺(jué)沖擊、技術(shù)改善、資源節(jié)約等諸多便利,相信會(huì)加快HTML5頁(yè)面的普及,雖然目前面臨的問(wèn)題和挑戰(zhàn)依然很多,盡管HTML5還有很遠(yuǎn)的路要走,但其正在改變Web,也必然改變Web。
核心關(guān)注:拓步ERP系統(tǒng)平臺(tái)是覆蓋了眾多的業(yè)務(wù)領(lǐng)域、行業(yè)應(yīng)用,蘊(yùn)涵了豐富的ERP管理思想,集成了ERP軟件業(yè)務(wù)管理理念,功能涉及供應(yīng)鏈、成本、制造、CRM、HR等眾多業(yè)務(wù)領(lǐng)域的管理,全面涵蓋了企業(yè)關(guān)注ERP管理系統(tǒng)的核心領(lǐng)域,是眾多中小企業(yè)信息化建設(shè)首選的ERP管理軟件信賴品牌。
轉(zhuǎn)載請(qǐng)注明出處:拓步ERP資訊網(wǎng)http://www.ezxoed.cn/
本文標(biāo)題:淺談HTML5的技術(shù)革新
本文網(wǎng)址:http://www.ezxoed.cn/html/support/1112156365.html