HTML 块和内联元素
大多数 HTML 元素被定义为块级元素或内联元素。
HTML 块元素
编者注:"块级元素"译为 block level element，"内联元素"译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
此 <div> 元素是块级元素。
以下是 HTML 中的块级元素:
内联元素
内联元素在显示时通常不会以新行开始。
一个 <span> 元素 在段落内。
以下是 HTML 中的内联元素:
注释: 内联元素不能包含块级元素！
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
实例
<div style="background-color:black;color:white;padding:20px;">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。它是英国人口最多的城市， 拥有超过 1300 万居民的大都市区。</p>
</div>
亲自试一试 »
<span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
实例
<p>我妈妈的眼睛是 <span style="color:blue;font-weight:bold">蓝色</span>，我爸爸的眼睛是 <span style="color:darkolivegreen;font-weight:bold">深绿色</span> 眼睛。</p>
亲自试一试 »
本章小结
- 有两个显示值:block 和 inline
- 块级元素总是从新行开始并占用可用的全部宽度
- 内联元素不从新行开始，它只占用所需的宽度
<div>元素是块级别的，通常用作其他HTML元素的容器<span>元素是一个内联容器，用于标记文本的一部分或文档的一部分
HTML 标签
| 标签 | 描述 |
|---|---|
| <div> | 定义文档中的节（块级） |
| <span> | 定义文档中的节（内联） |
如需所有可用的 HTML 标签的完整列表，请访问 HTML 标签参考手册。
