HTML——span与div详解

首先看一些一些主流网站对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感觉挺杂乱的。