HTML 块级元素与行内元素
每个 HTML 元素都有一个默认的显示值,具体取决于它是哪种类型的元素。
最常见的两种显示值是块级(block)和行内(inline)。
块级元素
块级元素总是从新行开始,浏览器会在元素前后自动添加一些空间(外边距)。
块级元素总是占据所有可用宽度(尽可能向左和向右延伸)。
两个常用的块级元素是:<p>
和 <div>
。
<p>
元素在 HTML 文档中定义一个段落。
<div>
元素在 HTML 文档中定义一个分区或节。
<p> 元素是一个块级元素。
<div> 元素是一个块级元素。
以下是 HTML 中的块级元素
行内元素
行内元素不会从新行开始。
行内元素只占据必要的宽度。
这是一个段落内部的 <span> 元素。
以下是 HTML 中的行内元素
注意:行内元素不能包含块级元素!
<div> 元素
<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>
元素是一个行内容器,用于标记文本的一部分或文档的一部分。
<span>
元素没有必需的属性,但 style
、class
和 id
是常见的。
与 CSS 结合使用时,<span>
元素可用于为文本部分设置样式。
示例
<p>我妈妈有一双<span style="color:blue;font-weight:bold;">蓝色的</span>眼睛,我爸爸有一双<span style="color:darkolivegreen;font-weight:bold;">深绿色的</span>眼睛。</p>
自己动手试一试 »
Chapter Summary
- 块级元素总是从新行开始,并占据所有可用宽度
- 行内元素不会从新行开始,并且只占据必要的宽度
<div>
元素是块级元素,通常用作其他 HTML 元素的容器<span>
元素是一个行内容器,用于标记文本的一部分或文档的一部分
HTML 标签
标签 | 描述 |
---|---|
<div> | 定义文档中的一个节(块级) |
<span> | 定义文档中的一个节(行内) |
有关所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考。
视频:HTML 块级与行内

