文章內(nèi)容

語(yǔ)義更明確簡(jiǎn)潔的結(jié)構(gòu)HTML5初學(xué)教程

發(fā)布時(shí)間: 2012/8/26 18:02:15

HTML5是什么

對(duì)于HTML5的革新，按我的理解，可以總結(jié)為語(yǔ)義明確的標(biāo)簽體系、化繁為簡(jiǎn)的富媒體支持、神奇的本地?cái)?shù)據(jù)存儲(chǔ)技術(shù)、不需要插件的富動(dòng)畫(huà)(canvas)、強(qiáng)大的API支持�？傊�，HTML5讓人機(jī)交互，人網(wǎng)交互變得更加舒適，貼合用戶。

以往對(duì)富媒體應(yīng)用與本存儲(chǔ)的支持乏力也不再是瀏覽器的切膚之痛。將Web從內(nèi)容平臺(tái)推向標(biāo)準(zhǔn)化的應(yīng)用平臺(tái)，并一統(tǒng)各在平臺(tái)陣營(yíng)的標(biāo)準(zhǔn)，才是HTML5革命的初衷。本文，我就拋磚引玉，闡述HTML5的革新之一：語(yǔ)義更明確簡(jiǎn)潔的結(jié)構(gòu)。從”頭”說(shuō)起一個(gè)標(biāo)準(zhǔn)的XHTML頭部代碼應(yīng)該是這樣：

```
<div id=”header”>   
```
<div class=”hgroup”>
<h1>網(wǎng)站標(biāo)題</h1>
<h1>網(wǎng)站副標(biāo)題</h1>
</div>
<div id=”nav”>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<!–//header end–>
<div id=”left”>
<div class=”article”>
<p>這是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p>
</div>
<div class=”article”>
<p>這還是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p>
</div>
</div>
<!–//left end–>
<div id=”aside”>
<h1>作者簡(jiǎn)介</h1>
<p>Mr.Think，專注Web前端技術(shù)的凡夫俗子。</p>
</div>
<!–//side end–>
<div id=”footer”>
頁(yè)面的底部
</div>
<!–//footer end–>

上面是一個(gè)簡(jiǎn)單的博客頁(yè)面部分HTML，由頭部、文章展示區(qū)、右側(cè)欄、底部組成。編碼整潔，也符合XHTML的語(yǔ)義化，即便是在HTML 5中也可以很好的表現(xiàn)。但是對(duì)瀏覽器來(lái)說(shuō)，這就是一段沒(méi)有區(qū)分開(kāi)權(quán)重的代碼，而不是一個(gè)讓機(jī)器也能讀懂語(yǔ)義的標(biāo)簽來(lái)定義相應(yīng)的區(qū)塊。比如，標(biāo)準(zhǔn)瀏覽器(比如Firefox、Chrome甚至新版的IE9)都有一個(gè)快捷鍵可以帶引客戶直接跳轉(zhuǎn)到頁(yè)面的導(dǎo)航，但問(wèn)題是所有的區(qū)塊都是用DIV定義，并且DIV的ID值是同開(kāi)發(fā)者定的，所以，瀏覽器并不知道哪個(gè)應(yīng)該是導(dǎo)航鏈接所在區(qū)塊。HTML 5新標(biāo)簽的出現(xiàn)，正好彌補(bǔ)了這一缺憾。那么，上面的代碼，換成HTML 5就可以這樣寫(xiě)：

```
<header>   
```
<hgroup>
<h1>網(wǎng)站標(biāo)題</h1>
<h1>網(wǎng)站副標(biāo)題</h1>
</hgroup>
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
</header>
<div id=”left”>
<article>
<p>這是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p>
</article>
<article>
<p>這還是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p>
</article>
</div>
<aside>
<h1>作者簡(jiǎn)介</h1>
<p>Mr.Think，專注Web前端技術(shù)的凡夫俗子。</p>
</aside>
<footer>
網(wǎng)頁(yè)底部
</footer>

原來(lái)，HTML的頁(yè)面結(jié)構(gòu)可以如此之美，不用注釋也能一目了然。對(duì)于瀏覽器，找到對(duì)應(yīng)的區(qū)塊也不再會(huì)茫然無(wú)措。

另外，HTML5雖然目前并不為所有瀏覽器所支持，但這個(gè)能省去100多字節(jié)(對(duì)于日PV百萬(wàn)級(jí)以上的站點(diǎn)，能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對(duì)IE瀏覽器解析模式有研究的話，你應(yīng)該知道，頁(yè)面在沒(méi)有定義doctype的情況下會(huì)觸發(fā)怪異模式，而只要定義了瀏覽器就可以在標(biāo)準(zhǔn)模式下解析頁(yè)面，而不需要指定某個(gè)類型的DTD。

新的語(yǔ)義化標(biāo)簽體系

語(yǔ)義化編碼是一個(gè)合格前端Developer必備的技能，但隨著網(wǎng)頁(yè)的日漸豐富化，僅僅用原有的xhtml標(biāo)簽去語(yǔ)義化顯然已經(jīng)力不從心。上帝說(shuō)：”要有光!”便有了光。于是，HTML 5提供了一系列新的標(biāo)簽及相應(yīng)屬性，以反應(yīng)現(xiàn)代網(wǎng)站典型語(yǔ)義。實(shí)踐出真理。還是寫(xiě)一個(gè)例子吧：

孰繁孰簡(jiǎn)，就不用我說(shuō)了。是的，HTML5的頭部可以如此簡(jiǎn)單，可以輕易的記住!并且，可以忽略大小寫(xiě)，引號(hào)以及最后一個(gè)尖括號(hào)前的反斜線。

為什么可以如此松散?其實(shí)，如果把XHTML當(dāng)成text/html發(fā)送，瀏覽器一樣可以很好的解析，瀏覽器并不在乎代碼的語(yǔ)法。所以，HTML 5是形而上的，它可能會(huì)破壞原有的一些標(biāo)準(zhǔn)，但仍可在瀏覽器中很好的表現(xiàn)。

當(dāng)然，為了團(tuán)隊(duì)協(xié)助與后續(xù)維護(hù)的方便，我們還是應(yīng)該統(tǒng)一一種你喜歡的風(fēng)格的寫(xiě)法，比如：