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 块级与行内