HTML5技術(shù)的關(guān)鍵特色HTML5+CSS3將流行

過(guò)去十多年來(lái)，技術(shù)的發(fā)展變化很大，例如網(wǎng)路幾乎無(wú)所不在，隨時(shí)可以接取網(wǎng)頁(yè)的應(yīng)用、Web2.0的風(fēng)潮席卷整個(gè)網(wǎng)頁(yè)世界；市占最高的微軟IE也逐步改版，坊間也出現(xiàn)許多種類型的瀏覽器，像是MozillaFirefox、AppleSafari、GoogleChrome，紛紛強(qiáng)調(diào)具有更優(yōu)異的執(zhí)行效能與對(duì)開放標(biāo)準(zhǔn)的高支援性，大幅縮短網(wǎng)頁(yè)應(yīng)用程式與原生應(yīng)用程式之間的效能差距，讓使用者愿意接受不同的選擇，連帶地，也讓開發(fā)人員更愿意采用HTML5這類標(biāo)準(zhǔn)。

不過(guò)，如同前一篇所提到，智慧型手機(jī)和平板電腦在這幾年快速竄紅，影響力也已擴(kuò)及企業(yè)，使得這樣新興個(gè)人端連網(wǎng)環(huán)境，已經(jīng)無(wú)法輕易被忽視。而這些行動(dòng)裝置上所搭配的瀏覽器，都可以大幅支援HTML5規(guī)格，完全不像PC環(huán)境，仍有很多包袱，例如須考量廣大舊版瀏覽器用戶（如市占仍有7%的IE6），而必須背負(fù)對(duì)新版網(wǎng)頁(yè)標(biāo)準(zhǔn)相容性不足的問(wèn)題。

換句話說(shuō)，開發(fā)人員除了要注意網(wǎng)頁(yè)能否在各種瀏覽器之間執(zhí)行的效果差異，還需要想辦法在舊版瀏覽器環(huán)境中做出類似效果。

HTML5涵蓋的范圍

一般而言，HTML5的出現(xiàn)是為了接替HTML4，同時(shí)也是集合歷代HTML規(guī)格的最新修訂版，因此現(xiàn)行網(wǎng)站的所有網(wǎng)頁(yè)，對(duì)于支援HTML5的瀏覽器來(lái)說(shuō)，都是可以執(zhí)行的，相對(duì)地，若用不支援HTML5的瀏覽器，去開啟以HTML5新增的規(guī)格撰寫內(nèi)容的網(wǎng)頁(yè)，就會(huì)產(chǎn)生不相容的狀況。

然而，就廣義來(lái)說(shuō)，HTML5也是3種網(wǎng)頁(yè)前端開發(fā)技術(shù)的總集：包含HTML、CSS3（CascadingStyleSheetsLevel-3）、和JavaScript。

CSS的目的是，能以樣式表為網(wǎng)頁(yè)提供視覺呈現(xiàn)的統(tǒng)一效果。JavaScript則是瀏覽器開啟網(wǎng)頁(yè)時(shí)，能同時(shí)執(zhí)行應(yīng)用的指令碼語(yǔ)言（WebScriptingLanguage），程式碼需透過(guò)瀏覽器直譯和執(zhí)行，而不像其他程式語(yǔ)言需先經(jīng)過(guò)編譯，轉(zhuǎn)成BinaryCode，它可用來(lái)操作網(wǎng)頁(yè)元素的產(chǎn)生與控制計(jì)算，并提供函式庫(kù)，里面預(yù)設(shè)提供物件和方法，以便和網(wǎng)頁(yè)的文件物件模型（DocumentObjectModel，DOM）互動(dòng)。

值得注意的是，要善用HTML5的重要特色，基本上，可能都需要同時(shí)搭配CSS或JavaScript，才有可能辦到。

有哪些特色？從W3C的觀點(diǎn)來(lái)看，他們整理出8個(gè)：語(yǔ)意、離線與儲(chǔ)存、裝置存取、連線、多媒體、效能與整合與CSS3。接下來(lái)，我們將針對(duì)其中幾項(xiàng)加以介紹。

網(wǎng)頁(yè)可直接播放多媒體

若在網(wǎng)頁(yè)上要呈現(xiàn)視訊、聲音，使用者端設(shè)備需安裝可播放的應(yīng)用程式、編解碼器（Codec），或者仰賴Flash，搭配同樣需額外安裝的播放軟體進(jìn)行。而這些對(duì)瀏覽器而言，都是需外掛的程式，而非內(nèi)建機(jī)制。隨著Adobe不再開發(fā)手機(jī)與Linux平臺(tái)的Flash播放軟體，以及瀏覽器對(duì)HTML5標(biāo)準(zhǔn)的積極支援，未來(lái)你將會(huì)看到更多直接透過(guò)瀏覽器本身播放影音檔的例子。

在HTML5中，網(wǎng)頁(yè)要播放視訊和聲音的方法非常簡(jiǎn)單，只要用<video>和<audio>標(biāo)簽即可。例如<audiosrc=”http://www.ithome.com.tw/audio/tech.mp3”></audio>，即是在網(wǎng)頁(yè)上播放檔名為tech.mp3的音訊檔。

回顧過(guò)去，網(wǎng)頁(yè)無(wú)法直接播放視訊畫，而播放聲音也沒(méi)有特定標(biāo)準(zhǔn)，所以很多網(wǎng)頁(yè)都采用Flash來(lái)呈現(xiàn)多媒體；如今，F(xiàn)lash應(yīng)用將出現(xiàn)無(wú)法跨平臺(tái)的狀況（Adobe決定不繼續(xù)投入手機(jī)和Linux上的Flash應(yīng)用），將會(huì)影響很大。

已投入Android平臺(tái)開發(fā)多年的圣星科技創(chuàng)辦人盧育圣表示，這改變（格式轉(zhuǎn)換）需要時(shí)間。會(huì)有人開始從Flash應(yīng)用離開，一旦手機(jī)無(wú)法播放相關(guān)影音，業(yè)者就必須想辦法轉(zhuǎn)到HTML5。但他認(rèn)為瀏覽器也要內(nèi)建相關(guān)的標(biāo)準(zhǔn)Codec，于是大家就會(huì)逐漸往這方向走。畢竟，使用者都喜歡看Video。

目前各大瀏覽器主要支援哪些多媒體解碼格式？視訊方面，像是OggTheora、VP8、H.264，而音訊格式，則主要支援Oggvorbis、WAV、MP3等。

但這樣的支援對(duì)于特定應(yīng)用來(lái)說(shuō)，還是不夠的，例如游戲。

前微軟資深開發(fā)技術(shù)推廣經(jīng)理，現(xiàn)為自由工作者的王森表示，標(biāo)準(zhǔn)的audio標(biāo)簽是無(wú)法混音的，導(dǎo)致非Chrome瀏覽器上的AngryBirds游戲不能用AudioAPI，只能用Flash彌補(bǔ)。

他認(rèn)為，用HTML5開發(fā)CasualGame是可以的，但是對(duì)于需要大量3D運(yùn)算的游戲，目前還沒(méi)看到有好的例子出現(xiàn)。另外，開發(fā)游戲需倚賴搭配好的游戲引擎，以加速開發(fā)，而HTML5目前仍缺乏常用的游戲引擎。

其他人也有類似看法，例如身為Timefire共同創(chuàng)辦人暨CTO的RayCromwell，他在〈TheproblemswithHTML5<Audio>〉一文中表示，HTML5的audio標(biāo)簽，雖然像音樂(lè)播放器，一樣可以做到快轉(zhuǎn)、循環(huán)播放與控制音量，但單靠它，并無(wú)法合成聲音、取樣、處理音訊樣本、套用環(huán)境特效，或是基本的立體聲移位（stereopanning）?？磥?lái)，這部份的發(fā)展還有待努力。

具有本機(jī)儲(chǔ)存的能力提升

對(duì)于智慧型手機(jī)或平板電腦，目前要達(dá)到持續(xù)與網(wǎng)路連線的目標(biāo)，還有一段距離，因此一定必須面對(duì)離線時(shí)的處理。當(dāng)網(wǎng)頁(yè)技術(shù)不斷發(fā)展，也許有一天我們不再需要用原生應(yīng)用程式，而是都用HTML、CSS和JavaScript來(lái)寫，那如何保障程式不論離線與否，都可以執(zhí)行呢？

若使用者不能上線，應(yīng)用程式就有必要在單機(jī)內(nèi)能夠執(zhí)行，如同我們目前在個(gè)人電腦上執(zhí)行Word、Excel。

盧育圣認(rèn)為，這時(shí)候LocalStorage對(duì)網(wǎng)頁(yè)應(yīng)用程式來(lái)說(shuō)，就很重要。讓程式可以在離線環(huán)境下執(zhí)行編輯內(nèi)容，等到連線恢復(fù)時(shí)再同步資料，此時(shí)，可透過(guò)HTML5的WebSockets以網(wǎng)路傳輸資料，來(lái)達(dá)到目的。

就本機(jī)儲(chǔ)存的功能而言，HTML5分為WebStorage和本機(jī)資料庫(kù)（SQLite和IndexedDatabase）。前者的目的，是企圖取代目前網(wǎng)頁(yè)以Cookies儲(chǔ)存資料的作法，而這又可細(xì)分為暫時(shí)性儲(chǔ)存的sessionStorage，以及較長(zhǎng)久儲(chǔ)存的localStorage等兩種。sessionStorage是指使用者瀏覽該網(wǎng)站期間所要儲(chǔ)存的資料，而localStorage則是會(huì)儲(chǔ)存在磁碟中，即使瀏覽器關(guān)閉，以此方式儲(chǔ)存的資料還是存在。

睿揚(yáng)資訊知識(shí)產(chǎn)品國(guó)際事務(wù)處產(chǎn)品開發(fā)經(jīng)理邱維新表示，以前使用者瀏覽網(wǎng)頁(yè)時(shí)，要儲(chǔ)存資料，須透過(guò)Cookies或存放在網(wǎng)站伺服器端；現(xiàn)在可在瀏覽器存取時(shí)，預(yù)載在使用者本機(jī)記憶體中作為快取。他們主要是利用本機(jī)儲(chǔ)存，以Key-Value的方式暫存部分資料，讓使用者不用每次都從伺服器端重載，同時(shí)節(jié)省頻寬及伺服器的負(fù)載程度，并且加快App的反應(yīng)速度。

但他也說(shuō)，由于HTML5目前只能做到部分離線處理，因各種瀏覽器在SQLite的支援度不一，所以暫時(shí)還沒(méi)有考慮使用。未來(lái)，如果這方面的功能支援得非常完整，他認(rèn)為將可以讓App發(fā)揮更強(qiáng)大的資料處理能力。

對(duì)于HTML5的本機(jī)儲(chǔ)存，但仍有一些部分的實(shí)作需要考量。王森也有類似觀察，他說(shuō)，就算是GoogleDocs，應(yīng)用上也遇到一些限制，如同步機(jī)制。目前網(wǎng)頁(yè)應(yīng)用的同步機(jī)制并沒(méi)有標(biāo)準(zhǔn)化的做法。此外，這樣的機(jī)制能否具有儲(chǔ)存大量資料的能力，也令人感到疑慮。

關(guān)于本機(jī)儲(chǔ)存如何運(yùn)用，普奇科技ZK核心開發(fā)團(tuán)隊(duì)的工程師王景弘表示，首先要考量用途是傾向于作動(dòng)態(tài)資料的快取，或是靜態(tài)資料之類的儲(chǔ)存？由于使用者還是需要資料的同步更新，使用者切換不同瀏覽器去存取網(wǎng)頁(yè)的行為也很常見，所以這種單靠本地的資料庫(kù)，去儲(chǔ)存所有的資料的狀況，目前還不容易發(fā)生。

此外，王景弘也觀察到網(wǎng)頁(yè)瀏覽器目前對(duì)HTML5本機(jī)資料庫(kù)提供的支援，仍以No-SQL（這里所指的是IndexedDatabase）的部分居多，因?yàn)镹o-SQL是新興的資料儲(chǔ)存方式，還有待發(fā)展。

Canvas讓開發(fā)人員能直接用網(wǎng)頁(yè)繪出圖形

先前HTML不具備繪圖的機(jī)制，因此開發(fā)人員常需先做出圖片檔才能達(dá)到效果，但同時(shí)還必須處理圖片互相遮蔽的狀況。而HTML5提供了Canvas（畫布）的方式后，現(xiàn)在開發(fā)人員可直接用JavaScript來(lái)繪制矩形、圓形、多角形、圖片影像、圖表、動(dòng)畫。

王景弘說(shuō)，Canvas預(yù)設(shè)是透明的，所以就可以任意疊加∕畫在其他元素上。Canvas也可以用來(lái)繪制3D圖形，也就是所謂的WebGL。相較之下，以前缺乏有效的方案。

Canvas不只是提供2D與3D繪圖，能應(yīng)用在游戲上，在商用軟體的領(lǐng)域中，Canvas也能發(fā)揮特色，例如許多應(yīng)用程式中，常見的統(tǒng)計(jì)圖表描繪，目前已經(jīng)有一些廠商推出基于HTML5Canvas所開發(fā)的圖表庫(kù)。

此外，也有廠商思考Canvas能否達(dá)到其他目的。睿揚(yáng)知識(shí)產(chǎn)品國(guó)際事務(wù)處CRM云端服務(wù)部經(jīng)理?xiàng)顤|城表示，他們會(huì)考慮讓使用者在App中，利用畫圖的方式來(lái)寫報(bào)告，或是記錄客戶的記事。

提供觸碰事件的處理能力

網(wǎng)頁(yè)應(yīng)用程式原本就支援滑鼠事件的處理，然而針對(duì)觸碰式的設(shè)備，如智慧型手機(jī)或平板電腦，若繼續(xù)用滑鼠事件對(duì)應(yīng)，相關(guān)的操作可能會(huì)受到限制。

現(xiàn)在，HTML5將觸碰裝置的使用列入規(guī)范，它提供介面讓應(yīng)用程式可以直接處理觸碰事件，以及多點(diǎn)觸碰裝置。它目前支援touchstart、touchend、touchmove、touchcancel等4種觸碰事件的處理。

王景弘認(rèn)為，當(dāng)使用者使用支援觸碰的裝置上網(wǎng)時(shí)，使用體驗(yàn)將大幅改變：舉凡以雙指進(jìn)行縮放、單指移出∕移入、多點(diǎn)觸碰等，這些都有機(jī)會(huì)改變?nèi)藗儾僮骶W(wǎng)頁(yè)的習(xí)慣。隨著這類裝置的普及，人機(jī)介面可能會(huì)與現(xiàn)在大相徑庭，而這也有助于開發(fā)者對(duì)操作介面的運(yùn)用，開拓出新的想像空間。而HTML5將觸碰事件列入規(guī)范，也能避免各家實(shí)作不一的窘境。

使伺服器端與個(gè)人端能雙向通訊的WebSocket

過(guò)去，網(wǎng)頁(yè)與瀏覽器之間只能透過(guò)HTTP，用Stateless的Request、Response方式來(lái)互動(dòng)，現(xiàn)在HTML5可允許用WebSocket在兩端建立雙向通訊管道，而不需要重新建立連線。但這么做之后，很多人會(huì)擔(dān)心應(yīng)用的安全性會(huì)有疑慮。

王景弘提到，當(dāng)初WebSocket的設(shè)計(jì)是為了解決無(wú)法即時(shí)∕隨時(shí)傳輸?shù)膯?wèn)題，而沒(méi)有考慮到安全性的部份。使用者可能開啟多個(gè)WebSocket來(lái)對(duì)伺服器發(fā)動(dòng)DDoS攻擊，特別是網(wǎng)頁(yè)遭到惡意程式碼攻擊時(shí)（例如XSS）。也有一些人討論它被用作Proxy的可能性（攻擊、存取其他遠(yuǎn)方伺服器）。

因?yàn)榘踩缘膯?wèn)題，F(xiàn)irefox（第4版和第5版）和Opera（第11版)一度移除WebSocket。這規(guī)格因?yàn)檫€在草案的關(guān)系，變化相當(dāng)快，去年底IETF新發(fā)布的RFC6455，對(duì)規(guī)格有所編修。而目前支援RFC6455的瀏覽器已有Chrome16和Firefox11，而AppleSafari5.0.2/5.1、iOS4.2/55支援的WebSocket規(guī)格，是較早的草案（hixie-76）。

可獲得使用者地理位置資訊的Geolocation

不論是App或網(wǎng)頁(yè)應(yīng)用程式，結(jié)合地理位置感知的服務(wù)（Location-BasedService）已相當(dāng)風(fēng)行，而透過(guò)Geolocation的運(yùn)用，例如使用者所在的經(jīng)度、緯度、海拔高度，以及行進(jìn)方向、速度等資訊，網(wǎng)頁(yè)應(yīng)用程式可經(jīng)由裝置本身的GPS定位功能提供，或從網(wǎng)路上取得，充分發(fā)揮設(shè)備本身的特色。

楊東城提到，在他們的CRM產(chǎn)品應(yīng)用中，可運(yùn)用此功能來(lái)記錄使用者的所在地，提供類似打卡的功能。同時(shí)，根據(jù)使用者目前的位置，還能用來(lái)幫助業(yè)務(wù)員找出正在附近活動(dòng)的客戶，讓他可以隨時(shí)就能去拜訪戶。

除了定位，HTML5還可以讓網(wǎng)頁(yè)應(yīng)用程式存取聲音或影像的輸入裝置，例如麥克風(fēng)和網(wǎng)路錄影機(jī)（HTMLMediaCaptureAPI）、聯(lián)絡(luò)人（ContactsAPI）及裝置傾斜角度（DeviceOrientationEventAPI）等本機(jī)資料。

WebWorkers提供多工，瀏覽器可在背景執(zhí)行其他程式

運(yùn)用JavaScript時(shí)，通常每次只能執(zhí)行一個(gè)執(zhí)行緒，現(xiàn)在有了WebWorkers的機(jī)制，程式碼可以在背景執(zhí)行，獨(dú)立于其他使用介面執(zhí)行的程式碼之外，讓長(zhǎng)期執(zhí)行的程式可以持續(xù)運(yùn)作，不會(huì)受到部分需回應(yīng)使用者的動(dòng)作所中斷。盧育圣認(rèn)為，WebWorkers就像多執(zhí)行緒、多工。若應(yīng)用程式的執(zhí)行改成以瀏覽器、網(wǎng)頁(yè)技術(shù)為主，具有這項(xiàng)機(jī)制的HTML5將扮演很重要的角色。

降低圖片用量，讓版面配置更美觀的CSS3

很早的時(shí)候（1996年），CSS（CascadingStyleSheets）就已經(jīng)開始應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)上，對(duì)初學(xué)者而言，除了要搞懂HTML和JavaScript怎么寫之外，也要了解CSS如何設(shè)計(jì)與運(yùn)用。

對(duì)于CSS的存在，很多人的認(rèn)識(shí)是為了將網(wǎng)頁(yè)的內(nèi)容與呈現(xiàn)方式分開，而用它來(lái)控制網(wǎng)頁(yè)的風(fēng)格和外觀，目前相關(guān)規(guī)格已發(fā)展到Level3，簡(jiǎn)稱為CSS3。到了現(xiàn)在，HTML5在發(fā)展上，不只是要借助JavaScript的力量，W3C也將CSS3納入HTML5的范疇內(nèi)。

CSS細(xì)分多個(gè)部分，包含選擇器、背景與邊緣、文字特效、2D/3D變形、動(dòng)畫、多欄呈現(xiàn)和使用介面。

以文字的呈現(xiàn)為例，CSS可以開發(fā)人員用word-break和word-wrap等屬性，指定將內(nèi)容依視窗寬度自動(dòng)換行，也可以用column-count、column-gap等屬性，來(lái)設(shè)定欄位數(shù)量和欄位間隔距離。

對(duì)于顏色的透明度，CSS3也允許開發(fā)人員用Opacity屬性來(lái)操作。它同時(shí)也可以用Gradients來(lái)做到顏色漸層的效果。

CSS3中還有一個(gè)特別受到很多人歡迎的屬性，那就是border-radius。以網(wǎng)頁(yè)開發(fā)人員要將特定區(qū)塊或按鈕做成是邊緣有圓角的樣式，往往得借助圖片來(lái)進(jìn)行，有這個(gè)屬性后，單靠CSS就可以達(dá)到目的。

王景弘說(shuō)，HTML5+CSS3可以簡(jiǎn)化一些Layout組成的方式，例如按鈕可以很彈性地放大、縮小。以前要讓按鈕有圓邊、陰影，需透過(guò)切九宮格或十幾宮格的方式規(guī)畫，相當(dāng)麻煩。現(xiàn)在在HTML5和CSS3就已經(jīng)支援，省了很多功夫。

文章名稱：HTML5技術(shù)的關(guān)鍵特色HTML5+CSS3將流行
轉(zhuǎn)載源于：http://muchs.cn/news49/325299.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、軟件開發(fā)、網(wǎng)站收錄、App開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)