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> 标签定义日期或时间，或者两者。
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...