HTML5初學教程:語義更明確簡潔的結構

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML5初學教程:語義更明確簡潔的結構

編輯：HTML和Xhtml

<!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=gb2312″  /> 
</head>

HTML5是什麼，無須我在這裡贅述了。對於HTML5的革新，按我的理解，可以總結為語義明確的標簽體系、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的API支持。總之，HTML5讓人機交互，人網交互變得更加舒適，貼合用戶。以往對富媒體應用與本存儲的支持乏力也不再是浏覽器的切膚之痛。將Web從內容平台推向標准化的應用平台，並一統各在平台陣營的標准，才是HTML5革命的初衷。

本文，我就拋磚引玉，闡述HTML5的革新之一：語義更明確簡潔的結構。
從”頭”說起一個標准的XHTML頭部代碼應該是這樣：

<div id=”header”>   
<div class=”hgroup”>   
<h1>網站標題</h1>   
<h1>網站副標題</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新結構標簽的文章。</p>   
</div>   
<div class=”article”>   
<p>這還是一篇講述HTML 5新結構標簽的文章。</p>   
</div>   
</div>   
<!–//left end–>   
<div id=”aside”>   
<h1>作者簡介</h1>   
<p>Mr.Think，專注Web前端技術的凡夫俗子。</p>   
</div>   
<!–//side end–>   
<div id=”footer”>   
頁面的底部    
</div>   
<!–//footer end–>

上面是一個簡單的博客頁面部分HTML，由頭部、文章展示區、右側欄、底部組成。編碼整潔，也符合XHTML的語義化，即便是在HTML 5中也可以很好的表現。但是對浏覽器來說，這就是一段沒有區分開權重的代碼，而不是一個讓機器也能讀懂語義的標簽來定義相應的區塊。比如，標准浏覽器(比如Firefox、Chrome甚至新版的IE9)都有一個快捷鍵可以帶引客戶直接跳轉到頁面的導航，但問題是所有的區塊都是用DIV定義，並且DIV的ID值是同開發者定的，所以，浏覽器並不知道哪個應該是導航鏈接所在區塊。HTML 5新標簽的出現，正好彌補了這一缺憾。那麼，上面的代碼，換成HTML 5就可以這樣寫：

<header>   
<hgroup>   
<h1>網站標題</h1>   
<h1>網站副標題</h1>   
</hgroup>   
<nav>   
<ul>   
<li>HTML 5</li>   
<li>CSS</li>   
<li>JavaScript</li>   
</ul>   
</nav>   
</header>   
<div id=”left”>   
<article>   
<p>這是一篇講述HTML 5新結構標簽的文章。</p>   
</article>   
<article>   
<p>這還是一篇講述HTML 5新結構標簽的文章。</p>   
</article>   
</div>   
<aside>   
<h1>作者簡介</h1>   
<p>Mr.Think，專注Web前端技術的凡夫俗子。</p>   
</aside>   
<footer>   
網頁底部    
</footer>

原來，HTML的頁面結構可以如此之美，不用注釋也能一目了然。對於浏覽器，找到對應的區塊也不再會茫然無措。

另外，HTML5雖然目前並不為所有浏覽器所支持，但這個能省去100多字節(對於日PV百萬級以上的站點，能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對浏覽器解析模式有研究的話，你應該知道，頁面在沒有定義doctype的情況下會觸發怪異模式，而只要定義了浏覽器就可以在標准模式下解析頁面，而不需要指定某個類型的DTD。

新的語義化標簽體系

語義化編碼是一個合格前端Developer必備的技能，但隨著網頁的日漸豐富化，僅僅用原有的xhtml標簽去語義化顯然已經力不從心。上帝說：”要有光!”便有了光。於是，HTML 5提供了一系列新的標簽及相應屬性，以反應現代網站典型語義。實踐出真理。還是寫一個例子吧：

孰繁孰簡，就不用我說了。是的，HTML5的頭部可以如此簡單，可以輕易的記住!並且，可以忽略大小寫，引號以及最後一個尖括號前的反斜線。

為什麼可以如此松散?其實，如果把XHTML當成text/html發送，浏覽器一樣可以很好的解析，浏覽器並不在乎代碼的語法。所以，HTML 5是形而上的，它可能會破壞原有的一些標准，但仍可在浏覽器中很好的表現。

當然，為了團隊協助與後續維護的方便，我們還是應該統一一種你喜歡的風格的寫法，比如：

<!doctype html>
<html>
<head>你能記住嗎?你會去死記硬背嗎?當然不會!我們只需要機械的復制粘貼即可。

<meta charset=”gb2312″ />
…
</head>
<body>
…
</body>
</html>

再看看一個標准的HTML5頭部是如何的：

<!doctype html> 
<meta charset=gb2312 />

上一頁:IE浏覽器支持HTML5標准的方法
下一頁:WEBJX收集整理50個非常酷的HTML5應用實例

HTML和Xhtml

HTML5基礎教程: em、strong、dfn、code、samp、kbd、var、cite: 定義和用法以下元素都是短語元素。並不反對使用它們，但是通過使用樣式表，可能取得更豐富的效果。
DTD文檔類型聲明doctype: 網頁制作poluoluo文章簡介：在web標准的道路上，我們不僅需要充滿現實主義向前兼容，更需要充滿
HTML5 File API改善網頁上傳功能: 網頁制作Poluoluo文章簡介：HTML 5 讓 HTML 這個一度單純的置標語言煥發出成熟的魅力

HTML入門知識 HTML5教程關於HTML HTML和Xhtml HTML5特效代碼 HTML5詳解

DIV CSS 佈局教程網

相關文章