相關文章

3cd6597648366487ef7b4798ad328040 Chrome、Firefox、IE、Opera,透過瀏覽器使用的網站服務愈來愈強大,也愈來愈美觀,這可能是因為使用了 HTML5 技術。 HTML5 這個新一代的網路技術,讓網路程式的功能趕上了桌面軟體,讓純網路的作業環境變得更可能,各家瀏覽器的實際應用與未來發展,請看小編的介紹。

快速目錄:

不論你使用什麼瀏覽器,你一定聽過HTML5這個下一代的網路標準,不過HTML5到底是什麼呢?狹義的HTML5當然就是指新一代的超文本語言,用來取代現在製作網站的HTML4。不過廣義的HTML5則包含了HTML5、CSS3JavaScript等各種不同的技術,和過去的「Ajax」一詞涵意類似。

目前HTML5還處於非常初期的發展階段,2011年5月才進入Last Call Working draft,邀請開發者加入HTML5標準初稿制定的最後階段,因此許多標準都還有可能變動,目前W3C Working Group預計要到2014年,才會到達穩定的候選版(Recomadation)階段,這時多數標準都已經大致底定,不過Google在W3C HTML工作小組的編輯Ian Hickson曾猜測搞不到要到2022年才能達到這個目標。

▲目前最新版的HTML5標準是2011年5月的Last Call Working Draft。

HTML5的目的在於讓網路開發者能夠擺脫對於各種第三方外掛程式的依賴,加入了許多新的語言標記和格式支援,許多必須加上外掛後才能夠達到的功能,未來只要利用HTML5這個開放標準就可以達成,例如HTML5將支援視訊標記,讓瀏覽器不需依靠Flash就可以播放視訊或是音訊,另外也提供了網路攝影機、麥克風等多媒體裝置的支援,網路程式未來的功能也就更為多樣化。

▲依靠HTML5的新功能,網頁開發者可以製作出不輸Flash的效果。

雖然HTML5還在發展初期,不過已經出現了許多穩定而且實用的功能,因此包含Google、微軟、蘋果、Opera和Mozilla基金會在內的五大瀏覽器廠商,都迫不急待地在自家瀏覽器加入了適合自家的HTML5功能。這些較為穩定的HTML5功能可以分成以下8組。

HTML5 八大特色

離線與儲存

HTML5為開發者提供了儲存程式快取和簡易的資料庫功能,並可以指定線上和離線狀態時,要進行何種工作。這個功能讓網路程式在離線時也能夠正常運作,讓網際網路變身成一個系統平台。儲存功能由網路儲存空間、檔案存取和IndexedDB資料庫搭配而成,讓HTML5程式可以將網路上的檔案儲存在本機端。

▲在本機端離線修改後,也具備將檔案同步回伺服器的能力。

多媒體

HTML5的多媒體支援使用者已經聽到不要聽了吧,從YouTube支援HTML5影片播放,到Steve Jobs撰文批評Flash,並支持HTML5,都是媒體爭相報導的大事。HTML5支援直接插入影片、音訊等多媒體資源,不再需要第三方外掛

▲第三方外掛可能將走入歷史。

風格呈現

HTML5的另一個亮點就是搭配CSS3所能呈現出的網頁版面,CSS3提供了圓角、網路字型、轉場、2D和3D變型等功能,讓網頁的排版方式更為多樣,也讓網際網路可以變成最佳的電子書平台。

 

▲CSS3提供了多種字型,讓排版方式多變。

語意

HTML5加入了過去沒有的語意標籤,並修改了自上一代HTML和XHTML流傳下來的缺點,讓HTML的語意更為完善,也支援更多功能,讓HTML5能夠自給自足,成為一個完整的程式平台,而不需依靠第三方提供的外掛,例如影音播放、遊戲製作、版面安排等功能,都是HTML5新加入的重點功能。

▲加入新的語意標籤。

檔案存取

另一個HTML5的有趣功能就是它可以存取本地端的檔案系統,聽起來沒什麼好玩的。不過如果你想把桌面的檔案直接拖入網路程式中,就得依賴這個功能。檔案存取功能可以讓瀏覽器讀取檔案內容,例如你要上傳照片,瀏覽器就可以在上傳的同時顯示縮圖等。

▲桌面檔案直接丟進瀏覽器。

效能

HTML5有多種增加執行效能的功能,讓網路程式的反應速度更加貼進原生程式,例如使用程式快取、CSS3的轉場和動畫功能、背景執行JavaScript等,都可以提升網路程式的反應速度,讓使用者有更加愉快的使用體驗。

 

▲執行效能加速!讓你不用等。

圖像

瀏覽器的硬體加速想必大家都聽過,這是HTML5提供的圖像功能,讓瀏覽器能夠使用GPU的功能處理2D canvas、WebGL、SVG、CSS 3D變形等功能,讓網頁能夠在使用更先進的圖像時,保持網頁的反應速度。

 

▲讓瀏覽器增強3D、2D效果。

連結性

HTML5的最後一個特點資訊傳遞方式的增強,HTML5提供WebSocket協定,讓本地端和伺服器之間能夠保持通訊連線,降低資料傳遞的反應時間。開發者還能利用HTML5擷取本地端裝置的功能,讓HTML5程式具有即時通訊功能。另外HTML5也加入了伺服器將訊息推送到客戶端的功能。

▲瀏覽器就是你的MSN!

延伸閱讀:

今天不嘴炮,5大瀏覽器跑HTML5測試

注意!本網站支援 HTML5

不必學語法!Google 幫你把 Flash 轉成 HTML5

(後面還有瀏覽器:Opera HTML5的介紹喔!)

使用 Facebook 留言

7f524153d85c1ff8bd42b9222c58b9d4?size=48&default=wavatar
2.  Ryan (發表於 2012年1月13日 08:53)
...的IndexedDB功能,就由Microsoft和***Firefox***共同提出到W3C HTML工作小組中....

啊?
小烏賊
3.  小烏賊 (發表於 2012年1月13日 09:19)
真沒有想到當初的副屬品逐漸的成為主角^^
果然雲端時代來臨了<( ̄︶ ̄)>
Af517381e0b81c66b188ff741361be83?size=48&default=wavatar
4.  Alex (發表於 2012年1月13日 10:32)
覺得Google maps基於WebGL的MapsGL用起來相當好
已經可以日常使用,怎麼沒提到呢?
765dceabbef1428dc1435b6bcd79ebb3?size=48&default=wavatar
1人給推

7.  JJ (發表於 2012年1月13日 11:30)
這些東西要在國內普及,首先得要解決網速的問題,不然開一個網頁要等3~5分鐘也是很累人的〒ˍ〒
另外現階段HTML5的執行效率大半還有賴瀏覽器內建的JavaScript引擎速度,尤其在玩複雜的HTML5遊戲時,JavaScript引擎的好壞就很重要,在這問題尚未完全解決前,恐怕外掛程式還不會消失殆盡(回頭看很早就有的Flash、ActiveX以及近年推出的NaCl和其他廠商開發的瀏覽器外掛......)
黑羊
8.  黑羊 (發表於 2012年1月13日 11:48)
Flash也是一堆安全漏洞

比起沒有優化又肥大的外掛

這個真的好多了

是說 想支持silverlight又怕被微軟制約-.-
郭孝直
9.  郭孝直 (發表於 2012年1月13日 16:02)
請問HTML5 可「完全」取代下列所能做到的效果了嗎? 或者有哪些達不到的功能呢?
1. HTML4(含之前版本)
1a. XHTML
2. CSS3(含之前版本)
3. JavaScript
4. Adobe Flash (Player)
5. ActiveX 插件
6. Microsoft Silverlight
7. Google Gears
8. (RIA) Flex
9. CGI
謝謝!
Mengkuei Hsu
10.  Mengkuei Hsu (發表於 2012年1月13日 16:12)
※ 引述《Ryan》的留言:
> ...的IndexedDB功能,就由Microsoft和***Firefox***共同提出到W3C HTML工作小組中....
>
> 啊?

的確要用 Mozilla 比較正確,感謝提醒。
Mengkuei Hsu
11.  Mengkuei Hsu (發表於 2012年1月13日 16:25)
※ 引述《郭孝直》的留言:
> 請問HTML5 可「完全」取代下列所能做到的效果了嗎? 或者有哪些達不到的功能呢?
> 1. HTML4(含之前版本)
> 1a. XHTML
> 2. CSS3(含之前版本)
> 3. JavaScript
> 4. Adobe Flash (Player)
> 5. ActiveX 插件
> 6. Microsoft Silverlight
> 7. Google Gears
> 8. (RIA) Flex
> 9. CGI
> 謝謝!
>

HTML5不一定是要取代所有的網路技術,可以並存使用。
不過廣義的HTML5包含了HTML5+CSS3+JavaScript,並可以做到Flash和Silverlight的大部分功能,而且MS其實有慢慢放棄Silverlight轉向HTML5的跡像。

至於 Google Gears 則早宣布停止開發,改使用HTML5的離線功能。RIA基本上就只是Flash+HTML+CSS+JavaScript,並在Flash Player中執行的網路程式,我想HTML5的離線功能也可取代。

發表回應

謹慎發言,尊重彼此。按此展開留言規則