div,css,html ,table 各种认识和组合对比
2013-08-25 08:05
239 查看
对于一个面向Web编程的我来说,实在是菜鸟中的菜鸟。所以,从最基本的定义和比较开始学习和理解吧。
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 元素定义表格单元。
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实现)。
其实div与table同为标签,都是用来布局网页的,但是由于div过于简单,没办法过多的实现对网页样式的布局,所以经常讲div和css组合起来一起用。
div+css:两者组合其实就是利用CSS定义DIV,对HTML网页的布局。如果单独使用div而不加任何css,那么div在网页上的效果和使用<p></p>是一样的。现在一般都是用div+css组合来布局网页或是table布局。
也就是为什么是DIV+CSS被流行下来,而DIV+TABLE而没有被广泛推广呢?
下面我用一张导图的对比阐述了一下原因:
![](https://img-blog.csdn.net/20130824145905656?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2Fvemhhbmd5aW5nZmVpMDEwOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
PS:我的下一篇博客会系统的比较div+css与table布局的优缺点,敬请期待哦!
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布局的优缺点,敬请期待哦!
相关文章推荐
- HTML,使用div+css实现自适应table布局
- HTML中的css和div,和table的用法
- html常用布局方式div+css与Table布局优劣性
- div+css与table对比
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- HTML中div标签与table标签组合使用问题
- HTML基础---认识标签(ul,ol,div,table,caption,dl,dt)
- CSS+DIV与TABLE的优势对比
- html css 控制div或者table等固定在指定位置
- table与css+div的对比
- DIV+CSS布局和Table布局对比
- Asp.Net控件DataGrid生成的HTML为一个Table,这点和Div+CSS矛盾
- div+css编写html的table表头斜线
- CSS+DIV 对比 table
- HTML DIV+CSS命名
- div+css与table布局
- CSS网页布局:div水平居中的各种方法
- html中div+css学习总结
- html页面中运用CSS为层(div)元素添加滚动条
- 传统table开发和当前流行的div+css开发模式的比较