div与span的区别

来源：互联网发布：什么肉最好吃知乎编辑：程序博客网时间：2024/05/22 13:56

<div>标记早打HTML3.0时代就已经出现，但那时并不常用，直到css的普及，才逐渐发挥出它的优势。<span>标记打HTML4.0时才被引入，它是专门针对样式表而设计的标记。
<div>是个块级(block-lever)元素，相当于一个容器，可以容纳段落、标题、表格、图片、摘要等各种HTML元素。可以把<div>与</div>中的内容视为一个独立的对象，用于css的控制。声明时只需对<div>进行相应的控制，其中的各标记元素都会随之改变。<span>标记与<div>标记一样，作为容器标记被广泛应用在HTML语言中。在<span>与</span>中间同样可以容纳各种HTML元素，从而形成独立的对象。它包围的元素会自动换行，而<span>仅仅是个行内元素，打它的前后不会换行。<span>没有结构上的意义仅仅是应用模式，当其他行内元素都不合适时就可以使用<span>元素，此外<span>标记可以包含于<div>标记中成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。举个例子：

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>div与span的区别</title>
</head>
<body>
<p>span标记在同一行</p>
<span><img src=”div-differ-span.jpg” /></span>
<span><img src=”div-differ-span.jpg” /></span>
<span><img src=”div-differ-span.jpg” /></span>
<p>div标记不在同一行</p>
<div><img src=”div-differ-span.jpg” /></div>
<div><img src=”div-differ-span.jpg” /></div>
<div><img src=”div-differ-span.jpg” /></div>
</body></html>div与span的区别效果图如下：

: div与span的区别