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

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

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

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

HTML5涵蓋的范圍

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

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

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

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

有哪些特色？從W3C的觀點來看，他們整理出8個：語意、離線與儲存、裝置存取、連線、多媒體、效能與整合與CSS3。接下來，我們將針對其中幾項加以介紹。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

提供觸碰事件的處理能力

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

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

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

使伺服器端與個人端能雙向通訊的WebSocket

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

廣告

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