视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
div和span区别
2025-10-02 15:39:37 责编:小OO
文档
div和span区别

相对与其他XHTML标签,div和span对于它们包含的元素是没有意义的。例如当你看到

标签,你知道里面是标题,当你看到标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。div只是一个分块的标签,他可以将网页分成几个区块。div里面可能包含一个标题,一个段落,也可能包含图片在内的很多元素,甚至div也可以再包含div。而span是行级元素(行内标签),通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行,而span则不会。

当然了,div和span的具体意义和区别脱离开实践是很难说清楚的。下面我们就来看看div和span的应用实例。

块级标签

源代码如下:

我真惨!被用来演示CSS!

我在div内,类为boxhead

我在div内,属性为box。

我在div内,属性为box。

我在div内,属性为box。

我在div内,属性为box。

在上面的例子中,我们首先在页面内放了一个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的宽度。

行级标签(行内标签)

。本实例在上面实例的基础之上,只修改一段文本的颜色。修改如下代码:

将第一个“

我在div内,属性为box。

”修改为

我在div内,也在span内,属性为box。

以上只是关于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展现数据。类似如下:

用户登陆

MyName

MyPassword

显示全文
专题