引入
HTML 元素在页面中显示时，有些会独占一行，有些只占自己内容的宽度。
理解块级元素和行内元素，可以帮助判断标签在页面中的默认排列方式。
正文
定义
定义
块级元素通常会独占一行，行内元素通常不会独占一行，只占据内容本身需要的宽度。
这是 HTML 元素默认显示方式的一种常见分类。
真正控制显示效果的是 CSS 的 display 属性，但初学 HTML 时先理解默认表现很有用。
块级元素
块级元素通常从新的一行开始，并尽量占满父元素的宽度。
<div>第一块内容</div>
<div>第二块内容</div>这两个 <div> 默认会分别显示在两行。
常见块级元素：
<div><p><h1>到<h6><ul>、<ol>、<li><table><header>、<main>、<section>、<article>、<footer>
行内元素
行内元素通常不会独占一行，会和其他文字或行内元素排在同一行。
<p>这是一个 <span>行内元素</span> 示例。</p><span> 默认不会让内容换行。
常见行内元素：
<span><a><strong><em><img><label><code>
<div>
<div> 是最常见的块级容器。
<div>
<h2>标题</h2>
<p>这里是一块内容。</p>
</div>它本身没有语义，常用于包裹一组内容，再配合 CSS 做布局。
<span>
<span> 是最常见的行内容器。
<p>这是一段 <span>被单独标记</span> 的文字。</p>它本身也没有语义，常用于标记一小段文字，再配合 CSS 或 JavaScript 处理。
行内块元素
还有一种常见显示方式叫 inline-block，它表现得像行内元素一样不强制换行，但又可以设置宽高。
HTML 中不需要专门的标签表示它，通常用 CSS 设置。
<span style="display: inline-block; width: 100px;">项目</span>这里了解即可，具体控制方式放到 CSS 中学习。
简单对比
<div>块级元素 1</div>
<div>块级元素 2</div>
<span>行内元素 1</span>
<span>行内元素 2</span>默认情况下，两个 <div> 会分行显示，两个 <span> 会排在同一行。
特点
- 块级元素通常独占一行
- 块级元素默认宽度通常会占满父容器
- 行内元素通常不会独占一行
- 行内元素默认只占内容需要的宽度
<div>是常见块级容器<span>是常见行内容器- 默认显示方式可以通过 CSS 的
display改变
注意事项
- 不要只为了换行就乱用块级元素，结构要有意义
- 不要只为了选中文字就滥用
<span>，能用语义标签时优先用语义标签 <p>里面不适合放复杂块级结构- 块级和行内的显示效果最终可以由 CSS 改变
- HTML 负责结构，布局细节更多交给 CSS
理解
可以把块级元素理解为“页面中的一整块区域”，通常会自己占一行。
可以把行内元素理解为“文字流中的一小段内容”，通常跟着文字一起排列。
它们的区别主要是默认显示方式，不是元素重要程度的区别。
引出
理解块级元素和行内元素之后，可以继续学习 CSS 中的 display、盒模型和页面布局。