HTML 元素类型

前言

我们看以下两组代码：

<div>
  div-123
</div>
<div>
  div-456
</div>

<span>
  span-123
</span>
<span>
  span-456
</span>

在浏览器中我们可以发现，div 里面的内容每组独占一行；而 span 却不是。这是为什么？

HTML 元素有很多, 比如 h/p/div/span/a 等元素；那到底是什么决定这个元素是否要独占一行，为什么要独占一行？

从开发者的角度出发，p 表示文本的一个段落，那我们肯定是希望它是独占一行的，来源；同理，h表示标题，我们也一定是希望标题是独占一行的。

反观 span，意为短语内容的通用行内容器，并没有任何特殊语义，来源，那我们肯定是不需要它独占一行的；img/a同理。

所以，HTML 将元素通过 CSS 区分成了两类：

正如以前的视频所说，我们可以将 p 标签转成 h 标签，又已知行内元素或块级元素是通过css实现的，那我们是不是可以找到对应的属性，并且修改？当然可以。

我们可以在浏览器的div中找到以下代码：

div {
    display: block;
}

正是因为浏览器默认给div设置了display属性，从而让div变成了块级元素。

我们用css样式进行改写

div {
  display: inline;
}

我们再看浏览器，发现4个元素出现在了一行上，可以确定我们实现了将div从块级元素到行内元素的转变，并且我们也搞清楚了对应的属性，即：

div {
  display: block;   /* 行内元素 */
  display: inline;  /* 块级元素 */
}

本节讲述了行内元素与块级元素，并认识了display这个属性，并了解了它的两个值：block 为行内元素；inline 为块级元素。