深入学习网页技术CSS，再谈div、span的困惑！
使用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貌似很适合它分隔的语义哈，不是行也不是节点，仅仅就是一个分隔，呵呵。