快捷搜索:   服务器  PHP  安全  linux 安全  IIS

珍爱生命 远离DIV+CSS

  

什么是真正的DIV+CSS

 

  昨日,一网友很兴奋的告诉我说,他学会了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中必须经历的一步。

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

 
顶(0)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论