html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）

标签：

• DIV与TABLE布局的区别　　

1. 1. 　　div 和 table 的加载方式不同，div 的加载方式是即读即加载，遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容，读多少加载多少；table 的加载方式是完成后加载，遇到 <table> 后，在读</table> 之前，table 中的内容不加载，或者传输中断了的时候加载，这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,浏览器才知道该怎么显示 。
   2. 　　div与css配合使用代码量要精简。
   3. 　　div的开发时间的可能要长一点，但是维护相对较直观方便。

• TABLE的优缺点

1. 1. 　　table优点：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题
   2. 　　table缺点：如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；嵌套table维护头疼

• DIV与CSS配合使用的优点

1. 1. 结构与表现分离，用DIV完成结构，用CSS控制表现，这样带来的好处非常多，DIV精简了页面，提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套，从而大大提高页面加载速度，以及站点的可以维护性。 
   2. 　　选用DIV 来配合CSS的原因，CSS 的核心是 “盒子模型”，而没有哪个标签能比DIV更好的诠释“盒子模型”的精髓，TABLE的结构过于复杂，并不能很好的做到这一点，虽然TABLE+CSS也是一种选择，但别忘了DIV还有另外一个优势，浮动层叠，而且用TABLE进行布局的网站是不能通过W3C验证的。 
   3. 　　其实DIV的好处还远远不止这些，例如弹性布局，用户自定义布局，DIV都展现出不可思议的灵活性，而富有语义的结构对搜索引擎的友好度也比TABLE要来的高，更不用说跨平台的应用。DIV+CSS为我们提供了一个优雅而规范的技术框架，让我们能用最少的重复劳动，完成更多更美观的页面，从而提升整个团队的效率，甚至改变长期以来网页设计师与网页程序员无法同步工作的问题。

　　然而使用DIV布局，在搜索引擎去抓取页面的内容的时候，它只能猜测你的某个Div内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签，使布局更加规范标准。

html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）

标签：

原文地址：http://www.cnblogs.com/whytohow/p/4776767.html