HTML 5與瀏覽器們不得不說(shuō)的故事
原創(chuàng)【51CTO 1月7日外電頭條】最近10年以來(lái)HTML一直在試圖成為一個(gè)更好的RIA解決方案。最初是CSS，后來(lái)又有了AJAX和Web 2.0；但是直到HTML 5迅速發(fā)展之后，Adobe Flash、微軟Silverlight和HTML之間的界線才開(kāi)始逐漸變得模糊。本篇文章將介紹新的HTML 5標(biāo)準(zhǔn)，諸如Canvas、Video和大幅改進(jìn)的CSS。更重要的是，你將了解到應(yīng)該使用哪一個(gè)瀏覽器才能充分利用最新HTML 5技術(shù)。
51CTO編輯推薦：HTML 5 下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)詳解
HTML 5：成長(zhǎng)的故事
1997年，萬(wàn)維網(wǎng)聯(lián)盟(W3C)發(fā)布了HTML 4.0，它是影響Web設(shè)計(jì)者和開(kāi)發(fā)者的最近一個(gè)重大版本。盡管幾年后推出了XHTML，但并未帶來(lái)多大影響。在最近10多年中，HTML標(biāo)準(zhǔn)一直處于停滯狀態(tài)。
在過(guò)去10年中，AJAX和Web 2.0技術(shù)已經(jīng)非常普遍。不過(guò)，實(shí)現(xiàn)吸引人的新體驗(yàn)往往必須借助于一個(gè)插件來(lái)實(shí)現(xiàn)，諸如Adobe的Flash。2004年，WHATWG(網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組)組織開(kāi)始研發(fā)一個(gè)名為Web Application 1.0的項(xiàng)目，后來(lái)該項(xiàng)目更名為HTML 5，現(xiàn)在被W3C所支持。
據(jù)稱(chēng)HTML 5是HTML標(biāo)準(zhǔn)史上最重大和最復(fù)雜的一次升級(jí)。理由很簡(jiǎn)單，它需要應(yīng)對(duì)Flash、Silverlight和JavaFX等技術(shù)的挑戰(zhàn)，否則將淪為一個(gè)次要技術(shù)。交互性和富體驗(yàn)應(yīng)用將專(zhuān)門(mén)由第三方插件來(lái)處理。
HTML 5標(biāo)準(zhǔn)尚處于發(fā)展之中，還需要兩年時(shí)間才能推出草案（51CTO編者注：HTML 5最新的時(shí)間表在之前的《HTML 5捷報(bào)頻傳 三年后將廣泛應(yīng)用》一文中有比較詳細(xì)的介紹，該文還闡述了可能會(huì)影響HTML 5發(fā)布進(jìn)度的一些因素），其包含的部分主要技術(shù)包括：新HTML元素和屬性；自帶支持Video和Audio功能；Canvas和SVG實(shí)現(xiàn)可編程繪圖操作；CSS 3；JavaScript 2.0。預(yù)計(jì)將來(lái)還有可能增加更多部分。
基礎(chǔ)元素
在HTML 5中，很多對(duì)核心元素的修改是為了讓用戶更有效的控制顯示在屏幕上的數(shù)據(jù)。和以前支持PRE、FONT和BlINK等格式元素的早期HTML標(biāo)準(zhǔn)不同的是，HTML 5中的許多新元素目的是讓用戶更有效的組織在HTML代碼中的內(nèi)容。
在網(wǎng)頁(yè)代碼首行添加如下代碼即可表示其屬于HTML 5代碼：
- <!DOCTYPE HTML>
HTML 5的主要新元素包括：Header、Footer、Section、Article和Aside。當(dāng)用戶設(shè)計(jì)一個(gè)頁(yè)面時(shí)，能夠直觀地在屏幕不同部分放置內(nèi)容。示例頁(yè)面圖如下：
使用Header和Footer等新HTML 5元素，用戶可以準(zhǔn)確的描述其內(nèi)容，例如，以下是符合要求的HTML 5代碼：
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Title of the document</title>
- </head>
- <body>
- <header>Add Search Engine and main links </header>
- <section>
- <article>The first article goes here</article>
- <article>The second article goes here</article>
- <article>The third article goes here</article>
- <aside>A side bar definition goes here</aside>
- </section>
- <footer>Copyright Matthew David 2010</footer>
- </body>
- </html>
使用這些新元素可以讓用戶獲得兩大優(yōu)勢(shì)：使HTML代碼更易讀；搜索引擎可以理解頁(yè)面中內(nèi)容的價(jià)值。舉例來(lái)說(shuō)，相比Footer元素中的內(nèi)容，article元素下的內(nèi)容可以更優(yōu)先被建立索引。
另外，HTML 5還支持VIDEO、AUDIO和CANVAS等新元素，可以讓用戶增加復(fù)雜的富體驗(yàn)媒體內(nèi)容，來(lái)挑戰(zhàn)Flash和Silverlight等RIA技術(shù)。（51CTO參考閱讀：HTML 5中將被舍棄以及將被強(qiáng)化的元素）
作為一等公民探索Video和Audio
現(xiàn)在互聯(lián)網(wǎng)上視頻資源眾多，為了解決這種用戶需求，HTML 5包含了對(duì)兩個(gè)新元素的支持：Video和Audio，使用Video元素非常簡(jiǎn)單，如下所示：
- <video src="myMovie.ogg"></video>
而且你還可以對(duì)Video元素使用自動(dòng)播放、播放控制、寬高度和循環(huán)播放等屬性。Audio也非常容易添加，以下HTML代碼播放一個(gè)音頻文件。
- <audio src="sampleSong.ogg" controls="controls">
在HTML 5之前，用戶必須組合使用OBJECT和EMBED元素來(lái)增加視頻到頁(yè)面中，而且需要插件支持，諸如Adobe的Flash。而HTML 5則試圖通過(guò)直接增加視頻CODEC（編解碼器）到瀏覽器中，而繞開(kāi)Windows Media Player、Flash或DIVX插件，通過(guò)編解碼器技術(shù)可以把一個(gè)大視頻文件轉(zhuǎn)化成許多更小的流格式文件。目前HTML 5支持兩個(gè)編解碼器標(biāo)準(zhǔn)：H.264視頻標(biāo)準(zhǔn)和開(kāi)源視頻編碼Ogg，它們實(shí)現(xiàn)的視頻質(zhì)量并不差，而且無(wú)專(zhuān)利權(quán)限制。
谷歌的Chrome、蘋(píng)果的Safari和火狐3.6支持HTML 5的VIDEO和AUDIO元素。
使用Canvas繪畫(huà)
過(guò)去如果用戶希望開(kāi)發(fā)RIA應(yīng)用，可能要被迫使用Java等插件技術(shù)。HTML 5限制支持一個(gè)名為CANVAS的新富體驗(yàn)媒體元素，讓用戶可以無(wú)需插件就實(shí)現(xiàn)RIA體驗(yàn)，它可以讓用戶以編程方式繪制2D圖像。
CANVAS元素主要依賴(lài)JavaScript來(lái)實(shí)現(xiàn)繪圖?；镜腃ANVAS元素包含寬度、高度和ID屬性，如下所示：
- <canvas id="myCanvas" width="500" height="500"></canvas>
我們可以使用如下JavaScript代碼來(lái)描述CANVAS內(nèi)容：
- <script type="text/javascript">
- function draw(){
- var canvas = document.getElementById('myCanvas');
- if (canvas.getContext){
- var defineContext = canvas.getContext('2d');
- }
- }
- </script>
CANVAS元素還在繼續(xù)發(fā)展。2009年早些時(shí)候，Mozilla提出了CANVAS 3D，能夠無(wú)需插件在頁(yè)面中展示3D模型。
在HTML 5中使用CSS 3
在HTML 5中，元素被用來(lái)在描述層面上安排和規(guī)劃內(nèi)容。這并不意味著頁(yè)面會(huì)非常美觀。頁(yè)面上內(nèi)容的展現(xiàn)還要通過(guò)CSS 3來(lái)控制。但是，使用CSS 3來(lái)描述頁(yè)面外觀并非是HTML 5首創(chuàng)。CSS技術(shù)最初在1997年亮相，目前在HTML 5中是其第三個(gè)主要版本。幸運(yùn)的是，CSS 3向前兼容CSS 1和CSS 2。
CSS 3引入了許多用戶可以在頁(yè)面上使用的新設(shè)計(jì)工具，其中部分包括：嵌入式字體、陰影和動(dòng)畫(huà)。
HTML 5采用新技術(shù)來(lái)支持真正的字體嵌入。其中三種值得推薦的潛入字體標(biāo)準(zhǔn)是：TrueType、OpenType和Scalable Vector Graphic Fonts。
另外，用戶還可以增加陰影效果。陰影效果一直是圖形化設(shè)計(jì)工具的重要一部分?，F(xiàn)在用戶通過(guò)使用CSS3可以輕松對(duì)文本和對(duì)象添加陰影效果，以下CSS定義是陰影效果示例代碼之一：
- .dropShadow {
- font-family: "Segoe UI", Tahoma, Geneva, Verdana;
- font-size: medium;
- color: #CC3300;
- text-shadow: 0.25em 0.25em 2px #999;
- }
現(xiàn)在普通的頁(yè)面已經(jīng)不能滿足用戶需求。添加可視化交互元素是必須的。為了解決這個(gè)問(wèn)題，CSS 3包含了對(duì)動(dòng)畫(huà)的支持。以下HTML和CSS 3樣式允許用戶在屏幕上增加一個(gè)跳動(dòng)的文本塊：
- <html>
- <head>
- <title>Bouncing Box example</title>
- <style type="text/css" media="screen">
- @-webkit-keyframes bounce {
- from {
- left: 0px;
- }
- to {
- left: 400px;
- }
- }
- .animation {
- -webkit-animation-name: bounce;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: 4;
- -webkit-animation-direction: alternate;
- position: relative;
- left: 0px;
- }
- </style>
- </head>
- <body>
- <p class="animation">
- The text bounces back and forth
- </p>
- </body>
- </html>
動(dòng)畫(huà)的控制是通過(guò)使用樣式表完成的。主要從兩方面進(jìn)行控制，首先是動(dòng)畫(huà)的類(lèi)型；其次是動(dòng)畫(huà)的對(duì)象。
目前該示例代碼僅能運(yùn)行在最新版Safari瀏覽器和谷歌Chrome瀏覽器中。有關(guān)CSS 3的具體情況，可參考51CTO之前的譯文《CSS 3中的炫目新功能搶先預(yù)覽》。
瀏覽器對(duì)HTML 5的支持情況
目前用戶使用的Web瀏覽器大體可化為兩類(lèi)：一是現(xiàn)代Web瀏覽器，其中包括Mozilla的火狐、蘋(píng)果的Safari、谷歌的Chrome和Opera瀏覽器；二是微軟的IE瀏覽器。
火狐建建立在開(kāi)源Ghecko瀏覽器引擎之上。同樣，Safari和Chrome使用了開(kāi)源WebKit瀏覽器引擎。這兩類(lèi)瀏覽器都使用了第三方開(kāi)源項(xiàng)目Cairo來(lái)展現(xiàn)諸如CANVAS、CSS和HTML 5等可視化元素。這三個(gè)瀏覽器之所以能夠快速采用新標(biāo)準(zhǔn)，與它們背后支持開(kāi)源項(xiàng)目的公司有直接關(guān)系（51CTO編輯注：這些公司即Google、Opera以及Mozilla，還有蘋(píng)果），而且這些公司有小部分工程師可以投身于WebKit等項(xiàng)目。令人驚訝的是，像Opera這樣的小公司也能夠與谷歌和蘋(píng)果在支持標(biāo)準(zhǔn)方面相媲美。
#t#另一個(gè)陣營(yíng)的代表是微軟。自從上世界90年代以來(lái)，微軟一直統(tǒng)治著Web世界。盡管其瀏覽器市場(chǎng)份額不斷下滑，但依然有超過(guò)65%的網(wǎng)民選擇使用IE瀏覽器。更令人吃驚的是，大約有26%用戶依然在使用具有8年歷史的IE6。問(wèn)題是微軟最新的瀏覽器版本IE 8不支持任何HTML 5功能，它不支持CANVAS、VIDEO或CSS 3。不過(guò)，微軟已經(jīng)開(kāi)始改變其對(duì)HTML 5的態(tài)度，2009年夏天微軟加入了對(duì)HTML 5標(biāo)準(zhǔn)的討論，而且在2009年P(guān)DC大會(huì)上演示了一個(gè)支持HTML 5功能早期版IE9。
除了桌面計(jì)算機(jī)之外，另外一個(gè)支持HTML 5的領(lǐng)域是手機(jī)設(shè)備。在蘋(píng)果iPhone和谷歌Android的帶領(lǐng)下，智能手機(jī)市場(chǎng)已經(jīng)呈現(xiàn)爆炸式增長(zhǎng)。這兩類(lèi)手機(jī)的Web瀏覽器都是使用WebKit的分支項(xiàng)目，因此完全支持HTML 5。
很明顯，HTML 5依然很長(zhǎng)的路需要走。它將被越來(lái)越多地應(yīng)用在手機(jī)、平板電腦和上網(wǎng)本中。PC市場(chǎng)可能將繼續(xù)被IE瀏覽器所壟斷，不過(guò)下一版本的IE將支持HTML 5。當(dāng)然，如果你想提前體驗(yàn)HTML 5功能，你可以使用最新版的火狐、Chrome或Safari。
原文：Inside HTML 5: The Browser becomes a first class RIA citizen 作者：Matthew David
