常见元素 – div元素、span元素

历史

在HTML中有两个特殊的元素：div元素、span元素

• div元素：division，分开、分配的意思；
• span元素：跨域、涵盖的意思；
• 作用：无所用、无所不用;

产生的原因

• 网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
• 后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；
• 比如h1元素可以是一段普通的文本+CSS修饰样式；
• 这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理；

所以，理论上来说：

• 我们的页面可以没有 div、span；
• 我们的页面也可以全部都是 div、span；

区别

div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的。

• div元素：多个div元素包裹的内容会在 不同的行 显示。
  ✓ 一般作为其他元素的父容器，把其他元素包住，代表一个整体;
  ✓ 用于把网页分割为多个独立的部分;

• span元素：多个span元素包裹的内容会在 同一行 显示。
  ✓ 默认情况下，跟普通文本几乎没差别;
  ✓ 用于区分特殊文本和普通文本，比如用来显示一些关键字;