3.07日音讯,盘点H5标签使用的常见误区,现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.本文将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。
不要把<Section>当成简单的容器来定义样式
我们经常看到的一个错误,就是武断的将<div>标签用<Section>标签来替代,特别是将作为包围容器的<div>用来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:
XML/HTMLCode复制内容到剪贴板
<!–HTML4-stylecode–>
<divid=”wrapper”>
<divid=”header”>
<h1>Mysuperduperpage</h1>
<!–Headercontent–>
</div>
<divid=”main”>
<!–Pagecontent–>
</div>
<divid=”secondary”>
<!–Secondarycontent–>
</div>
<divid=”footer”>
<!–Footercontent–>
</div>
</div>
现在我看到了下面的代码样子:
XML/HTMLCode复制内容到剪贴板
<!–Don’tcopythiscode!It’swrong!–>
<sectionid=”wrapper”>
<header>
<h1>Mysuperduperpage</h1>
<!–Headercontent–>
</header>
<sectionid=”main”>
<!–Pagecontent–>
</section>
<sectionid=”secondary”>
<!–Secondarycontent–>
</section>
<footer>
<!–Footercontent–>
</footer>
</section>
直观的看,上面的例子是错误的:<Section>并不是一个容器.<Section>元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是HTML或者XHTML),通常的做法是直接对<body>标签定义样式就像KrocCamen描述的那样子,如果你还需要额外的元素来定义样式,使用<div>,就像DrMike阐述的那样,div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的<div>取决于你的设计。)
XML/HTMLCode复制内容到剪贴板
<body>
<header>
<h1>Mysuperduperpage</h1>
<!–Headercontent–>
</header>
<divrole=”main”>
<!–Pagecontent–>
</div>
<asiderole=”complementary”>
<!–Secondarycontent–>
</aside>
<footer>
<!–Footercontent–>
</footer>
</body>
如果你还是无法确定哪一个元素更适合使用,可以与
邯郸网络公司首创网络获取咨询。