現(xiàn)在如何在你的站點上使用HTML 5
已經(jīng)有許多文章是關(guān)于HTML 5的了，例如“HTML 5時代來臨”和“HTML 5會如何改變網(wǎng)絡(luò)”之類的，但是對于Web開發(fā)人員來說，最主要需要知道的是：我現(xiàn)在可以用上HTML 5來做些什么，我怎么開始使用它？好消息是現(xiàn)在已經(jīng)有不少的HTML 5里的東西可以使用了。
51CTO推薦閱讀：從零開始構(gòu)建HTML 5 Web頁面
但是，開始你就必須要明白一件事情，你需要知道你的受眾如何，否則的話你就不該使用HTML 5。假如你的站點的訪問大部分人都是在使用IE 6，那么你完全沒有任何理由使用HTML 5。另一方面，如果你站點的訪問者都是使用手機瀏覽器，如iPhone和iPad，那么你還在等什么呢？馬上就可以開始動手了！等等，這里有一些準則，看完再動手不遲。
你現(xiàn)在可以使用哪些HTML5特性？
雖然HTML 5標準現(xiàn)在仍然是個草案，在標準化組織手里依然還在商討，但是重要的部分已經(jīng)被許多現(xiàn)代的瀏覽器實現(xiàn)了。Apple Safari, Google Chrome, Mozilla Firefox, Opera和Microsoft IE 9都已經(jīng)很好的支持了HTML 5的部分特性。先來看看各瀏覽器在HTML 5 TEST網(wǎng)站上的得分如何：
- * Apple Safari 5.0: 208
- * Google Chrome 5.03: 197
- * Microsoft IE7: 12
- * Microsoft IE8: 27
- * Mozilla Firefox 3.66: 139
- * Opera 10.6: 159
看起來很明顯，非IE核心的主流瀏覽器大部分都對HTML 5支持良好，它們可以使“使用了HTML 5草案的網(wǎng)站”工作得很好?；氐介_始，你現(xiàn)在就可以使用HTML5的doctype了，沒有理由不使用，你甚至可以在整個網(wǎng)站里進行查詢和替換：
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
- “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
- <html xmlns=”http://www.w3.org/1999/xhtml”>
變?yōu)椋?/p>
- <!DOCTYPE html>
- <html>
下面這部分代碼看起來更簡潔和直接，不是嗎？如果瀏覽器用一個標準兼容的方式來渲染你的網(wǎng)頁，那么他們現(xiàn)在仍然會這么做。說說視頻吧。許多關(guān)于HTML5的出版物都會提及到目前的競爭者，一共四個：Flash, H.264， OGG和WebM。所有這些在未來都有可能成為一個標準格式，而且沒有一個可以在所有平臺所有瀏覽器上正確播放，很悲哀吧，看起來，瀏覽器的贊助商們在短 時間內(nèi)還沒有為這個特性準備一個公共的格式。
所以，顯而易見的是，Video標簽現(xiàn)在還沒有到可以應(yīng)用的階段。但是等下，人們應(yīng)該期待HTML5的視頻標簽是與格式無關(guān)的。事實上，因為視頻可 以包含多個Source標簽，它也必須得這樣工作。如果你的瀏覽器不支持***個選項，那么就會去嘗試第二個，再第三個，四個，五個……
處理這樣的情況的HTML是一個開源項目，支持基于網(wǎng)絡(luò)的視頻，不使用任何腳本和瀏覽器嗅探，可以在這里找到。從語義上講，HTML5的一個大的改變就是那些語義明確化的標簽?？梢钥吹降母淖兪?，目前你的站點上充滿了類似于這樣的代碼：
- <div id=”header”> <span class=”nav”>
而在HTML5中，你可以這樣表示：
- <header> <nav>
是不是語義更明確？當然，我們還是要用CSS[層疊樣式表]來格式化這些元素。但是等等，沒有一個IE版本可以支持這些標簽！這對于人們來說是一個 巨大的問題！我們真的這么倒霉嗎？謝天謝地，我們還有一個解決方案：所有你需要做的事情就是把下面的代碼粘貼到你的頁面的HEAD標簽里：
- <!–[if lt IE 9]>
- <script src=
- "http://html5shiv.googlecode.com/svn/trunk/html5.js">
- </script>
- <![endif]–>
HTML5 Shiv是一個開源的項目，基于一個簡單的發(fā)現(xiàn)：如果你在IE里創(chuàng)建了一個DOM元素，那么你就可以用那個名字在樣式里使用。例如，如果你使用：
- document.createElement(“foo”)
創(chuàng)建了一個DOM元素，那么你就可以在當前頁面里加入任意數(shù)量的foo標簽，而且IE會格式化它們。HTML5 Shiv里包含了一些IE不能識別的HTML5元素，然后一個一個的去創(chuàng)建它們。這樣你就可以使用這些HTML5標簽了，例如：
- Article, Section, Header, Footer, Nav
智能表單，另一個使HTML5更聰明的特性。如果你對于每次寫同樣的腳本去檢查郵件地址的合法性或者類似于電話號碼、網(wǎng)絡(luò)地址之類的感到厭煩的話，那么你不是一個人！有理由去讓瀏覽器去完成這些煩人的工作，不是嗎？相當正確。
下面是語法：
- <input type="email">
- <input type="url">
- <input type="number">
- <input type="tel">
那些舊的瀏覽器會如何處理？比較聰明的部分：如果它們看到一個TYPE屬性有個值不認識的話， 那么它們就會用默認值Text去渲染這個元素，這正是我們所期望的向下兼容的結(jié)果。支持HTML5的瀏覽器會自動去驗證這個字段類型，但是，你***還是不 要把以前的腳本扔掉，至少——也要在IE9普及以后。
如果你還想知道除了驗證之外，支持這些類型的瀏覽器還做了些什么事情，那么你可以在iPhone上試試這些表單。你會注意到與表單關(guān)聯(lián)的鍵盤類型都 會發(fā)生變化，有的時候是數(shù)字類型的，有的時候是字母類型但附加了一個@符號，還有的甚至直接有一個按鍵.com，這就是這些元素的魔力。所有你需要做的就 是改變這個type的屬性值而已。還可以更智能一點，這里還有個新屬性：
#p#
placehoder
這個值可以簡單地指定一段文本，你經(jīng)常在網(wǎng)上看到的效果，沒值的時候顯示此文本，單擊的時候值變成空，離開又恢復(fù)成該文本，以前要用到Javascript處理，現(xiàn)在瀏覽器會為你做這個事情了。
- <input type="email" placeholder="Your email address">
有哪些HTML5特性你馬上就可以使用？
不是所有的HTML5元素都已經(jīng)準備好可以使用了，因為種種原因（這些原因是沒有一個縮寫為 IE 的），瀏覽器支持馬上就要來了，在不遠的未來，你馬上就有兩個元素可以使用了。
魔幻字體，每個設(shè)計師都有一個夢想，希望站點的訪問者們都安裝了他們在設(shè)計時所需要的字體，為此，以前可謂手段 百出，用圖片，F(xiàn)lash等等不一而足，現(xiàn)在，他們擁有了這個權(quán)利，你可以強制你的訪問者安裝你指定的字體了。這就是CSS3的支持： @font-face屬性。Firefox 3.5以前的版本和Safari的移動版本(iOS 4之前）不支持這個屬性，如果你的站點有很多這樣類似的訪問，那么你可能就得等等了。
無論如何，其實沒有真正的理由，讓所有的瀏覽器都使用同一種字體的。如果你想提供給那些支持此屬性的瀏覽器以自定義字體，然后讓不支持此屬性的瀏覽器有一個可替代的字體也是一個不錯的解決方案，這個時候，F(xiàn)ont Squirrel’s @font-face 生成器 是個不錯的去處。
陰影和圓角，讓很多設(shè)計師高興的東西來了，文本陰影、區(qū)塊陰影，區(qū)塊圓角特性等現(xiàn)在都CSS3支持的標準了。再說一次，如果你不想用像素級別的***來衡量在不同瀏覽器中的渲染的話，那么你現(xiàn)在就可以開始使用這些特性了。CSS3 生成器 會幫助你做好這事。
圓角 (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+)
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
文本陰影 (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+)
- text-shadow: 5px 5px 3px #CCC;
區(qū)塊陰影(Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):
- -webkit-box-shadow: 10px 10px 5px #666;
- -moz-box-shadow: 10px 10px 5px #666;
- box-shadow: 10px 10px 5px #666;
哪些特性有一天你會用到？
這個目錄里包含了開發(fā)人員和設(shè)計師已經(jīng)想了很多年的特性。可惜的是，在它們能夠在現(xiàn)實世界真正使用之前，可能還得再等上幾年時間。智能表單，前面已經(jīng)提到過了，但是其實還有很多更好用的元素沒有提及，但在更廣泛的支持之前，是沒有辦法使用的。
滑動選擇器：
- <input type="range" min="0" max="100" step="2" value="50">
顏色選擇器：
- <input type="color">
日期選擇器：
- <input type="date">
帶有正則驗證的輸入框：
- <input type="text" pattern="[0-9]{13,16}">
必須輸入的輸入框:
- <input type="text" required>
#p#
所有這些標簽都沒有跨瀏覽器，跨平臺實現(xiàn)支持，不過當那天到來的時候，你一定會很向往使用這些標簽的。打印式布局，另一個CSS3的特性，全面實施尚需好幾年的時間。給設(shè)計師們提供了多列布局的特性。目前只能在Firefox和Safari的測試用例里實現(xiàn)。
- -moz-column-count: 3;
- -moz-column-gap: 20px;
- -webkit-column-count: 3;
- -webkit-column-gap: 20px;
地理位置檢測，隨著基于位置的服務(wù)增長，例如Gowalla和Foursquare，對于瀏覽器來說，知道用戶 在哪里是很有用的。所以，基于手機的移動瀏覽器率先實現(xiàn)這個特性也就不足為奇了，F(xiàn)irefxo 3.5和Safari 5已經(jīng)開始提供地理定位的支持了。(Chrome的類似服務(wù)是通過Gears實現(xiàn)的，不過正在逐步轉(zhuǎn)向到HTML5上面）。
離線工作和本地存儲，在你沒發(fā)現(xiàn)你沒有網(wǎng)絡(luò)連接的時候，將數(shù)據(jù)存儲在云端是非常偉大的主意；或者你有一個應(yīng)用程 序，需要處理大量的數(shù)據(jù)，這樣就不得不頻繁地在服務(wù)端和客戶端之間往來，比你想像得到的還要多；又或者你的移動數(shù)據(jù)流量有限，你想在手機上存儲更多的數(shù)據(jù) 以避免太多的流量損耗，這個時候的答案就是，使用本地儲存來使應(yīng)用程序離線工作，當連線的時候再同步到云端的功能。
支持此功能的瀏覽器有：Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+。
畫板、動畫和變換效果，HTML 5的承諾之一使用Canvas元素和一些CSS3屬性可以實現(xiàn)是全說明和全動畫的網(wǎng)站。這來自2010年7月12號的標準。
使用最***的HTML 5的捷徑
如果你已經(jīng)迫不及待地想IE 8老死掉，那么，有很多種方法可以跳過它繼續(xù)往前——再說一次，依然取決于你的訪客。查看一下你的站點的訪問日志，看看 訪問量最多的瀏覽器標頭是什么。這其中有一種方法就是，例如，使用Google的Chrome Frame，給IE嵌入了一個Chrome實例，如果你明白你站點的訪問者可能已經(jīng)安裝了GCF[Google Chrome Frame]，那么你可以在你的HEAD里加上一行META標簽，強制IE瀏覽器使用GCF來顯示你的網(wǎng)站：
- <meta http-equiv="X-UA-Compatible" content="chrome=1">
再加上一小段的Google提供的腳本，可以讓沒有安裝GCF的用戶跳轉(zhuǎn)到GCF的安裝頁面，那么你也許可以跳過IE的限制。列舉在本篇文章里的元素只是當前HTML 5和CSS 3草案中的一小部分，如果你不得不使用另外的一些新特性，那么去檢查一下現(xiàn)有的開源項目是很有必要的，這樣可以將瀏覽器兼容性的問題降到***。
許多媒體在報道HTML的時候都把焦點放在立場上面，什么“不到2022年”，什么“Flash殺手”之類的?，F(xiàn)實是，HTML 5是長期以來的需要和對久未更新的HTML 4的一次全新升級——所以，今天你就可以開始使用它了。
【編輯推薦】
