今天在将HTML标签之前，小编先带大家了解一下什么是块级元素和行内元素。

大多数 HTML 元素被定义为块级元素或内联元素。

HTML块元素（block element）

块级元素默认占一行，一行内添加一个块元素后一般无法添加其他的元素（后续CSS中会讲块级元素和行内元素的转换）。块级元素一般可以嵌套块级元素或行内元素。块级元素宽高，行高以及外边距和内边距都是可控的。

之前的文章讲到的h1~h6,p,ul,ol,table,hr,dl 都是块级元素。

我们用<p>标签举个栗子让大家看的更明白一点：

块级元素

在浏览器中显示：

块级元素自占一行

上面第二个元素并没有和第一个元素在同一行显示，而是自动换行，每个块级元素都自占一行。

HTML行内元素（inline element）

行内元素也叫内联元素或者内嵌元素。行内元素和其他元素都在一行上，高度、行高、内边距和外边距都不可改变。宽度是它文字或者图片的宽度，也是不可改变的。行内元素只能容纳文本或者其他行内元素。

之前文章中讲到的 a,img,br是行内元素。

同样我们用<a>标签举个栗子：

内联元素

在浏览器中显示：

行内元素与其他元素都在一行上

上面三个行内元素都在同一行上显示，并没有自占一行。当一行内联元素内容超过浏览器宽度才会自动换行。

行内元素宽度随内容变化而变化

好了，带大家了解了块级元素和行内元素。下面接着为大家讲解HTML标签。

HTML <div>标签

<div> 元素是块级元素，<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div> 元素的另一个常见的用途是文档布局。

实例：

div是容器，把文档分成独立的一部分

实际上，div就是一个容器，它把文档分成独立的、不同的部分。div还有一个最长用的用途是文档布局。

比如一个网页有头部、内容和尾部三个结构，那么在布局时就可以用3个div标签三个部分独立出来。

文档布局

当然，在每个div里面也可以放置div来区分每个独立部分的内容。（如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。）

HTML <span> 标签

<span> 标签是行内元素，用来组合文档中的行内元素。

在浏览器中显示：

通过使用span标签，可以更好的管理行内元素。如果不加样式的话，span元素中的文本与其他文本不会有任何区别。如果你还是不懂它的用途，那么小编加一点css给大家讲解一下：

添加style属性设置字体颜色

浏览器中显示：

span元素里面文本颜色显示为红色

上面p元素里面有一段文本，为了区分结构，我们把span标签里面的文本颜色设置为红色。（后续讲CSS可以应用id或者class属性来控制样式）

今天讲的内容可能对于刚接触HTML的童靴们会有些迷惑，不懂得地方也欢迎大家留言问我。

你必须非常努力，才能看起来毫不费力！

记得关注小白前端，才能收到文章推送哦~