浅谈HTML中div与span的区别 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 浅谈HTML中div与span的区别

浅谈HTML中div与span的区别

更新时间:2021-03-26 17:30:32 来源:极悦 浏览912次

我们在初学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标签的讲解,想学习的小伙伴抓紧时间行动起来吧。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>