浅谈HTML中div与span的区别

更新时间：2021-03-26 17:30:32 来源：动力节点浏览822次

我们在初学div+css布局时，发现在div与span的使用过程没有什么太大的讲究，觉得两个区别不大，div作为分割文档结构自然使它最官方的语义，但是这样的官方语义太让人迷惑，大的结构还好，但是小的地方到底是用div还是用span仍然让人迷惑。本文我们就来谈谈HTML中div于span的区别。

也许我们重新来看div和span的定义能让人豁然开朗。

div：指定渲染HTML的容器

span：指定内嵌文本容器

通俗地讲就是如果里面还有其他标签的时候就用div，如果里面只有文本就应该用span。

div是一个块级元素，用来为HTML文档内大块的内容提供结构和背景；而span是行内元素，在行内定义一个区域（也就是一行内可以被<span>划分好几个区域）；

div标签中可以镶嵌span标签，（div可以看做是一个大容器，span是一个小容器，大容器当然可以放下一个小容器啦）。

1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：

测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>

2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：

测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>

html4规范的一大突破就是引入了一大空元素<span>和<div>。所谓空元素，就是说如果单独在页面上插入这两个元素，不会对页面产生影响，但是这两个属性专门为样式表定义而生，如果对<span>和<div>定义样式表以后，其中内容的样式旧会随之变化。

<span>和<div>元素都能处理任意大小的片断，他们之间的异同可以用一个例子来说明。

示例如下

<html>

<head>

<meta http-equiv="Content-Style-Type"content="text/css">

<title>HTML示例</title>

<style type="text/css">

.myspan1{color:#FFFFFF;}

.myspan2{color:#000000;background-color:#CCFFCC;}

.myspan3{color:#FFFFFF;background-color:#000080;}

.myspan4{color:#000000;background-color:#FFCCCC;}

.mydiv1{color:#FFFFFF;background-color:#008000;}

.mydiv2{color:#000000;background-color:#CCCCFF;}

.mydiv3{color:#FFFFFF;background-color:#000000;}

.mydiv4{color:#000000;background-color:#FFFFAA;}

</style>

</head>

<body>

<h2>生命必须元素</h2>

<span class="myspan1">水</span>

<span class="myspan2">维生素</span>

<span class="myspan3">蛋白质</span>

<span class="myspan4">矿物质</span>

<hr>

<div class="mydiv1">水</div>

<div class="mydiv2">维生素</div>

<div class="mydiv3">蛋白质</div>

<div class="mydiv4">矿物质</div>

</body>

</html>

设计者在代码中输入了4个单词，单词之间没有换行，也没有空格。然后为每一个单词嵌套上<span></span>和<div></div>元素，两种元素产生了不同的显示效果。

<span>元素包含的内容，在显示格式上没有任何变化，没有因为插入<span>元素而产生换行或者其他排版效果。这样的显示效果称为“行内元素”，设计者可以在一段文本中插入任意多对<span>元素，然后添加字体、颜色、背景、边框和边距等各种格式。

<div>元素所包含的内容，在格式上有所变化，每一个<div>元素所包含的内容都另起一行，浏览器为他们分配了一个独立区域，形成一个一个“块”，因此<div>也被称作“块级元素”。不过除了这个区别，在其他方面<span>和<div>基本相同，它们都可以为其中内容添加各种样式。

正是有了<span>和<div>两个元素的出现，使得HTML4的样式定义变得更为灵活和规范。

利用<span>，可以在任意位置对特定字符进行样式格式化，即使字符包含在<li>中也一样。这些功能都是仅靠HTML元素本身属性无法达到的，而行内样式元素<span>可以达到这样的效果。

如果将这些类编组防入一个脚本中，就可以在页面上模拟动态计数效果。它的优点非常明显，设计者在变化数字的时候，无需修改<body>中的具体内容，只要用样式表归类不同背景色的<div>块即可。所以说，在HTML中，div和span都扮演着十分重要的角色。本站的HTML教程中，还有对其他的HTML标签的讲解，想学习的小伙伴抓紧时间行动起来吧。

HTML教程

上一篇HTML学习手册下一篇HTML中插入视频和音频方法

浅谈HTML中div与span的区别

JVM

多线程下载器项目实战

Java日志框架全集（选学）

高并发解决方案（选学）

零基础能学Java吗？

零基础能学Java吗？

零基础能学Java吗？