当前位置:首页 > 站长杂谈 > 正文

DIV+CSS 请不要再忽悠人了

作者:神采飞扬  来源:source 【 】 浏览: 添加日期:2009-08-03 我要评论(40)     

今天看到神采飞扬发表于前端观察的《DIV+CSS 请不要再忽悠人了》,讲的挺有深意的,尤其对于新手如何正确认识div,学习web标准,使用web标准建站应该有很大帮助。转载过来,共同分享。

在大约两年前,DIV+CSS是一对很诱人的组合,会用DIV+CSS制作网页的人,常常会被人赞以大拇指的,记得06年初的时候,我用div+css布局的一个纯静态网站还拿了学校网页设计比赛的一个奖。

今天,尽管提到DIV+CSS,还会有很多人热情高涨,但是我会对他摇头了:DIV+CSS不是一切,更不是某些人所谓的“神话”!创造神话的是CSS,不是DIV+CSS。我想,是时候纠正这个问题了。

CSS的要义,是各个标签要各尽所用。

盲目推崇DIV+CSS只会让小白误入歧途的。

1、DIV只是HTML最常用的标签之一

显然HTML并不只是一个DIV标签有用,每个标签都有它的用途,只是DIV是其中最有用的一个罢了。如果DIV可以实现所有其它标签的功能,那么W3C早就把HTML精简了!

Table也不是一无是处,只是用table比较简单、容易上手才在早期被人错误的广泛推广。但是table在处理网页数据的表现上,是其他标签无法替代的,只是,它不适合用来做整个页面的布局。

2、代码的可读性

纯DIV+CSS的网站的代码的可读性无疑是非常差的,甚至table还可以通过tr和td来区分行和列,一堆DIV堆砌在一起,如果没有注释,你根本不知道某个部分是做什么用的。

3、语义化与结构化

现在,在开发CSS的时候,提的越来越多的是语义化,语义化归根到底其实还是代码的可读性问题。语义化就是让代码更易读,更加易懂,比如,.text_01{color:red} 就没有.text_red{color:red} 容易理解。

HTML同样如此,比如我们看到<ol>就知道这是个有序列表;看到<p>标签就知道这是一个段落,内容为文字;看到<span>就知道这个是比<p>还小的文字单位;看到<h1>、<h2>之类的就知道他们是标题。

显然,全部是div的页面,是看不出来这些的。

页面的结构化亦是如此,比如<div><div><div><div>…..</div></div></div></div>这样的代码,显然是很难理解其DOM结构的,但是<div><p><h2><span>…..</span></h2></p></div>就比上面的那个结构要清晰很多。

相信做开发的人对代码的语义化和结构化的理解会更加深刻。

4、团队合作

可读性低、结构化和语义化差,团队的其他成员的学习和维护难度就会提高,这对于一个团队来说,是很浪费时间和精力的。

其实,DIV+CSS的说法,已经把我们从table带到了另外的一个极端,正确的网页设计不是一个标签雄霸天下,而是每个元素都使用合适的标签。

所以说,DIV+CSS要换一种说法了,(X)HTML+CSS不更合适吗?

请不要再特意提DIV了。小白们真的会把它当作宝贝的!

其实回头看看国内普及标准化的过程,已然走错路了,就在国外同行研究CSS Sprites和网格(Grid)等技术时,我们在做什么?就在国外CSS框架遍地开花的时候,我们在做什么?到现在我们还是只能去国外的东西,依然跟在别人后面。

两年了,我们依然纠缠于DIV+CSS……

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖站长杂谈〗Tags: div+css div是什么 css

更多评论(40)..会员评论

xuxiaming(115.195.*.*) 发表于:2014-05-12 10:25:31
刚准备学DIV+CSS就看到这个网站了,一下字就把我吸引住了,我就从这里开始学吧,以后还希望站长多多帮助!谢谢!
puercha7311(121.239.*.*) 发表于:2014-01-06 18:41:04
好像可以table+css用的时候,当时我就想啊,那div和table一样用来布局的,但是还是得各个标签各司其职,所谓HTML标签团队的力量的集合!嗯!
879392153(103.247.*.*) 发表于:2013-05-09 14:52:14
其实都能明白是html+css 实现的网页功能。但是大家习惯了这样的叫法。呵呵。
taozi198826(122.225.*.*) 发表于:2012-09-19 09:38:34
额......我这怎么有一部分字被google的广告挡住了。
管理员回复:不会啊,你可以刷新下试试
web360(123.122.*.*) 发表于:2012-09-14 17:55:14
管理员就是先测试一下评论,上午一直评论不了。郁闷啊
管理员回复:可以评论啊
web360(123.122.*.*) 发表于:2012-09-14 17:53:25
一句话 给你概括掉: table是用来存放数据 div是用来定位 其它标签各有个的功能 在写标签的一定要遵循标签的语义 文章出处:标准之路(http://www.aa25.cn/web_master/800.shtml)
baoguoxiao0538(60.212.*.*) 发表于:2012-06-13 21:56:01
我是今天无意中看到的网站!现在看到了几篇文章,这让我感觉惊异!我想!咱们的网站可能就是我以后学习的重点或者说是榜样,刚才看到你们说网站的登录已成不变,现在我看到你们制作的登录别具一格,现在我看到这篇文章,让我感慨良多!我是一个菜鸟!
管理员回复:在这里你只要用心学,就一定会学到更多知识
Fly(114.249.*.*) 发表于:2011-01-19 14:27:43
我是这个网站的粉丝,很多东西都很不错!谢谢站长了! 别的兄弟姐妹有可以加入QQ群:51811451 一起来讨论
管理员回复:大家都加呀

出差旅游免费预订酒店

【视频教程】新手常见问题