div和span区别.docVIP

div和span区别 div和span区别 相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到h1/h1标签，你知道里面是标题，当你看到p/p标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。 当然了，div和span的具体意义和区别脱离开实践是很难说清楚的。下面我们就来看看div和span的应用实例。 块级标签div 源代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=/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”修改为 pspan 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的，虽说获得了一些提示，但依旧不足以领悟到structu