網(wǎng)站制作技術(shù)的革新HTML5--結(jié)構(gòu)之美-沈陽(yáng)易勢(shì)科技有限公司

build網(wǎng)站制作

build網(wǎng)站制作當(dāng)前位置：首頁(yè)>主要服務(wù)>網(wǎng)站制作

網(wǎng)站制作技術(shù)的革新HTML5--結(jié)構(gòu)之美

對(duì)于網(wǎng)站制作來(lái)說(shuō)，HTML 5如同一場(chǎng)革命，正在Web2.0后時(shí)代轟轟烈烈的進(jìn)行著。
對(duì)于HTML 5的革新，可以總結(jié)為語(yǔ)義明確的標(biāo)簽體系、化繁為簡(jiǎn)的富媒體支持、神奇的本地?cái)?shù)據(jù)存儲(chǔ)技術(shù)、不需要插件的富動(dòng)畫(Canvas)、強(qiáng)大的 API支持?？傊?，HTML 5讓人機(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)，才是HTML 5革命的初衷。
本文，就拋磚引玉，闡述HTML 5的革新之一：語(yǔ)義更明確簡(jiǎn)潔的結(jié)構(gòu)。

從”頭”說(shuō)起
一個(gè)標(biāo)準(zhǔn)的XHTML頭部代碼應(yīng)該是這樣：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
相當(dāng)麻煩！我們只能機(jī)械的復(fù)制粘貼即可。
再看看一個(gè)標(biāo)準(zhǔn)的HTML 5頭部：
<!doctype html>
<meta charset=utf-8>
HTML 5的頭部可以如此簡(jiǎn)單，可以輕易的記住！并且，可以忽略大小寫，引號(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)格的寫法，比如：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
...
</head>
<body>
...
</body>
</html>
另外，HTML 5雖然目前并不為所有瀏覽器所支持，但這個(gè)能省去100多字節(jié)(對(duì)于日PV百萬(wàn)級(jí)以上的站點(diǎn)，能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對(duì)瀏覽器解析模式有研究的話，你應(yīng)該知道，頁(yè)面在沒有定義doctype的情況下會(huì)觸發(fā)怪異模式，而只要定義了<!doctype html>瀏覽器就可以在標(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í)踐出真理。還是寫一個(gè)例子吧：
<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>

<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>

<div id="aside">
<h1>作者簡(jiǎn)介</h1>
<p>易勢(shì)科技，專業(yè)的網(wǎng)站制作公司。</p>
</div>

<div id="footer">
頁(yè)面的底部
</div>

上面是一個(gè)簡(jiǎn)單的頁(yè)面部分HTML，由頭部、文章展示區(qū)、右側(cè)欄、底部組成。編碼整潔，也符合XHTML的語(yǔ)義化，即便是在HTML 5中也可以很好的表現(xiàn)。但是對(duì)瀏覽器來(lái)說(shuō)，這就是一段沒有區(qū)分開權(quán)重的代碼，而不是一個(gè)讓機(jī)器也能讀懂語(yǔ)義的標(biāo)簽來(lái)定義相應(yīng)的區(qū)塊。比如，標(biāo)準(zhǔn)瀏覽器（比如Firefox、Chroome甚至新版的IE）都有一個(gè)快捷鍵可以帶引客戶直接跳轉(zhuǎn)到頁(yè)面的導(dǎo)航，但問(wèn)題是所有的區(qū)塊都是用DIV定義，并且DIV的 ID值是同開發(fā)者定的，所以，瀏覽器并不知道哪個(gè)應(yīng)該是導(dǎo)航鏈接所在區(qū)塊。HTML 5新標(biāo)簽的出現(xiàn)，正好彌補(bǔ)了這一缺憾。那么，上面的代碼，換成HTML 5就可以這樣寫：
<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>易勢(shì)科技，專業(yè)的網(wǎng)站制作公司。</p>
</aside>
<footer>
網(wǎng)頁(yè)底部
</footer>
原來(lái)，HTML的頁(yè)面結(jié)構(gòu)可以如此之美，不用注釋也能一目了然。對(duì)于瀏覽器，找到對(duì)應(yīng)的區(qū)塊也不再會(huì)茫然無(wú)措。

如何用HTML 5新標(biāo)簽結(jié)構(gòu)化元素
通過(guò)上面的示例，我們了解到HTML 5的新標(biāo)簽對(duì)結(jié)構(gòu)化的革新，但切換到實(shí)際使用中，該如何恰當(dāng)?shù)氖褂盟鼈兡?？我想這也是很多HTML 5學(xué)習(xí)者想問(wèn)一個(gè)問(wèn)題。如同XHTML語(yǔ)義化一樣，HTML 5語(yǔ)義化標(biāo)簽的使用也應(yīng)該遵循：每個(gè)標(biāo)簽都有它特定的意義，而語(yǔ)義化，就是讓我們?cè)谶m當(dāng)?shù)奈恢糜眠m當(dāng)?shù)臉?biāo)簽，以更好的讓人和機(jī)器(機(jī)器可理解為瀏覽器可理解為搜索引擎)都一目了然。比如header標(biāo)簽一般是頁(yè)面的第一個(gè)區(qū)塊元素(header標(biāo)簽也可用于類型的頭部元素中，比如文章區(qū)塊的標(biāo)題)，包含的了頁(yè)面的主題信息；nav標(biāo)簽一般用于包裹導(dǎo)航信息；footer一般用來(lái)包裹頁(yè)面底部信息；等等。
下面是我參考HTML 5手冊(cè)列出的結(jié)構(gòu)類常用新標(biāo)簽的語(yǔ)義解釋及使用指引：
<header>標(biāo)簽
手冊(cè)釋義：定義 section 或 document 的頁(yè)眉。
使用指引：一般用來(lái)包含頁(yè)面頭部，也可用于其他區(qū)域頭部，比如article頭部：
<header>
<hgroup>
<h1>網(wǎng)站標(biāo)題</h1>
<h1>網(wǎng)站副標(biāo)題</h1>
</hgroup>
</header>
<hgroup>標(biāo)簽
手冊(cè)釋義：用于對(duì)網(wǎng)頁(yè)或區(qū)段（section）的標(biāo)題進(jìn)行組合。
使用指引：用于標(biāo)題類的組合，比如文章的標(biāo)題與副標(biāo)題：
<hgroup>
<h1>這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<nav>標(biāo)簽
手冊(cè)釋義：定義導(dǎo)航鏈接的部分。
使用指引：用于定義頁(yè)面的導(dǎo)航部分：
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
<aside>標(biāo)簽
定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。
使用指引：用于成節(jié)的內(nèi)容，會(huì)在文檔流中開始一個(gè)新的節(jié)，一般用于與文章內(nèi)容相關(guān)的邊欄：
<aside>
<h1>作者簡(jiǎn)介</h1>
<p>易勢(shì)科技，專業(yè)的網(wǎng)站制作公司。</p>
</aside>
<section>標(biāo)簽
手冊(cè)釋義：定義文檔中的節(jié)（section）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。
使用指引：用于成節(jié)的內(nèi)容，會(huì)在文檔流中開始一個(gè)新的節(jié)：
<section>
<h1>section是什么？</h1>
<h2>一個(gè)新的章節(jié)</h2>
<article>
<h2>關(guān)于section</h1>
<p>section的介紹</p>
...
</article>
</section>
<footer>標(biāo)簽
手冊(cè)釋義：定義 section 或 document 的頁(yè)腳。典型地，它會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。
使用指引：一般用來(lái)包裹整個(gè)頁(yè)面通用底部，也可用于其他區(qū)域底部，比如article底部：
<footer>
版權(quán)所有：易勢(shì)科技

</footer>
<article>標(biāo)簽
手冊(cè)釋義：定義外部的內(nèi)容。比如來(lái)自一個(gè)外部的新聞提供者的一篇新的文章，或者來(lái)自 blog 的文本，或者是來(lái)自論壇的文本。亦或是來(lái)自其他外部源內(nèi)容。
使用指引：顧名思義，一般用于文章區(qū)塊：
<article>
<header>
<hgroup>
<h1>這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章內(nèi)容詳情</p>
</article>
<figure>標(biāo)簽
手冊(cè)釋義：用于對(duì)元素進(jìn)行組合。
使用指引：多用于圖片與圖片描述組合：
<figure>
<img src=http://www.huaianlvs.cn/"img.gif" alt="figure標(biāo)簽" title="figure標(biāo)簽" />
<figcaption>這兒是圖片的描述信息</figcaption>
</figure>
<menu>標(biāo)簽
手冊(cè)釋義：定義菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。
使用指引：使用于菜單類區(qū)塊，用來(lái)定義菜單列表或菜單選項(xiàng):
<menu>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</menu>
HTML 5的其他新標(biāo)簽，就不此一一解釋了，請(qǐng)自行查詢一下手冊(cè)。
其實(shí)，這些東西，如同XHTML的div、h1、inpu等標(biāo)簽一樣，只要平時(shí)多加實(shí)踐，運(yùn)用自如也是輕而易舉的。