HTML（四）— div、span

在HTML中除了表格、表单等常用标签之外，还有两个常用的标签 — div和span标签，两个标签都类似于一个容器，对网页做出一定的布局。下面笔者对两个标签的作用和使用做出了一些整理，供读者学习。

DIV标签 — 块级元素

     DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
     <div> 标签定义 HTML 文档中的分隔（DIVision）或部分（section）。
     <div> 标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。
     <div> 标签可以把文档分割为独立的、不同的部分。<div>标签主要结合CSS使用目的是为页面进行布局。

<!-- div独自占用一行，本身是带有换行的效果 --><div>DIV1</div><div>DIV2</div>

SPAN标签 — 行级元素

     <span>标签是被用来组合文档中的行内元素。<span>没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。
     <span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。

<!-- span本身不带有换行效果 --><span>SPAN1</span><span>SPAN2</span>

这里笔者对DIV和SPAN的使用只做了简单的描述，在后面学习CSS时，DIV和SPAN会有更加详细的使用。

DIV和SPAN的区别

DIV属于块级元素；SPAN属于行级元素。

• 块元素又名块级元素（block element）
  特点：
  1.总是在新行上开始。
  2.高度、行高以及外边距和内边距都可以控制。
  3.宽度缺省是它的容器的100%，除非设定一个宽度。
  4.它可以容纳内联元素和其他块元素

<!-- 我们把三个div写在了一行上，但是运行出来却分成了三行 --> <div>我是DIV1</div><div>我是DIV2</div><div>我是DIV3</div>

• 行级元素又名内联元素（inline element）
  特点：
  1.和其他元素都在一行上。
  2.高度、行高以及外边距和内边距不可改变。
  3.宽度就是它的文字或者图片的宽度，不可改变。
  4.内联元素只能容纳文本或者其他内联元素。

其他块级元素

• div - 常用块级元素。
• h1~h6 - 六大标题
• hr - 水平分割线
• form - 表单
• p - 段落等等

其他行级元素

• span
• a - 锚点
• img - 图片
• code - 计算机代码(在引用源码的时候需要)等等

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

• applet - java applet
• button - 按钮
• del - 删除文本
• iframe - inline frame
• ins - 插入的文本
• map - 图片区块(map)
• object - object对象
• script - 客户端脚本