标签使用的常见误区.docx

HTML5标签使用的常见误区最近组内进行HTML5标签的学习，方法呢就是大家每人挑选几个标签，自己先去学习，然后给大家作讲解。这个过程大家还是挺有收获的。但是现在HTML5还处在草案阶段，有些新的标签元素的解释也是经常有变化，甚至标签加入/移出也很频繁(比如 hgroup)，同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考，让大家的学习过程更摸索。下面是我在 html5doctor 上面看到的一篇文章，在目前大家懵懂的阶段，可能看看大师的讲解会更容易理解。由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译，不对的地方还请大家多多指教。　下面附上原文地址：/avoiding-common-html5-mistakes/ \t _blankAvoiding common HTML5 mistakes，作者 :/author/richc/ \o Posts by Richard Clark \t _blankRichard Clark，有疑问的地方大家可以核对英文。　在这篇文章中，我将给大家分享HTML5构建页面的小错误和不好的实践方法，让我们在以后的工作中避免这些错误。　不要把Section当成简单的容器来定义样式　我们经常看到的一个错误，就是武断的将div标签用section标签来替代，特别是将作为包围容器的div用section来替换。在XHTML或者HTML4中，我们将会看到类似下面的代码：!--?HTML 4-style code?--div?id=wrapperdiv?id=headerh1My super duper page/h1!--?Header content?--/divdiv?id=main!--?Page content?--/divdiv?id=secondary!--?Secondary content?--/divdiv?id=footer!--?Footer content?--/div/div　现在我看到了下面的代码样子：!--?Don’t copy this code! It’s wrong!?--section?id=wrapperheaderh1My super duper page/h1!--?Header content?--/headersection?id=main!--?Page content?--/sectionsection?id=secondary!--?Secondary content?--/sectionfooter!--?Footer content?--/footer/section　直观的看，上面的例子是错误的：section 并不是一个容器。section元素是有语意的区段，帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素（不论是 HTML 或者 XHTML ），通常的做法是直接对body标签定义样式就像/code/developpeurs_sans_frontieresKroc Camen描述的那样子，如果你还需要额外的元素来定义样式，使用div, 就像/divDr Mike?阐述的那样, div并没有灭亡，如果这里没有其它更合适的，div可能是你最合适的选择。　记住这点，这里我们重新修正了上面的例子，通过使用两个新角色。（你是否需要额外的div取决于你的设计。）bodyheaderh1My super duper page/h1!--?Header content?--/headerdiv?role=main!--?Page content?--/divaside?role=complementary!--?Secondary content?--/asidefooter!--?Footer content?--/footer/body　如果你还是无法确定哪一个元素更适合使用，我建议你去查看/flowchartHTML5 sectioning content element flowchart来让你继续前行。　只在需要的时候使用hgroup和header标签　使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是，经常发现大家在并不需要的地方使用header和hgroup标签。你可以跟进我们关于header和hgroup的最新进展，下面是我的简单归纳：header元素通常是通常作为一组解释或者导航辅助工具，通常包含section的标题.hgroup元素会将当有副标题\子标题，各类标识文字时，对h1到h6标题进行群组，将其作为section的标题.　过度使用的header　你肯定知道，在一个文档中，可以使用多次header标签，下面就是一种很受大家欢迎的模式:!--?Don’t copy this code!