HTML5 新标签让布局更有语义化

曾经,前端工程师经常会频繁的使用基于 table 的没有任何语义的布局。不过最终还是要感谢像 Jeffrey Zeldman 和 Eric Meyer 这样的思想革新者,聪明的前端工程师慢慢的接受了相对更语义化的 div 布局替代了 table 布局,并且开始调用外部样式表。但不幸的是,复杂的网页设计需要大量不同的标签结构代码,我们把它叫做 “div-soup” 综合症。也许你很熟悉下面的布局代码:

structure-div

尽管这有些勉强,但上面这个实例还是可以说明使用 HTML4 对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是,HTML5 解决 “div-soup” 综合症并带给我们一套新的结构化元素。这些新的 HTML5 元素富有更细致的语义从而代替了那些毫无语义的 div 标签。下面是 HTML5 新标签布局的解决方案:

structure-html5

尽管这有些勉强,但上面这个实例还是可以说明使用 HTML4 对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是,HTML5 解决 “div-soup” 综合症并带给我们一套新的结构化元素。这些新的 HTML5 元素富有更细致的语义从而代替了那些毫无语义的 div 标签。下面是 HTML5 新标签布局的解决方案:

 不过要在 IE 下使用这些语义化的标签这就需要 JS 来做兼容了。代码如下:

1 <!--[if lt IE 9]>
2 <script type="text/javascript" src="<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js">http://html5shiv.googlecode.com/svn/trunk/html5.js</a>"></script>
3 <![endif]-->

然后仍然需要对 IE 下的这部分标签重置 CSS 样式,CSS代码如下:

1 
2 header,nav,article,section,aside,footer,figure{display:block}

 这样就在 IE 下显示正常了。

html5 十个常用的布局新标签简介:

  • <article> 标签定义外部的内容,可以是一篇新的文章。
  • <aside> 标签定义 article 以外的内容,aside 的内容可用作文章的侧栏。
  • <figcaption> 标签定义 figure 元素的标题。
  • <figure> 标签用于对元素进行组合,使用 figcaption 元素为元素组添加标题。
  • <footer> 标签定义 section 或 文档 的页脚。
  • <header> 标签定义 文档 的页眉。
  • <hgroup> 标签用于对 section 或 网页 的标题进行组合,使用 figcaption 元素为元素组添加标题。
  • <nav> 标签定义 导航链接 的部分。
  • <section> 标签定义文档中的节( section、区段 )。比如章节、页眉、页脚或文档中的其他部分。
  • <time> 标签定义日期或时间,或者两者。

参考:http://www.w3school.com.cn/html5/html5_reference.asp

相关推荐