DIV和SPAN元素主要用于应用样式表(CSS).两者明显的区别在于DIV是块元素,是以另起一行开始渲染的元素,可以包含段落、标题、表格、章节、摘要和备注等,而SPAN是行内元素(也称内嵌元素),行内元素不需另起一行,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN.
在 HTML 视图中工作时,可以在 <DIV>内编辑文本,将某些字包含在<SPAN>元素内,以强调那些字.与<DIV>不同,<SPAN>和它周围的文本一起移动.
几种简单测试代码如下:
<table border="0" cellspacing="0" cellpadding="0" width="600px" align="center">
<tr>
<td style="width: 188px; height: 32px;"><h3>测试<div></div></h3><div>div标签效果如下</div> </td>
</tr>
<tr>
<td style="width: 188px; height: 32px;">测试<span></span><span>span标签效果如下</span></td>
</tr>
</table>
上述代码未对其设置任何效果,div相当于<p>标签效果.
执行后效果如下:
块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如以下代码所示:
<table border="0" cellspacing="0" cellpadding="0" width="600px" align="center">
<tr>
<td style="width: 188px; height: 32px;"><h3>测试<div></div></h3><div style="display:inline">div标签效果如下</div> </td>
</tr>
<tr>
<td style="width: 188px; height: 32px;">测试<span></span><span style="display:block">span标签效果如下</span></td>
</tr>
</table>
执行后效果如下: