谈谈网页的DIV - 王志勇的Blog

订阅本博客

如何订阅博客？

Blog首页关于作者 Blog存档联系自由勇网站地图

谈谈网页的DIV

王志勇发表于 2007年01月14日 16:06

昨天和JunChen先生谈了DIV，今天顺便在Google搜索了一下DIV，自从Blog这两年热起来以后，DIV它已经被广泛应用了。

我写HTML到现在已经6年了，看到很多国外Blog对HTML、CSS、XML的讨论，与我的思路有些不一样，但还是坚信自己的代码也符合某种标准。这6年中，我从来没有用过<div>，都是用<table>和<p>。我之所有没有使用过<div>，是因为2001年初我刚接触div的时候，是用FrontPage产生的position:absolute，这样会产生分辨率的问题，所以没有关注过、学习过DIV，而用标准的<table>。

我觉得<div>没有包含在一个大的<table>第一的好处是网页可以一边下载一边打开，提高网页显示速度，其次是通过修改样式表可以改变某区域的风格。使用不使用<div>目前我觉得差别不大，只是习惯问题吧，大家觉得呢？当然，也许<div>会有让开始我热衷的一天。

16条评论：

1 大郎 2007-01-14 18:43
关于DIV排版，据我这两年以来的使用经验来看
1，提高网页显示速度是明显看得到的，特别是像自由勇这种三列结构（如果我们用TABLE排版的话，首先是想到当前结构是用TD来排，此为假如），如果用三个TD的话，那么显示肯定会等到当前的table最后的</table>才会显示，这是在速度上首先明显的优势；
2，方便重构，如果我们的DIV结构是合理的话，那么我们下次在用CSS就能极大地改变一个网站的外观，比如现在BLOG的换扶技术，我一向主张用切换CSS来改变，而尽量不考虑改变页面的HTML。如果我们用TABLE来排的话，那么重构在很大的限制，我主要认为TABLE做出的HTML结构太硬；
3，其实也不能叫DIV排版，我认为，应叫DIV+CSS，CSS真是个好东西，其实在CSS的世界里把任何东西都变掉了，CSS有时会根据需要把span当做块状结构来处理，任何东西都在CSS里可以被改变，这个不用我多说了，自由勇已经精通CSS了，想必；
4，是CSS帮助了DIV，如果这里用P来代替DIV，在大多时候是一样的效果，其实，为了将表现与数据分离，最终还是为了重构，我认为。
5，如果DIV排版做熟了，我认为应该将DIV排版取代TABLE来排版页面结构，除非结构化的数据，比如一组报表数据就没有必要用DIV来做。

哈哈，说多说了，2007年过了半个月了，俺还在上海找工作。:) 怕是大过年的没人要了。-__-

新年快乐。 ^_^

2 自由勇 2007-01-14 19:11
谢谢鼓励，我会去学习和研究DIV：），也许对我用处很大。
祝你工作顺利。：）

3 muyulu 2007-01-15 12:05
我也刚开始接触div呢～～好像挺难的～～

4 baobao 2007-01-15 15:00
http://www.stopdesign.com/articles/throwing_tables/
看看这篇文章，作者分析了微软站点和使用IE和别的浏览器的区别

5 Wady 2007-01-15 17:03
6年前我也习惯用 table 来布局，甚至用复杂的嵌套表格然后填色来做图案。后来因为学业以及贪玩，近3年没有接触过网页标准，直到06年年初正式触博。一开始就喜欢上了 div+CSS 的方式。不过 DIV 也不是万能的，一个优秀的页面我想都要把标签用在适当的位置，用 div 划分主结构，用 P 划分内容段落，用 ul 做简单列表，用 table 做表式固定格局。

6 A君 2007-01-16 22:56
想学div+css了，一直都是editplus写table，郁闷呢。

7 自由勇 2007-01-17 00:04
我在Google上找了一些相关的文章，DIV+CSS最大的好处就是提高网页显示速度，还有就是像大郎兄提到的“网页重构”，也就是排版。Clear(cnrui.cn)写了一篇《Div+CSS ≠ Standard》，让我很有启发。

在CSS方面，相信各位老用户也已经都炉火纯青了。我刚看了很多个英文Blog的HTML代码，全是用DIV+CSS，而不用table。我想，是不是wordpress、sixapart在为用户提供公用版的时候，才会使用DIV+CSS，方便用户“网页重构”，就像大郎兄第2点提到的。
不用DIV+CSS而用传统的table的好处，就是已经习惯这种思维了。我一直使用上下表格分开的方法来提高网页显示速度，并且因为代码简洁，再加上宽带速度快，如果客户端网络正常的话，无论使用table还是DIV+CSS，都会在1秒内显示第一个表格或者DIV，3～5秒下载完毕，我编写的很多网页中是看不出太大区别的吧，比如我这个Blog。“网页重构”的话，我觉得表格也是不难处理的，虽然查找width要麻烦一些。
不过DIV+CSS确实像你说的，能在瞬间改变某区域宽度，容易调整。

8 自由勇 2007-01-17 00:24
刚看了一下Intel、Microsoft的首页，已经全部是div元素，没有table元素；英文Yahoo使用div+table，div在table之外；IBM主要使用table，其div元素放在td之内；Apple网站的div在table之外。
特别是像IBM、Apple、Intel这种纵向结构的页面，使用表格是没有问题的，也是恰当的。
像三大门户网站有左侧导航的，可以用div。大家觉得呢？

9 自由勇 2007-01-18 10:17
Trackback来自《Sogua.com访问速度测试》

Sogua使用了DIV+CSS，所以网页显示特别快。前几天，我们对DIV+CSS做了一些讨论。Sogua首页的网页文件是48K，加上图片、Flash文件、js文件，总共598K。我这边是深圳电信ADSL，3M的速度，在清空IE临时文件夹的情况下，我家里的电脑，Sogua的首页可以在1秒内全部下载完毕，让人觉得不可思议，因为我这边平时最快能达到250K/s；公司的电脑，2M的速度，Sogua的首页在1～3秒内下载完毕。

10 平行线 2007-01-22 02:00
看了你几篇文章，对于正在学习DIV+css的我收获一些，呵呵，在此谢谢！
平行线，6年之后也会和你一样成为一个网络人才！哈哈，我给自己压力了先！

11 自由勇 2007-01-22 19:48
回平行线，多关注Donews，多逛Blog，祝你早日成功。

12 Casper 2007-01-25 13:44
首先祝楼主能早找到领钱的地儿！干了将近3年程序员，网页一直用EclipseLomboz写，遵循严格的xml标准，标签配对，包括大小写，保持lomboz的校验器没有错误提示，页面也都是手写，当然编辑器给了很大的方便。现在头儿要求用div写页面了，一下子还真有点不知所措。本来各种浏览器的浏览效果已经是有差别了，这下子再来个CSS，未来如何？未来如何？div+css有图形化开发的工具吗？实在是不愿意手敲代码了~~~

13 puma 2007-01-25 20:08
很是奇怪，我在google查找关于wordpress中插入表格的问题，居然会来到这里来。其实我希望能在wordpress中做一个可以用css控制的表格的。最后做成plugin的样子的。不过看样子很难啊。我在想是不是可以插入div 然后在wordpress中的模板用css来控制呢？可能你们没有用过wordpress，如果用过就好了，给我一点意见 ^_^.

14 自由勇 2008-02-15 10:01
Trackback来自《再谈DIV+CSS》

这几天仔细研究了一下DIV+CSS，它的应用确实很不错，入门也较快。了解和学习DIV+CSS的最好方法就是，找一个最简单的教程，然后多练习几次，熟悉了这个原理，就能举一反三。DIV+CSS是近一两年开始在国际上流行起来的，很多共享的Blog程序，都是使用DIV+CSS的代码布局。

15 ken 2011-08-09 15:22
本人觉得css没什么用途。那些全部都可以在html中改变。例如<body bgcolor="red">效果与css一样。我做网页都是打代码的，而且不用table。一直不用frontpage，只是我觉得DIV只是绝对定位对我有用。。。
对我的回复直接发到我邮箱…mwsy651191642@163.com

16 Thifani 2012-04-18 09:00
都说对搜索引擎而言，更偏好于使用div+css的网站，如果过多使用了css,那搜索引擎加载时只会占用更多的时间，个人感觉如果网页结构不复杂，还是不用CSS的好些。