HTML 块级元素和行内元素

每个 HTML 元素都有一个默认的显示值，具体取决于它是哪种类型的元素。

两种最常见的显示值是块级（block）和内联（inline）。

块级元素

块级元素总是在新行上开始，浏览器会自动在元素前后添加一些空间（外边距）。

块级元素总是占据可用的全部宽度（尽可能向左和向右伸展）。

两个常用的块级元素是：<p> 和 <div>。

<p> 元素在 HTML 文档中定义段落。

<div> 元素在 HTML 文档中定义分区或节。

<p> 元素是块级元素。

<div> 元素是块级元素。

<p>Hello World</p>
<div>Hello World</div>

以下是 HTML 中的块级元素：

内联元素不会在新行上开始。

内联元素仅占据必要的宽度。

这是一个段落内的 <span> 元素。

<span>Hello World</span>

以下是 HTML 中的内联元素：

注意：内联元素不能包含块级元素！

<div> 元素常用作其他 HTML 元素的容器。

<div> 元素没有必需的属性，但 style、class 和 id 是常用的。

与 CSS 一起使用时，<div> 元素可用于为内容块设置样式：

<div style="background-color:black;color:white;padding:20px;">
  <h2>伦敦</h2>
  <p>伦敦是英格兰的首都。它是英国人口最多的城市，大都市区人口超过1300万。</p>
</div>

您将在下一章中学习更多关于 <div> 元素的知识。

<span> 元素是一个内联容器，用于标记文本的一部分或文档的一部分。

<span> 元素没有必需的属性，但 style、class 和 id 是常用的。

与 CSS 一起使用时，<span> 元素可用于为文本的部分设置样式：

<p>我母亲有<span style="color:blue;font-weight:bold;">蓝色</span>的眼睛，而我父亲有<span style="color:darkolivegreen;font-weight:bold;">深绿色</span>的眼睛。</p>

标签	描述
<div>	定义文档中的分区（块级）。
<span>	定义文档中的分区（内联）。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。