首先看一些一些主流网站对span的解释
MDN:
span 元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。span>与 div 元素很相似,但 div 是一个 块元素 而 span 则是 行内元素 。
w3school:
span 来组合行内元素,以便通过样式来格式化它们。span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
那么,实际上,span的用法看个例子就行。
css:
span.ingredient {
color: #f00;
}
HTML:
<p>
Add the <span class="ingredient">basil</span>,
<span class="ingredient">pine nuts</span>
and <span class="ingredient">garlic</span>
to a blender and blend into a paste.</p>
<p>
Gradually add the <span class="ingredient">olive oil</span>
while running the blender slowly.
</p>
Add the basil, pine nuts and garlic to a blender and blend into a paste.
Gradually add the olive oil while running the blender slowly.
首先,span不换行,而div换行。span什么都不加时与普通文本没区别,比如p中的文字。那么,
span用于行内字体的特殊样式表示
span用于行内字体的特殊样式表示
span用于行内字体的特殊样式表示
重要的事情说三遍。
div相当于C语言的{ },单独的div同样没有什么style,只是换了一下行。
其将会用于文档的排版等等,比如说盒子模型,原来许多人都是使用<div>来作为网页的基本布局与框架的设定,
你可以打开任何一个网页,按下F12,就会发现最外层的标签基本都是div,由此可见一斑。
当然,html5也同样引进了许多有具体含义的标签(article, header, footer…)用于替代div+id,这样的好处有:
- 一定程度上避免了div的滥用,
- 也使得代码含义更加清晰明了。
- 对搜索引擎查找有一定的帮助
不过也有人不喜欢这么多的标签出现,的确标签记太多挺麻烦的,但是毕竟标准已经出来了,个人比较喜欢这些有实际意义的标签,一直使用div感觉挺杂乱的。