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