谈谈网页的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的好些。

发表评论:
名字: (*必填)
博客: (可省)

正文:

  记住信息?

王志勇:1980-09-26 (44周岁)
程序设计,前端设计。

版权声明:本博客所有文章,均符合原创的定义,禁止转载,违者将必究;正确的方法是贴原文的标题和网址即可。

与此相关的链接
自由勇专栏

Blog存档 Archives

2022年07月
2022年06月(15)
2022年05月(20)
2022年04月(16)
2022年03月(9)
2022年02月(9)
2022年01月(10)
2021年 +

2020年 +
2019年 +
2018年 +
2016年-2017年(9)
2014年06月-09月(10)
2013年 +
2012年 +
2011年 +
2010年 +
2009年 +
2008年 +
2007年 +
2006年 +
2005年09月(4)

Copyright © 2006-2024 auiou.com All rights reserved.
此Blog程序由王志勇编写