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