3.07日音訊，盤點(diǎn)H5標(biāo)簽使用的常見誤區(qū),現(xiàn)在HTML5還處在草案階段,有些新的標(biāo)簽元素的解釋也是經(jīng)常有變化,甚至標(biāo)簽加入移出也很頻繁(比如hgroup),同時(shí)現(xiàn)有的大的門戶網(wǎng)站在使用HTML5方面也沒有很好的范例可以參考,讓大家的學(xué)習(xí)過程更摸索.本文將給大家分享html5構(gòu)建頁面的小錯(cuò)誤和不好的實(shí)踐方法，讓我們?cè)谝院蟮墓ぷ髦斜苊膺@些錯(cuò)誤。
不要把<Section>當(dāng)成簡(jiǎn)單的容器來定義樣式
我們經(jīng)常看到的一個(gè)錯(cuò)誤，就是武斷的將<div>標(biāo)簽用<Section>標(biāo)簽來替代，特別是將作為包圍容器的<div>用來替換。在XHTML或者HTML4中，我們將會(huì)看到類似下面的代碼：
XML/HTMLCode復(fù)制內(nèi)容到剪貼板
<!–HTML4-stylecode–>
<divid=”wrapper”>
<divid=”header”>
<h1>Mysuperduperpage</h1>
<!–Headercontent–>
</div>
<divid=”main”>
<!–Pagecontent–>
</div>
<divid=”secondary”>
<!–Secondarycontent–>
</div>
<divid=”footer”>
<!–Footercontent–>
</div>
</div>
現(xiàn)在我看到了下面的代碼樣子：
XML/HTMLCode復(fù)制內(nèi)容到剪貼板
<!–Don’tcopythiscode!It’swrong!–>
<sectionid=”wrapper”>
<header>
<h1>Mysuperduperpage</h1>
<!–Headercontent–>
</header>
<sectionid=”main”>
<!–Pagecontent–>
</section>
<sectionid=”secondary”>
<!–Secondarycontent–>
</section>
<footer>
<!–Footercontent–>
</footer>
</section>
直觀的看，上面的例子是錯(cuò)誤的：<Section>并不是一個(gè)容器.<Section>元素是有語意的區(qū)段，幫助構(gòu)建文檔大綱。它應(yīng)該包含標(biāo)題。如果你要尋找一個(gè)可以包含頁面的元素(不論是HTML或者XHTML)，通常的做法是直接對(duì)<body>標(biāo)簽定義樣式就像KrocCamen描述的那樣子，如果你還需要額外的元素來定義樣式，使用<div>,就像DrMike闡述的那樣,div并沒有滅亡，如果這里沒有其它更合適的，div可能是你最合適的選擇。記住這點(diǎn)，這里我們重新修正了上面的例子，通過使用兩個(gè)新角色。(你是否需要額外的<div>取決于你的設(shè)計(jì)。)
XML/HTMLCode復(fù)制內(nèi)容到剪貼板
<body>
<header>
<h1>Mysuperduperpage</h1>
<!–Headercontent–>
</header>
<divrole=”main”>
<!–Pagecontent–>
</div>
<asiderole=”complementary”>
<!–Secondarycontent–>
</aside>
<footer>
<!–Footercontent–>
</footer>
</body>
