HTML 区块
每个 HTML 元素都有一个默认显示值,具体取决于元素的类型。 两个最常见的显示值是块和内联。
块级元素
块级元素总是从新行开始,浏览器会自动在元素前后添加一些空格(边距)。
块级元素始终占据可用的全部宽度(尽可能向左和向右延伸)。
两个常用的块元素是:<p>
和<div>
。
该<p>
元素定义 HTML 文档中的一个段落。
该<div>
元素定义 HTML 文档中的一个分区或一个部分。
<p>
元素是块级元素。
<div>
元素是块级元素。
例子
<p>Hello World</p>
<div>Hello World</div>
内联元素
内联元素不会从新行开始。
内联元素仅占用必要的宽度。
这是段落内的 <span>
元素。
例子
<span>Hello World</span>
<div>
元素
该<div>
元素通常用作其他 HTML 元素的容器。
该<div>
元素没有必需的属性,但style
、class
和id
很常见。
当与 CSS 一起使用时,该<div>
元素可用于设置内容块的样式:
例子
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
元素
该<span>
元素是一个内联容器,用于标记文本的一部分或文档的一部分。
该<span>
元素没有必需的属性,但style
、class
和id
很常见。
当与 CSS 一起使用时,该<span>
元素可用于设置部分文本的样式:
例子
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
章节总结
- 块级元素始终从新行开始并占据可用的全部宽度
- 内联元素不会从新行开始,它只占用必要的宽度
- 该
<div>
元素是块级的,通常用作其他 HTML 元素的容器 - 该
<span>
元素是一个内联容器,用于标记文本的一部分或文档的一部分