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