HTML 块和内联元素

---

大多数 HTML 元素被定义为块级元素或内联元素。

---

HTML 块元素

编者注:"块级元素"译为 block level element，"内联元素"译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

此 <div> 元素是块级元素。

实例

<div>Hello World</div> 亲自试一试 »

以下是 HTML 中的块级元素:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

---

内联元素

内联元素在显示时通常不会以新行开始。

一个 <span> 元素 在段落内。

实例

<span>Hello World</span> 亲自试一试 »

以下是 HTML 中的内联元素:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

注释: 内联元素不能包含块级元素！

---

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 标签参考手册。