<div>是一个块级元素，我们可以把它比喻成盒子，它没什么实际语义能用到很多地方，独占一行不能和其它元素在一行，它还能把<div>和<span>”装在盒子里”，主要用来组合段落和布局。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div</title>
<style>
div.b{width:500px}
div.b span{color:blue}
div.b div{float: right}
</style>
</head>
<body>
<div class="b">
<p>我是一个<span>被span包含的段落</span></p>
<div>
<p>我是在div里的div</p>
</div>
</div>
</body>
</html>
*h1是块级元素的
<span>是行内元素，我们可以把它比喻成袋子，它也没有实际语义也能用到很多地方，如果没有样式它在视觉上和<p>一样,能和其它元素在一行，它的内容有多大宽度就有多宽，不能再里面添加<div>，它能把段落中的某一段”装起来”定义样式，能呈现很好的视觉效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>span</title>
<style>
div.a span{color:red}
</style>
</head>
<body>
<div class="a">
<ol>
<li><span>2015.11.20</span>财务</li>
<li>2015.11.20<span>人事</span></li>
<li>2015.11.20销售</li>
</ol>
<ul>
<li>我</li>
<li><span>是</span></li>
<li>谁</li>
</ul>
</div>
</body>
</html>
*ol、li、ul是块级元素
原文：http://www.cnblogs.com/gantang/p/5005719.html