开发者学堂课程【零基础学前端 HTML+CSS ：DIV 和 SPAN 标签介绍】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5127
DIV 和 SPAN 标签介绍
内容介绍
一、认识两个新 HTML 标签<div> <span>
二、结构与布局
三、div 与 span 的不同
一、认识两个新 HTML 标签<div> <span>
这两个标签在css 4.01里面就已经存在,不是新的标签。都是容器标签，跟table不一样，table是<tr><td>，是图层的概念，这个是配合我们样式表来使用，之前的html课程没有用到样式的表。后面多数标签写的就是<div>、<span>。
1. <div>标签:
是用来为HTML文档内大块( block-level )的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，中文把它称作“层”。
2. <span>标签:
是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
3.<div>、<span>标签可以理解为是容器标签，Div标签主要是用块标记，所有的内容、结构化的东西都是用div来放进去。
4.早期有TABLE布局，现在都是div+css布局。
二、结构与布局
1.为什么一个网站左边是图片，右边登录界面，是一个左右结构的？这就是用一个样式表来控制这样的结构，网页的布局就会有良好的排版。
2.这个网页效果，一个新上线课程里面有三个课程，这就是一个大的 div 套了三个小的 div，是一个嵌套的形式。
3.单个 div 是不能布局的，所以现在都是 DIV+CSS 布局，一个容器里面放很多内容，要有分布布局。
4.不能直接把内容敲在 body 里面，在 body 谁都不能控制，放在 table 里面控制表单，或者放在 div 里面控制标签。
三、div 与 span 的不同
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</ head>
<body>
<div>内容1</div> <div>内容2</div>
<span>内容3</span><span>内容4</span>
</body>
</html>
内容1内容2是 div 标签，内容3内容4是 span 标签，div 标签是块级标签，默认的时候是个块，本身带换行的作用的，而 span 标签就行级标签，默认是不换行。做布局一般放 div 标签，如果本身不是布局就放内容的话，就用 span 标签，如果正好是换行的情况下可以直接用 div 标签，它就默认换个新的行。
在设计界面里 div 是用虚线表示出来，如果再添加一个空的 div 的话，视图界面是看不到的，这就是 div 和 span 的区别。
如果再写一个空的 div 设计界面里是看不到的，只要在里面加入内容就会看到。
