根據(jù)你們?cè)儐柕娜耍?a title="http://www.whatwg.org/" target="_blank">HTML 5不是邁向創(chuàng)造更語(yǔ)義化的網(wǎng)絡(luò)的下一 個(gè)重要步伐，就是用一系列不完整的標(biāo)簽和標(biāo)記大雜燴讓網(wǎng)絡(luò)陷入困境的災(zāi)難。

爭(zhēng)論雙方的問題在于，很少的站點(diǎn)在自然環(huán)境下使用HTML 5，所以現(xiàn)在所認(rèn)識(shí)到的問題的理論解決方案仍然在很大程度上未經(jīng)考驗(yàn)。

即便如此，我們不難發(fā)現(xiàn)下一代網(wǎng)絡(luò)標(biāo)記工具的好處和潛在的問題。

內(nèi)容

1.     HTML 5有什么不同？

2.     最終，一個(gè)任何人都可以記住的文檔類型

3.     最基本的語(yǔ)義結(jié)構(gòu)

1.     <header>

2.     <nav>

3.     <section>

1.     <article>

2.     <aside>

3.     <footer>

4.     把他們放在一起

5.     為新元素編寫樣式

6.     兼容老的瀏覽器

7.     現(xiàn)在你可以使用HTML 5了，但你會(huì)用么？

HTML 5有什么不同？

首先，我們通過HTML 5表達(dá)什么？First off, what do we mean by HTML 5?理論上，我們表達(dá)所有的事——新的語(yǔ)義結(jié)構(gòu)標(biāo)簽，例如canvas或者離線儲(chǔ)存等API規(guī)范，以及新的內(nèi)聯(lián)語(yǔ)義標(biāo)簽。盡管如此，我們把實(shí)際的原因 （PS：瀏覽器支持問題）僅僅局限于結(jié)構(gòu)標(biāo)簽。canvas，離線儲(chǔ)存，本地視頻或者地理定位API都很絕妙，然而他們還不能被所有瀏覽器一致的支持。

“但是等等”你說，“大多數(shù)瀏覽器也都不支持新的結(jié)構(gòu)元素！”這是真的，但他們中的絕大多數(shù)將 會(huì)很樂意去接受你想要?jiǎng)?chuàng)建的任何標(biāo)簽。甚至連IE6也可以處理新標(biāo)簽，盡管如果你想要使用CSS設(shè)置樣式，你需要一點(diǎn)JavaScript的幫助。

當(dāng)你對(duì)新標(biāo)簽設(shè)置樣式時(shí)，你需要記住一件事，那就是未知標(biāo)簽在大部分瀏覽器中沒有默認(rèn)樣式。他 們同時(shí)被認(rèn)為是行級(jí)元素。盡管如此，由于大部分HTML 5的新標(biāo)簽可以構(gòu)造，我們將讓他們擁有塊級(jí)元素的行為。解決方法是確認(rèn)你在CSS樣式中包含了display:block;。

為了幫助了解當(dāng)今HTML 5的一些新玩意兒，我們現(xiàn)在就進(jìn)入正題，開始使用一些新的結(jié)構(gòu)元素。

最終，一個(gè)任何人都可以記住的文檔類型

我們創(chuàng)建HTML 5文檔第一件需要做的事情就是使用新的文檔類型。現(xiàn)在，如果你還清楚的記得HTML 4或者XHTML 1.x的文檔類型，你真是一個(gè)比我們更強(qiáng)的淘氣鬼。每當(dāng)我們新建一個(gè)頁(yè)面，我們必須打開一個(gè)舊的文件，剪切并粘貼文檔類型定義。

這真是痛苦，也是為什么我們喜歡新的HTML 5文檔類型。你準(zhǔn)備好了么？他出現(xiàn)了：

不會(huì)太難記。簡(jiǎn)單并且容易理解。不區(qū)分大小寫。

這個(gè)構(gòu)想是停止HTML版本化，使向后兼容變得更容易。從長(zhǎng)遠(yuǎn)看是否成功是另外的事情，但至少 他節(jié)省了你輸入的平均時(shí)間。

最基本語(yǔ)義結(jié)構(gòu)

我們已經(jīng)將我們的頁(yè)面定義為HTML 5文檔。到現(xiàn)在為止，一切都還不錯(cuò)?，F(xiàn)在，這些我們已經(jīng)聽說的新標(biāo)簽到底是什么？

在我們鉆研新標(biāo)簽前，想想你一般網(wǎng)頁(yè)的結(jié)構(gòu)，大概像這樣：

這對(duì)于展示用途很好，但如果我們想要知道一些關(guān)于頁(yè)面元素包含什么的問題，這又怎么辦呢？

上面的例子中，我們?yōu)槲覀兯械慕Y(jié)構(gòu)div添加了ID。這在有見識(shí)的設(shè)計(jì)師中是很平常的事。目 的有兩個(gè)方面，首先，ID提供了可以能用于給頁(yè)面的特殊段落應(yīng)用樣式的錨，其次，ID充當(dāng)基本的偽語(yǔ)義結(jié)構(gòu)。高明的解析器將會(huì)查看標(biāo)簽的ID屬性，并嘗試 去猜測(cè)他們的含義，但當(dāng)每個(gè)站點(diǎn)的ID名稱不同的時(shí)候很難。

這就是新結(jié)構(gòu)標(biāo)簽到來的理由。

當(dāng)認(rèn)識(shí)到這些ID成為了慣例，HTML 5的締造者們更進(jìn)一步，使這些元素中的一部分變成他們獨(dú)立的標(biāo)簽。這兒有一個(gè)HTML 5中生效的新標(biāo)簽的快速概要：

<header>

頭部標(biāo)簽被設(shè)計(jì)作為關(guān)于一個(gè)章節(jié)或者一整張網(wǎng)頁(yè)介紹信息的容器。<header> 標(biāo)簽可以包含從你位于大多數(shù)頁(yè)面頂部的典型標(biāo)志或者標(biāo)語(yǔ)，到介紹一個(gè)章節(jié)的標(biāo)語(yǔ)和開場(chǎng)白的任何東西。如果你還在你的頁(yè)面里使用<div id=”header”>，那可以使用<header>替換

<nav>

nav元素非常明顯，這是你的導(dǎo)航元素。當(dāng)然什么被算為導(dǎo)航是有一些爭(zhēng)議的，有一個(gè)基本的站點(diǎn) 導(dǎo)航，但一些情況下還可能有頁(yè)面導(dǎo)航元素。HTML5的締造者WHATWG最近在修改<nav>的解釋，來表現(xiàn)怎樣在同一個(gè)頁(yè)面使用兩次。

更多關(guān)于nav的信息以及關(guān)于HTML5的激烈爭(zhēng)論，參見Jeffrey Zeldman關(guān)于nav元素的文章。

如果你還在使用<div id=”nav”>標(biāo)簽來包含你的頁(yè)面導(dǎo)航，你可以使用簡(jiǎn)潔的<nav>標(biāo)簽來替換。

<section>

Section可能是新標(biāo)簽中最模糊的。根據(jù)HTML 5定義，一個(gè)章節(jié)是一個(gè)內(nèi)容的主題集合，通常在header標(biāo)簽后，在footer標(biāo)簽前。但是如果 需要，section也可以相互嵌套。

在我們上面的例子里，被“content”標(biāo)記的div就是一個(gè)變?yōu)閟ection的很好的選 擇。另外在那個(gè)section內(nèi)，根據(jù)內(nèi)容，我們可以增加section。

<article>

根絕WHATWG的注釋，article元素可以包含“組成文檔或站點(diǎn)獨(dú)立部分的一段內(nèi)容；例 如，雜志或者新聞的文章，或者博客條目。”

記住一個(gè)頁(yè)面里可以有多個(gè)article標(biāo)簽；例如一個(gè)博客首頁(yè)可能有最新的十篇文章，每一篇 包含在一個(gè)article標(biāo)簽內(nèi)。Article也可以通過使用section標(biāo)簽分為多個(gè)段落，然而當(dāng)你計(jì)劃你的結(jié)構(gòu)時(shí)需要稍微仔細(xì)一些，否則你容易引 起以一些難看的標(biāo)簽大雜燴結(jié)尾的情況。

<aside>

另一個(gè)相當(dāng)模糊的標(biāo)簽，aside元素用于“與組成文檔主要的正文流內(nèi)容無關(guān)的”內(nèi)容。那表示 一條附加的評(píng)論，內(nèi)聯(lián)的腳注，引用，注解或者像你看到的在這篇文章右邊的更多典型的邊欄內(nèi)容。

根據(jù)WHATWG的注釋，看起來<aside>可以用于所有的這些情況，盡管你邊 欄里的引用和標(biāo)簽云有著很大的不同。

沒人說HTML 5是完美的！

<footer>

Footer的用處也應(yīng)該是很明顯的，除了可能你不清楚可以擁有多個(gè)腳標(biāo)。換句話說，除了通常 在大多數(shù)頁(yè)面底部看到的主腳標(biāo)，段落也可以含有腳標(biāo)。

把他們放在一起

讓我們使用新標(biāo)簽重新編寫我們?cè)瓉淼睦樱?/p>

非常清楚，并且容易理解，不是么？一些注釋：我們可以在header標(biāo)簽中包含我們 的<h1>My Article</h1>標(biāo)題。我沒有這樣做，因?yàn)閔1元素已經(jīng)表達(dá)了標(biāo)題的含義，但如果你還有發(fā)布日期，署名或者其他數(shù)據(jù)在你文章的頂部， 為標(biāo)簽集添加一個(gè)header容器標(biāo)簽是一個(gè)很好的選擇。

同時(shí)注意我們可以在article元素下添加第二個(gè)footer元素來包含諸如翻頁(yè)導(dǎo)航，相關(guān) 文章或者其他內(nèi)容。

為新標(biāo)簽編寫樣式

在大多數(shù)瀏覽器中，所有你需要做的就是像你通常做的那樣，為在新標(biāo)簽上應(yīng)用樣式表，簡(jiǎn)單的定義 你的樣式。但請(qǐng)確認(rèn)為每一個(gè)元素添加了display:block;規(guī)則，無論如何，從現(xiàn)在開始。經(jīng)過一段時(shí)間后，當(dāng)瀏覽器開始標(biāo)準(zhǔn)化，并支持新元素后， 那就不必要了。

例如，讓我們?cè)谖覀兊膆eader里應(yīng)用一些樣式：

記住，你仍然可以給這些標(biāo)簽添加類和ID屬性。所以，如果你想要單獨(dú)為一個(gè)導(dǎo)航設(shè)置樣式，你可 以輕易的給這個(gè)標(biāo)簽添加一個(gè)類或者樣式，就象這樣：

然后你可以應(yīng)用一個(gè)樣式：

兼容老的瀏覽器

但等一下，IE怎么辦？這些樣式完全不能在IE6下工作。如果你仍然需要支持像IE6一類遺產(chǎn) 般的瀏覽器，這兒有一個(gè)解決方法。IE6解析和顯示這些標(biāo)簽還好，但你不能對(duì)他們?cè)O(shè)置任何CSS。解決方法是使用一點(diǎn)JavaScript。

我們只需要讓IE去給我們使用createElement方法創(chuàng)造的的HTML 5標(biāo)簽設(shè)置樣式。在HTML 5文件的head標(biāo)簽內(nèi)添加這點(diǎn)東西?；蛘?，你可以把他保存在一個(gè)特定的文件里，并用這種方法包含。

我知道你在想什么：“哥，你根本沒有為那個(gè)腳本標(biāo)簽定義一個(gè)MIME類型。”

你根本不需要在HTML 5做這些事情。在HTML 5中，所有的腳本都被假定為type=”text/javascript”，所以沒有必要讓屬性把你的腳本標(biāo)簽搞得亂七八糟（除非你的腳本并不是 JavaScript）。

這解決了IE的問題，但我們并沒有擺脫困境。現(xiàn)在被證明Gecko渲染引擎有一個(gè)bug，導(dǎo)致 了Firefox2和Camino的一些版本在這些標(biāo)簽上卡住。

這兒有兩個(gè)方法來處理這個(gè)bug，沒有一個(gè)是理想的。更多的細(xì)節(jié)請(qǐng)查看HTML5doctor的這篇文章。這篇文章同時(shí)附有一個(gè)讓所有HTML 5元素都生效的方便腳本。

記住，盡管Firefox 2的使用率很快在所有網(wǎng)站流量中降到了10%以下，但單純忽略這個(gè)bug可能還是需要根據(jù)你網(wǎng)站的訪問者來定。

現(xiàn)在你可以使用HTML 5了，但你會(huì)用么？

簡(jiǎn)短的回答是：我們會(huì)。

復(fù)雜一點(diǎn)的是：那要看站點(diǎn)了。如果你指責(zé)重新制作CNN主頁(yè)，好吧，你可能會(huì)有一點(diǎn)抗拒，直到 瀏覽器的支持變好些。但如果你要給你的博客改版，我們支持你。這兒還有一些可以幫助你的Wordpress插 件，如果你正在使用這么流行的發(fā)布系統(tǒng)。這兒是一個(gè)Jeff Starr制作的HTML 5主題。

同時(shí)，試試以站點(diǎn)為主的HTML 5美術(shù)館，并且查看源代碼，看看他們做了什么。

盡管如此，如果IE的缺點(diǎn)阻止你了，這樣考慮吧：就連Google也在他們的主要搜索頁(yè)面上使 用了HTML 5的文檔類型。就算如果你不使用所有新的結(jié)構(gòu)標(biāo)簽，你可以至少利用一下簡(jiǎn)潔的腳本聲明和下次我們會(huì)介紹的關(guān)于一些非結(jié)構(gòu)的語(yǔ)義標(biāo)簽。

最新評(píng)論