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

  • DIV与TABLE布局的区别  
    1.   div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少;table 的加载方式是完成后加载,遇到 <table> 后,在读</table> 之前,table 中的内容不加载,或者传输中断了的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,浏览器才知道该怎么显示 。
    2.   div与css配合使用代码量要精简。
    3.   div的开发时间的可能要长一点,但是维护相对较直观方便。
  • TABLE的优缺点
    1.   table优点:开发时间短(使用DW开发速度快);纯table各浏览器不会有兼容问题
    2.   table缺点:如果布局变更,需要重新开发;如果table里有div ul 等,可能会出现浏览器兼容问题;加载速度慢;嵌套table维护头疼
  • DIV与CSS配合使用的优点
    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中为了解决这个问题,专门添加了:页眉、页脚、导航、文章内容等跟结构相关的结构元素标签,使布局更加规范标准。

posted @ 2015-09-01 20:18  WhyToHow  阅读(1562)  评论(0编辑  收藏  举报