块级元素和行内元素，是 HTML 中极其重要的概念，同时也是后面学习 CSS 的重要基础知识。对于这一节的内容，小伙伴们要重点掌握，千万不要忽略了。
在之前的学习中，小伙伴可能会发现：在浏览器页面效果中，有些元素是非常 “霸道” 的，总是独占一行，其他元素不能跟这个元素位于同一行，如 p、div、hr 等。而有些元素则比较 “随和”，它们不是独占一行的，其他元素可以跟这个元素位于同一行，如 strong、em 等。
在 HTML 中，元素根据在浏览器的显式形式，一般可以分为以下 2 类。
- 块级元素（block）。
- 行内元素（inline）。
提示: 除了块级元素（block）和行内元素（inline），还有行内块元素（inline-block），具体请参考：CSS display 属性。
HTML 块级元素
在 HTML 中，块级元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。说白了，块级元素就像是一个个 “盒子”，每个盒子都要自己占一层。
| 块级元素 | 说明 |
|---|---|
| h1~h6 | 标题元素 |
| p | 段落元素 |
| div | 最常用的块级元素 |
| hr | 水平线 |
| ol | 有序列表 |
| ul | 无序列表 |
上表列举的是 HTML 入门阶段常见的块级元素，而并不是全部。光说不练假把式，咱们还是先来看一个例子。
示例 1：HTML 中的块级元素和行内元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<h3>绿叶网</h3>
<p>为好教程，全力以赴</p>
<strong>绿叶网</strong>
<em>为好教程，全力以赴</em>
</div>
</body>
</html>页面效果如下图所示。
分析：
我们可以分析一下上面这个页面，其结构如上图所示。我们很容易得出以下结论。
- h3 和 p 是块级元素，它们的显示效果都是独占一行的，并且排斥任何元素跟它们位于同一行；strong 和 em 是行内元素，即使代码不是位于同一行，它们的显示效果也是位于同一行的（显示效果跟你代码是否位于同一行没有关系）。
- h3、p、strong 和 em 元素都是在 div 元素内部的，也就是说，块级元素内部可以容纳其他块级元素和行内元素。
由此，我们可以总结出块级元素具有以下 2 个特点。
- 块级元素独占一行，排斥其他元素（包括块级元素和行内元素）与其位于同一行。
- 块级元素内部可以容纳其他块级元素和行内元素。
HTML 行内元素
行内元素跟块级元素恰恰相反，它们是可以和其他行内元素位于同一行的。它们就像是文本中的一个个 “词语”，内容有多少，宽度就有多少，不会霸占整一行。
| 行内元素 | 说明 |
|---|---|
| strong | 粗体元素 |
| em | 斜体元素 |
| a | 超链接 |
| span | 常用行内元素，结合 CSS 定义样式 |
对于行内元素效果，小伙伴们可以看块级元素的例子，从这个例子我们可以总结出行内元素具有以下两个特点。
- 行内元素可以与其他行内元素位于同一行。
- 行内元素内部可以容纳其他行内元素，但一般情况下不可以容纳块级元素。
新手容易踩的 “坑”
在实际开发中，标签的嵌套是有一定规则的。这里有 2 点必须要记住的规则，否则写出的代码可能会出现莫名其妙的 Bug。
1. a 标签可以包含块级元素
在 HTML5 标准中，绝大多数行内元素（如 span）只能容纳行内元素。但是 a 标签是一个特例，它是可以包含块级元素的！
示例 2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--可以这样做-->
<a href="#">
<div class="item">
<img src="html.jpg" alt="">
<h3>HTML 教程</h3>
</div>
</a>
</body>
</html>2. p 标签不能包含 div 标签
使用 p 标签包含 div 标签，这是很多新手小伙伴会犯的错。虽然 p 是块级元素，但它主要用于存放文本。如果你尝试在 p 标签里放一个 div，浏览器会自动把你的 p 标签“切断”，从而导致样式错乱。
示例 3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千万别这样做-->
<p>
<div>绿叶网 - 为好教程，全力以赴。</div>
</p>
</body>
</html>块级元素和行内元素非常复杂，小伙伴们暂时只需简单了解即可。等学完了 CSS 教程，自然就会对块级元素和行内元素有更深的理解。
