html5语义化布局分割代码,HTML5 新标签让布局更有语义化

曾经，前端工程师经常会频繁的使用基于 table 的没有任何语义的布局。不过最终还是要感谢像 Jeffrey Zeldman 和

Eric Meyer 这样的思想革新者，聪明的前端工程师慢慢的接受了相对更语义化的 div 布局替代了 table

布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做 “div-soup”

综合症。也许你很熟悉下面的布局代码：

尽管这有些勉强，但上面这个实例还是可以说明使用 HTML4

对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5 解决 “div-soup”

综合症并带给我们一套新的结构化元素。这些新的 HTML5 元素富有更细致的语义从而代替了那些毫无语义的 div 标签。下面是

HTML5 新标签布局的解决方案：

正如我们所见，HTML5 可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的 div

标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于 CSS 必须调用的 class 和 id

属性。

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

1

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

1

2

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

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

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

 标签定义外部的内容，可以是一篇新的文章。

 标签定义

article 以外的内容，aside 的内容可用作文章的侧栏。

 标签定义

figure 元素的标题。

 标签用于对元素进行组合，使用

figcaption 元素为元素组添加标题。

 标签定义

section 或 文档 的页脚。

 标签定义

文档 的页眉。

 标签用于对

section 或 网页 的标题进行组合，使用 figcaption 元素为元素组添加标题。

 标签定义

导航链接 的部分。

 标签定义文档中的节(

section、区段 )。比如章节、页眉、页脚或文档中的其他部分。

 标签定义日期或时间，或者两者。