|
新的語義化標(biāo)簽體系
語義化編碼是一個(gè)合格前端Developer必備的技能，但隨著網(wǎng)頁的日漸豐富化，僅僅用原有的xhtml標(biāo)簽去語義化顯然已經(jīng)力不從心。上帝說：”要有光！”便有了光。于是，HTML 5提供了一系列新的標(biāo)簽及相應(yīng)屬性，以反應(yīng)現(xiàn)代網(wǎng)站典型語義。實(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>
<!–//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”>
頁面的底部
</div>
<!–//footer end–>
上面是一個(gè)簡(jiǎn)單的博客頁面部分HTML，由頭部、文章展示區(qū)、右側(cè)欄、底部組成。編碼整潔，也符合XHTML的語義化，即便是在HTML 5中也可以很好的表現(xiàn)。但是對(duì)瀏覽器來說，這就是一段沒有區(qū)分開權(quán)重的代碼，而不是一個(gè)讓機(jī)器也能讀懂語義的標(biāo)簽來定義相應(yīng)的區(qū)塊。比如，標(biāo)準(zhǔn)瀏覽器（比如Firefox、Chrome甚至新版的IE9）都有一個(gè)快捷鍵可以帶引客戶直接跳轉(zhuǎn)到頁面的導(dǎo)航，但問題是所有的區(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>Mr.Think，專注Web前端技術(shù)的凡夫俗子。</p>
</aside>
<footer>
網(wǎng)頁底部
</footer>
原來，HTML的頁面結(jié)構(gòu)可以如此之美，不用注釋也能一目了然。對(duì)于瀏覽器，找到對(duì)應(yīng)的區(qū)塊也不再會(huì)茫然無措。
出處：Mr.Think
責(zé)任編輯：bluehearts
上一頁 HTML5的革新:結(jié)構(gòu)之美 [1] 下一頁 HTML5的革新:結(jié)構(gòu)之美 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 HTML5的革新:結(jié)構(gòu)之美 [2]
