div，css，html ，table 各种认识和组合对比

      对于一个面向Web编程的我来说，实在是菜鸟中的菜鸟。所以，从最基本的定义和比较开始学习和理解吧。

 

 1、div，css，html ，table 的基本认识：

 

      html：通常我们所说的html，其实就是指html网页，html网页源代码是由具有一定规则规律的代码组成。Html又被称为超文本标记语言。

 

      div：全称 division 意为“区分”，是html中的一个标签，是指<div></div>标签。div本身就是容器性质的。

 

      css：级联样式表（Cascading Style Sheet）简称“CSS”，，它是用来进行网页风格设计的。（有兴趣的可以看一下我关于CSS的博文《CSS的基本认识》）

      

      table：table标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

 

2、各种对比

 

     div与css

 

     如果说div是容器的话，那么css就是装饰或是表现容器样式的事物。比如div是盒子，那么css的作用就是表示盒子的颜色，大小，体积等。

   

    html与css

 

     html是负责网页内容的；css是负责网页样式的，而且css很好的解耦网页的内容和样式。（ps：javascript负责网页的行为）

 

    div与html

 

     div是html众多标签中的一种，相当于一个盒子，而网页上要显示的内容都需要放在盒子里。

 

    div与table

 

     div，你可以理解为一个方形的盒子，table你可以理解为表格式的盒子。div与table都属于html的标签。（有兴趣的深入的同学可以参看我的博文《比较div+css 和table 》）

 

    在网上有人推荐了这么一则微博，感觉挺有意思的，分享给大家：

 

     说网页像是老张开的杂货铺，老张把一样样的杂货（网页要显示的内容）分门别类的放在一个个盒子（DIV）里，并将盒子用不同的大小、颜色（CSS)区分，然后再将盒子放在货架上（HTML中的BODY,TABLE,UL等等），以便向客人展示。但为了客人方便选择购物，就想办法实现不同的分类、排序(用javascript实现）。

 

3、组合

 

       其实div与table同为标签，都是用来布局网页的，但是由于div过于简单，没办法过多的实现对网页样式的布局，所以经常讲div和css组合起来一起用。

       div+css：两者组合其实就是利用CSS定义DIV，对HTML网页的布局。如果单独使用div而不加任何css，那么div在网页上的效果和使用<p></p>是一样的。现在一般都是用div+css组合来布局网页或是table布局。

 

4、 那为什么要用div来配合css呢？

 

      也就是为什么是DIV+CSS被流行下来，而DIV+TABLE而没有被广泛推广呢？

      下面我用一张导图的对比阐述了一下原因：

 

 

 PS：我的下一篇博客会系统的比较div+css与table布局的优缺点，敬请期待哦！