珍爱生命远离DIV+CSS

发布于: 2010年02月20日昆明网站建设云南网站设计师 jason

32个评论收藏共享

　　昨日，一网友很兴奋的告诉我说，他学会了div+css，并把第一个作品发与我分享，我非常替他高兴的打开源文件来一看：代码里除了DIV标签还是DIV标签…我不禁暗自摇头，心想:“div+css”啊，你这个称呼真是害了一代人。

　　div+css这种称呼大致是在两三年前流行起来的，现在如今，就当这种并没有多少难度的技术已经日渐成熟和普及的时候，但凡提到div+css，依旧会有许多人热情高涨，包括很多企业对于的网站设计师这个职位的招聘信息里都会提到“需精通div+css”。

　那到底什么才是正真的div+css？

　　很多人以为html代码里只要看不到table的影子，只要页面布局得和平面效果图一模一样就是div+css，其实，就连“div+css”这个名称本身都是一种误导，正确的叫法应该是：XHTML+CSS

　　首先，简单的说，Xhtml就是传统的html到xml的一种过渡语言，xml虽然数据转换能力强大，完全可以替代html，但面对成千上万已有的基于html语言设计的网站，直接采用xml还为时过早。因此，在html4.0的基础上，用xml的规则对其进行扩展，得到了Xhtml。所以，建立Xhtml的目的就是实现html向Xml的过渡。目前国际上在网站设计中推崇的w3c就是基于Xhtml的应用，即通常所说div+css。

　　所以，其实大家只是把所有的xhtml标签，统称叫做了“div”而已，而正是由于这种统称，错误了引导了大多数网站设计师的判断，以为页面里只需要使用DIV只个标签，充其量再象征性的使用一下ul,li足矣，如果是这样，那就大错特错了，那就完全违背了xhtml创建的初衷。

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了。小白们真的会把它当作宝贝的！　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　－－前端观察

　　众多w3c推崇者，都在大力提倡用义语合理的进行页面构架，那什么叫做义语，义语其实就是在人机交互的过程中，用有意义的标签告诉搜索引擎，这些内容是什么，这段文字起到了什么作用，同时，配合科学的xhtml标签嵌套规则，更增加你的网站对于搜索引擎的可读性和亲和力。

　　说到这里也许大家也都明白了，SEO是网站推广中不可或缺的一个步骤，而用xhtml+css重构你的网站，也便是所谓SEO中必须经历的一步。

附文：heading(h1,h2,h3…) 标签的用法

转载请注明出处: 　网站设计师jason 　http://www.playw3c.com
　　

Tagged with: SEO, w3c

32个评论 to “珍爱生命远离DIV+CSS”

了然说：

2011/08/28于2:04 下午

阁下文章写的很不错，很有见解，真的很谢谢你分享经验

soflash 说：

2011/03/17于9:36 上午

好！帮助很大！

crusher 说：

2011/02/18于3:12 下午

是啊，有很多人喜欢一排div到底，看着别扭，网页布局也是无穷尽的技术，不能小看

miaojun 说：

2010/12/21于12:45 下午

正是这一通俗而流行的叫法害了很多人，还有许多自己还一知半解的就在网上出视频教程，文档教程的，真的是误人子弟了！

季万强说：

2010/12/09于11:51 下午

绝对是技术文章，以后会常来看看！学习一下技术！

涛涛说：

2010/12/07于9:08 下午

技术文章，收藏了。

css 说：

2010/09/17于1:14 上午

学习学习。

CSS 说：

2010/09/17于1:13 上午

学习了。欢迎回访

Amy 说：

2010/04/23于9:16 下午

xhtml+css来布局网页可能比较符合所谓的web标准，博主说的也不错，div在这个布局当中确实有点被人用的泛滥了，其实web标准中的结构化才是骨架，css布局只是皮肤，骨架不好，又有何用！而且搜索引擎看到的就是你的骨架，看你的html标签是否应用到合理的位置！
以下观点仅代表个人观点，欢迎拍砖！