div & span

紫色代表一级目录

粉红代表二级目录

蓝色代表三级目录

红色代表关键字

橙色代表说明

div　　定于文档中的分区或节。

　　div 标签是一个块级标签，用于充当容器的角色。此外，由于它是块级元素，会显示折行。

　　容器的作用就是使得里面的内容能够联动，因此在用 CSS 进行布局时，会很轻松。

　　div 标签的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 标签进行文档布局不是表格的正确用法。table 标签的作用是显示表格化的数据。

span　　用来组合文档中的行内元素。

　　HTML 元素是内联元素，可用作文本的容器。但不会自动换行。

　　当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。

两者之间的联系：

　　div 可以包含 span，但 span 不能包含 div。

　　span 标签宽度是被包围的内容宽度决定，不建议给span设置宽度属性 width，可以给 span 设置 margin 值，设置与父元素之前的距离。span可以通过 CSS 声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，span 可以很好解决这些问题。