HTML 块元素和内联元素

HTML 有两种类型的元素：块级元素和内联元素（也叫行内元素）。HTML 元素的类型决定了在浏览器中的显示方式。

块级元素

块级元素具有如下特点：

块级元素总是从新行开始。
块级元素总是占据整个可用的宽度（从最左边到最右边）。
块级元素有上边距和下边距，而行内元素没有。

一个最常用的块级元素是： <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>

`<div>` 元素

<div> 元素通常用作其他 HTML 元素的容器。

<div> 元素经常用到 style 和 class 属性设置其中文本的样式。

<div style="background-color:black;color:white;padding:20px;">
  <h2>北京</h2>
  <p>北京是中华人民共和国的首都，也是世界历史文化名城和古都之一，有3000多年建城史，800多年建都史，曾为辽、金、元、明、清五朝帝都。 北京拥有众多的文物古迹，故宫、长城、周口店猿人遗址、天坛、颐和园、明十三陵等，被联合国列入世界文化遗产。</p>
</div>

`<span>` 元素

<span> 元素是用来标记文本的一部分，或文档的一部分的内联容器。

<span> 元素经常用到 style 和 class 属性设置其中文本的样式。

<p>北京是<span style="color:blue;font-weight:bold">中华人民共和国</span>的首都，也是世界历史文化名城和古都之一，有3000多年建城史，800多年建都史，曾为辽、金、元、明、清五朝帝都。 </p>
</div>

元素的显示效果是可以设定的

通过 CSS 属性 display 可以轻松修改元素的显示效果。比如 <div> 是一个块级元素，应该应该占据新行和整个宽度，但是如果我们应用了 CSS 属性 display: inline, 那么 <div> 展现出来的视觉效果就是行内元素的视觉效果。

<!-- 下面的 div 不再占据新行和整个宽度了，表现的和行内元素一样 -->
<div style="display: inline;">Hello World!</div>

<!-- 下面的 span 占据新行和整个宽度了，表现的和块级元素一样 -->
<span style="display: block;">Hello World!</span>

display 还有很多其他可选项，后面我们会涉及到。

总结

有两种显示值：块级元素和行内元素
块级元素总是从新行开始并占据可用的全部宽度
内联元素不会从新行开始，它只占用必要的宽度
通过 CSS 属性 display 可以设定元素的显示类型。

HTML 标签

如需所有可用 HTML 标签的完整列表，请访问 HTML 标签参考。