div和span的区别：

<div>元素用于将相关元素归组在一起，放在逻辑区中，创建逻辑区有助于标识主内容区以及页面的页眉和页脚。

可以使用<div>元素将需要共同样式的元素归组在一起，使用嵌套<div>元素为文件增加更多的结构，这有利于保证结构清晰或方便增加样式

一旦用<div>元素将内容归组在一起，类似于其他块元素，可以对这些<div>元素增加样式。比如常见的margin，padding，border，background-color

等。

<div>允许你为块级内容创建逻辑划分，<span>元素则采用类似的方式建立内联内容的逻辑分组

<span>用于将相关的内联元素和文本归组在一起。类似于<div>，可以将<span>增加到类（或者为<span>指定唯一的id），对它们增加样式。

比如常见的音乐及美食列表中会经常使用到，音乐列表例子如下：

<ul>                                                                                                                   .cd{font-style:italic;}

<li><span class="cd">faded</span>                                                                .artist{font-weight:bold;}

       <span class="artist">Alan Walker</span> </li>

<li><span class="cd">青花瓷</span>    

 <span class="artist">周杰伦</span></li>

</ul>

这个时候我想将歌曲和歌手的字体和样式改变以显示不同的时候，我就可以使用<span>元素，如上所示，将歌曲名用斜体表示

歌手名用加粗表示。