日期:2013-07-09  浏览次数:21058 次

  修整一个月,我又回来了,好吧,咱继续聊。

  上篇文章中次要否定了使用div进行规划这种说法,提出div该当用于组织代码结构,如今我们再深入一点,div拥有语义吗?这个问题前段时间在研讨群里曾激烈争论过,当时米随随发问:“什么是语义化WEB,div是什么?”小毅答曰:“DIV表示无意义容器。”我说:“否定。”然后旁边有人嘀咕:“...又要打起来了。”我大笑着进入战役形状,结果迅速被围攻了。呵呵,总是和主流水乳交融的我又一次站在主流的对立面。我还是不赞成将div视为无意义容器。容器这个概念是模糊的,是与设计挂钩的,理解成容器当前又远离结构了。再说每一个不是自我关闭的标签都可以视为容器,有什么区别?难道div可以包含一切(别断章取义哈),于是就可以随意使用了吗?那又如何固定xhtml?所以还是要回到div的语义上来,div是有语义的,只不过它的语义是面向代码结构的,是面向程序的。

  division(分割),对了,前段时间浏览w3schools时,看到它是这样定义div的:The div tag defines a division/section in a document. 我想我对div的理解是没错的。在文档中定义一个分割或者节点。我说div用于模块化页面内容,实际上从代码结构角度是展现xml化的节点结构。除了定义一个节点以外,div目前还用于定义一个分割,产生具有结构的行。还是以登陆为例:

<div>
    <h3>用户登陆</h3>
    <div>
       <label for="name">用户名</label>
       <input id="name" />
    </div>
    <div>
        <label for="pw">密码</label>
        <input id="pw" />
    </div>
    <p><button /></p>
</div>

  最外层的div是作为产生节点使用,而用户名和密码部分实际上是为了产生具有结构的行,这里若使用br同样能够产生行,但是缺乏结构,所以div代替了br。猜到我要说什么了吗?呵呵,又是xhtml 2.0,2.0中的section和line标签,是的,在1.X中,div同时扮演了section和line的角色,由于分割产生节点,由于分割产生行。但是很明显section和line具有比div更为明确的语义,那么我们可不可以认为div的语义和br一样是模糊的,既然是模糊的,br曾经被毙了,我们如今大量使用的div会不会落到同样的下场呢?不知道,至少目前的xhtml 2.0中,div仍然存在。看看上面的结构代码在xhtml 2.0中应该如何展现(没考虑XForm):

<section>
    <h>用户登陆</h>
    <line>
       <label for="name">用户名</label>
       <input id="name" />
    </line>
    <line>
        <label for="pw">密码</label>
        <input id="pw" />
    </line>
    <div><button /></div>
</section>

  所以有些人单纯的认为好像是div在不断嵌套,其实不是的,是没有办法而产生出来的假象。这里再请大家留意一个情况,需求和css结合起来看待,按钮那个部分,在xhtml1.X中我使用了p,严厉说从结构上是错误的,很明显按钮不是一个段落,我仅仅是希望它换行呈现,但是如果使用div,那么就必须给予这个div一个class="button"以区分开来,并且在设定css的时候必须先清除私有的款式属性,这样会带来不少麻烦。另外作为节点的div和作为行的div同样会出现这种问题。示例:如果我定义节点div{width: 300px; padding: 10px;},那么我就必须在定义行div时要么覆盖要么清除以避免冲突,div div{width: 200px /*覆盖*/; margin: 10px; padding: 0 /*清除*/; color: #333;},然后在定义div div.button{margin: 0 /*清除*/; color: #F60 /*覆盖*/; background: #999;}的时候再做对行div的款式冲突避免,为了避免这种情况,采用对节点div添加class="loginarea"和p,这样就可以避开两次款式清除和覆盖操作。这样的情况在结构复杂的页面中更为明显,不要通知我加class就行了,class越多,文档通用性越差,xhtml越难固定。这就是在xhtml1.X 中由于div的语义模糊带来的麻烦,回头在xhtml 2.0的结构中就很好办了,section{},section line{},section div{},无需class也互不干扰,诶诶诶,这里的div貌似很适合它分隔的语义哈,不是行也不是节点,仅仅就是一个分隔,呵呵。

  在我认为标签中最难理解的2个之一的div如今应该算是很清楚了。剩下的一个就是span,至今我仍未能理解到span如何产生结构,只好说说本人的迷惑了。

  先还是说说div和span的区别,从大的方面来说,div被归类到Structural Module(结构模块),而span被归类到Text Module(文本模块)。小的方面,div是block-elements(块级元素),span是inline-elements(行内元素)。在所有Structural Module中,div是唯逐一个语义模糊的,在所有Text Module中,span也是唯逐一个语义模糊的,呵呵,两个Tag独一的特性:语义模糊。

  回到span的语义:跨度、范围。这个这个……比division(分割)更为笼统,难以理解。在一阵疯狂google后还是没找到我想要的那种解释,接近的都没有,也许基本就没有,所有的结果都指向表现,无论中英文都是指为字体添加款式,可是可是W3中明文写着The span element, in conjunction with the id, class and role attributes, offers a generic mechanism for adding structure to documents. 这里的for adding structure to documents做何解释?百思不得其解,后来气不过,甚至打开W3的源码查看他是如何使用span的,虽说获得了一些提示,但照旧不足以领悟到structure的真理,我想应该是我的XML功力还不够。唉,既然语义上,结构上行不通,那么只好换个角度,从实际使用中试着去理解。span是行内元素,次要使用于文本,这点没什么异议,关键在于如何运用?为什么我一直不认为span是个款式容器,对,又是容器,google的时候发现清一色的容器解释,div是大容器,span是小容器,我郁闷。如果span由于文本的款式而存在,它凭什么存在?一段文本为什么要添加款式?如果你想强调应该使用em,如果想特别强调应该使用strong,Text Module里还有很多语义明确的标签可以使用。所以span应该不是作为款式容器而存在,就像div不是作为规划容器而存在一样。但是我领悟不到span的真理,哭啊!不过我可以抛砖引玉,在有一个地方,我一定会使用span的。那就是表单中。还是以登陆为例,如果登