1. 任务背景
我们浏览网页时，时常会遇到这样场景，例如一首诗中我们要强调其中的一句诗歌：
或者一句诗歌中我们要强调其中的几个字：
我们要强调一部分，那得先把这一部分区分出来对吧，今天我们要介绍的就是，可以用来区分的元素——div与span。
2. 任务目标
学习div与span的用法。
3. 相关知识点
3.1 霸道的div
为啥说div霸道，因为div元素会独占一行，它不允许有其他内容跟他显示在同一行内。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div示例</title>
</head>
<body>
<div>春眠不觉晓</div>处处闻啼鸟
</body>
</html>
效果如下，可见但凡被div包裹起来的内容，会独自占用一行。
3.2 div标签与p标签的区别
那么是不是跟之前学过的段落有点像呢？都是后面换行的效果。我们来对比下：
<div>春眠不觉晓</div>
<div>处处闻啼鸟</div>
<div>夜来风雨声</div>
<div>花落知多少</div>
<p>春眠不觉晓</p>
<p>处处闻啼鸟</p>
<p>夜来风雨声</p>
<p>花落知多少</p>
效果如下：
看到了吧，div仅仅是要求独占一行，p段落标签则更加霸道，要求前后都得空一行。
一般在网页开发过程中，使用div划分区域是非常常见的用法，例如导航栏、内容区域、底部版权区域，都可以使用div划分。
3.3 和气的span
跟div相比，span就和气多了，它会跟邻居和谐相处，不要求独占一行，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span示例</title>
</head>
<body>
花落知<span>多少</span>
</body>
</html>
效果如下：
可见span包裹的内容，跟普通内容并无区别，依然跟周围的内容紧密相处。
3.4 span的作用
通过上面的例子，大家好像觉得span元素一点用到没有啊，不用它不也是一样吗。
非也非也，虽然上面的例子中，被span包裹的“多少”并没啥特殊的。但是后面我们学习了CSS后，就可以针对span标签设置特别的样式（例如字体为红色），让“多少”凸显出来。
所以span元素的作用，还是划分内容，以便我们对其划分的内容进行差异化处理。
span的作用，目前不要求大家理解，了解即可。
3.5 块级元素与行级元素
在HTML中有两个专业术语：块级元素、行级元素。
块级元素会独占一块，不允许其他元素跟它共享一行，例如div就是标准的块级元素。
而行级元素则可以跟其他元素共享一行，例如span就是标准的行级元素。
再往前，咱们学习的段落p元素，也是块级元素；而标题h元素，则属于行级元素。
当然，后续咱们肯定会学习更多的块级、行级元素。
4. 任务实操
把上面的例子运行一下即可。
5. 任务总结
说了这么多，其实初学阶段只需要掌握div换行、span不换行就OK。