前置知识: HTML5

块级元素与行内元素：建立"盒子"世界观

6 min入门

为什么 h1 独占一行而 span 不换行：块级、行内、空元素三组概念，含 F12 验证方法、p 嵌套陷阱与嵌套铁律。

0. 学习目标（可验证）

  • 能说出块级元素与行内元素最直观的区别，并各举两个例子
  • 能说出空（void）元素是什么，并举出三个例子
  • 能用 F12 验证一个元素的 display 属性
  • 能说出”行内元素不能包含块级元素”这条嵌套规则，并解释 <p> 里放 <div> 会发生什么
  • 能说出”块级/行内”其实是”默认 display 值”的通俗说法

1. 一句话理解

块级元素像”一整层货架”：独占一行，占满可用宽度；行内元素像”货架上的单个商品”：一个挨一个排，宽度由内容撑开。

（类比只帮助建立直觉：真正的排版机制是浏览器为每个元素生成”盒子”再按规则摆放，细节在 CSS 课程展开。）

先看现象：

<h1>大标题</h1>
<p>段落一</p>
<p>段落二</p>
<span>文字一</span>
<span>文字二</span>

浏览器显示：

大标题
段落一
段落二
文字一文字二

<h1> 和 <p> 各自独占一行；<span> 却像文字一样连着排。这不是巧合，而是元素的两种基本类别。

用一张布局示意图加深印象：

┌──────────── 块级元素 p ────────────┐  ← 独占一行，占满可用宽度
│ 段落一                             │
└────────────────────────────────────┘
┌──────────── 块级元素 p ────────────┐
│ 段落二                             │
└────────────────────────────────────┘
 行内元素 span → 文字一  行内元素 span → 文字二   ← 同一行里并肩排

2. 块级元素（Block）：独占一行

特点：

  • 独占一行，后面的内容自动换到下一行；
  • 默认占满父容器的可用宽度（宽 100%）；
  • 可以设置宽度和高度（由 CSS 控制，但结构上”占一整行”是它的天性）。

代表标签：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<table>、<header>、<main>、<footer>。

3. 行内元素（Inline）：不换行

特点：

  • 不换行，在文本流里一个挨一个并排；
  • 宽度和高度由内容撑开，不能单独设置宽高（除非后续用 CSS 的 display 转换）；
  • 只占据内容实际需要的空间。

代表标签：<span>、<a>、<strong>、<em>、<img>。

特殊成员：<img> 是”行内替换元素”（replaced element，即内容由文件/资源而非文字构成的元素）。它平时像行内元素一样排在文字里，但内容是一张图片，所以它和普通行内元素不同——可以设置宽高。初学阶段记住”图片能设宽高”就够了，原理在 CSS 模块深入。

4. 空元素（Void Elements）：没有闭合标签

绝大多数标签是成对出现的（<p>...</p>），但有一类”空元素”没有闭合标签，因为它们不包裹内容，自身就是内容：

空元素作用出现场景
<br>换行文本中强制换行
<hr>水平分割线主题切换的分隔
<img>图片配图
<input>输入框表单
<meta>文档元信息<head> 内
<link>引入外部资源<head> 内引入 CSS
<source>媒体多源备选<video>/<audio>/<picture> 内
<wbr>建议断行点长 URL、长单词

写法上 <br> 和 <br /> 都合法，现代写法直接写 <br>。给空元素写闭合标签（如 <br></br>）是错误写法。

记忆窍门：空元素的共同点是**“它本身即是全部”**——换行、图片、输入框都不需要”再包一段内容”，所以天生没有闭合标签。

5. 对比与验证

对比项块级元素行内元素
是否独占一行是否
默认宽度占满可用宽度由内容撑开
能否设置宽高可以默认不能（替换元素除外）
常见标签h1/p/div/ulspan/a/strong/em

F12 验证方法：

  1. 在浏览器打开任意网页，按 F12；
  2. 点击开发者工具左上角的”选择元素”图标，再点击页面上的一个 <h1> 和一个 <span>；
  3. 在右侧样式面板里找到 display 属性：块级元素通常是 display: block，行内元素通常是 display: inline。

这个属性就是”独占一行”还是”并排排列”的开关。

准确地说：“块级/行内”是”默认 display 值”

这里要建立一个准确的心智模型：HTML 本身并没有”块级元素”这种硬分类——所谓块级/行内，说的是元素在浏览器默认样式表里的 display 值。这意味着：

  • display 值不止 block/inline 两种，还有 inline-block（并排排但能设宽高，<img> 就接近这种表现）、list-item、以及布局模式 flex/grid 等；
  • CSS 可以把任何元素的 display 改掉：display: block 能让 <span> 独占一行，display: inline 能让 <div> 并排；
  • 但 HTML 结构阶段，先按元素的天性写就对了——结构和表现各司其职，乱改 display 补救烂结构只会越补越乱。

6. 嵌套规则与高频陷阱

6.1 铁律：行内不能包块级

<!-- 错误：span 是行内元素，里面不能放块级 h1 -->
<span><h1>标题</h1></span>

<!-- 正确：块级元素可以包含行内元素 -->
<h1>标题带<span>强调字</span></h1>

原因很直观：行内元素是”货架上的商品”，装不下”独占一行的货架”。

6.2 高频陷阱：<p> 里放 <div> 会被浏览器”拆开”

<p> 只能包含文字类内容（措辞内容），放进 <div> 这类块级元素时，浏览器不会报错，而是悄悄重排你的结构：

<!-- 你写的 -->
<p>第一段文字<div>这里其实是块级内容</div></p>

<!-- 浏览器实际解析成的结构（F12 可验证） -->
<p>第一段文字</p>
<div>这里其实是块级内容</div>
<p></p>

<p> 在 <div> 出现处被提前闭合，后面多出一个空段落。页面”看起来还行”，但样式和脚本对不上号，非常难排查。规则记住一条：段落里只放文字、图片、链接、强调这类行内内容；要放块级就别用 <p>。

6.3 两个边界说明

  • <a> 的特殊身份：HTML5 允许 <a> 包裹块级内容（如整张卡片做成链接：<a href="..."><div class="card">...</div></a>），这是规范特批的例外，不算错误；但 <a> 里不能再嵌 <a>；
  • <ul>/<ol> 的直接子元素应当是 <li>，在列表标签和 <li> 之间塞别的标签属于不规范写法。

深一层：这些规则的正式原因是 HTML 内容模型——span 属于措辞内容，只能包含措辞内容，而 div 属于流内容。完整分类与”谁是谁的父级”速查矩阵见专项 html5/390-HTML5ContentModelAndNestingRules。

7. 动手试试

入门版

  1. 写一个 <h1>、一个 <p>、两个 <span>，刷新观察哪些独占一行、哪些并排；
  2. 在段落里分别插入 <br> 和 <hr>，观察换行和分割线的效果；
  3. 用 F12 查看这几种元素的 display 值。

进阶版

  1. 故意写”行内元素包块级元素”的页面（如 <span><p>...</p></span>），用 F12 观察浏览器如何自动修正，再改成正确写法；
  2. 复现 6.2 的 <p><div> 拆分现象：写完后先刷新看显示，再按 F12 看元素面板里真实的结构，体会”浏览器不报错但改你的代码”；
  3. 在页面里放一个 <img>，用 F12 看它的 display 值，并尝试用 CSS 给它设置宽高，体会”行内替换元素”的特殊性。

8. 常见问题与改进建议

常见问题原因改进建议
两个 <p> 之间塞了 <span> 但没换行行内元素不换行想独占一行就用块级元素，或学 CSS 的 display
给 <span> 设置 width 没效果行内元素宽高由内容撑开转成 display: inline-block 或 block（CSS 模块）
<span> 里套 <h1> 页面结构错乱违反”行内不能包块级”调整嵌套，让块级包行内
<p> 里套 <div> 后样式错位、多了空段落浏览器把 <p> 提前闭合块级内容移出段落，或改用其他容器
把 <br> 写成 <br></br>不知道空元素没有闭合标签空元素直接写 <br> 即可
处处用 <br> 换行排版把换行符当布局工具段落用 <p>，间距交给 CSS

9. 下一步

你已经有”盒子”世界观了。下一篇 html5/080-HTML5DivSpanContainers 介绍实战中最常用的两个容器：div 和 span——它们没有语义，但 70% 以上的页面结构都由它们搭出来。