当然了，div和span的具体意义和区别脱离开实践是很难说清楚的。下面我们就来看看div和span的应用实例。
块级标签<div>实例页面。源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
text-align: center;
width: 100%;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内，属性为box。</p>
<p>我在div内，属性为box。</p>
<p>我在div内，属性为box。</p>
<p>我在div内，属性为box。</p>
</div>
</body>
</html>
在上面的例子中，我们首先在页面内放了一个class为box的div，而在它的内部又放了一个class为boxhead的div。为了便与观察，我们为div添加了背景颜色。下面我们来看看对这两个div定义的前面教程中没有的属性：
对box的属性：width: 30%;表示这个box div占页面宽度的30%，而浮动属性float: left; 则表示box div浮动在页面的左侧。
对boxhead的属性：width: 100%;由于boxhead div在box div之内，那么这里的100%是指box的宽度。
行级标签<span>(行内标签)。本实例在上面实例的基础之上，只修改一段文本的颜色。修改如下代码：
将第一个“<p>我在div内，属性为box。</p>”修改为
<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p>
以上只是关于div和span的简单介绍，而实际应用中div和span的用法是非常灵活的。
-------------------------------------------------
如何理解div和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的。那就是表单中。还是以登陆为例，如果登陆的数据需要展现出来，比如很多edit页面和view页面，结构应该完全相同，不同的是在edit页面中是输入框，而view页面中则用span展现数据。类似如下：
<h3>用户登陆</h3>
<div>
<label for="name">用户名</label>
<span>MyName</span>
</div>
<div>
<label for="pw">密码</label>
<span>MyPassword</span>
</div>
<p><button /></p>
</div>这样的好处有两点：1、和label区分开来，便于应用样式，如下定义：div div span{}。2、可以通过节点提取所有录入的数据。这是我目前唯一非常明确的使用span的地方，这里除了span好像没有更合适的了，也有点符合它的语义：范围和结构化。这是我抛出的一块砖头，谁能引出玉来，或者知道玉，求之。其他span的运用仍在摸索中，包括从W3源代码中获得的提示。
差不多要说完了，这时我对关于容器的说法又耿耿于怀了，于是再次以容器为关键词疯狂google，凭什么上上下下都说是容器，我要找出根源来，终于在最后，皇天不负有心人，在我执迷不悟的，怀着容器是错误理解的信念下，挖出来了根源。W3在这里 对div和span进行了这样的解释 ：generic language/style container。两者都一样。哦，原来如此，怪说不得所有的中文翻译都是容器，我想很少人去看英文追根到底吧。确实style container应当翻译为样式容器。这一点都没错，错的是请注意，这是html中的div和span！！！而不是xhtml中的div和span，随即我再查到W3在对[url- http://www.w3.org/TR/2004/WD-xhtml2-20040722/elements.html]xhtml中的div和span的解释 [/url]，已经不一样了：对于div是Define the characteristics of a block，而对于span是Define characteristics of text。对！这才是我的理解，也是我想要的正确解释！！因为这个是xhtml 2.0中的解释，由于2.0中section的存在，所以在对div的解释中，节点的含义被取消了，xhtml1.x的解释我懒得去找了。现在回头看我刚才试着写下的xhtml 2.0登陆结构中的div和最后一句话。嗯，div即便不做节点也不做行，可能还是有用的。
说到这里，问一句，html和xhtml最大的不同在哪里？是语法吗？是名称吗？是严格了，xml化了吗？不不不，本质区别是：html是面向表现的语言，而xhtml是面向结构的语言！所以我们应当从结构的角度去审视和理解与运用xhtml中的每一个Tag。比如容器的理解，在面向表现的html中，是正确的，但是在面向结构的xhtml中则错了，应该理解为节点。理解直接影响运用，以表现的理解显然无法写出结构化的代码。否则什么合什么离，哈哈哈，忍不住又敲出来了。
好了，span现在总结不出来，只好先对div做个总结收尾：在当前xhtml1.x环境下，我们需要产生节点（section）和行（line）的时候选用div。
6315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
