跳到主要内容

HTML 空标签（Void Elements）

面试速答（30 秒版 TL;DR）​

  • 空标签（Void Elements） 指的是 不能有子内容、也不允许写结束标签 的 HTML 元素。
  • 高频必背：br、img、input、hr、meta、link、source，再补充 area、base、col、embed、track、wbr、param（已废弃）。
  • HTML 里推荐写法 是 <br>、<img> 这种；<br /> 只是兼容 XHTML/JSX 风格，在 HTML5 中也能被接受，但不是“必须自闭合”。
  • 不要写结束标签，例如 <img></img>、<br></br> 都不符合规范；浏览器可能容错，但这不是正确写法。

心智模型：空标签不是“省略了结束标签”，而是“规范上就没有内容模型”​

可以这样理解：

  1. 普通标签的职责是“包内容”，所以通常有开始和结束。
  2. 空标签的职责是“声明一个单独的节点”，例如换行、图片、元信息、外链资源。
  3. 既然它本身不承载子节点，规范就直接规定它 不能有内容，也不能有结束标签。

HTML5 里的空标签有哪些？​

标签典型用途高频程度
<br>文本换行高频
<img>图片高频
<input>表单控件高频
<hr>主题分隔高频
<meta>文档元信息高频
<link>引入外部资源高频
<source>媒体资源候选中高频
<area>图片热区低频
<base>基准 URL低频
<col>表格列配置低频
<embed>嵌入外部内容低频
<track>字幕轨道低频
<wbr>可选换行点低频
<param>旧式对象参数已废弃，了解即可

面试里通常不要求 14 个全背下来，但常用 7 个最好张口就来：br、img、input、hr、meta、link、source。

关键规则​

1）不能写结束标签​

<!-- ✅ 正确 -->
<img src="/logo.png" alt="logo" />
<br>

<!-- ❌ 不规范 -->
<img src="/logo.png" alt="logo"></img>
<br></br>

要点：

  • 在 HTML 解析里，空标签没有“闭合自己”这件事，它在开始标签结束时就已经完成解析了。
  • 你额外写出来的 </img>、</br>，通常只会被当作无效结束标签忽略。

2）不能靠“内容”来表达语义​

<!-- ❌ 错误理解：给 img 塞子节点 -->
<img src="/banner.png" alt="banner">
  备用文本
</img>

<!-- ✅ 正确做法：用 alt 表示替代文本 -->
<img src="/banner.png" alt="活动横幅" />

像 <img> 的文字替代，不是写到标签中间，而是靠属性（如 alt）表达。

3）<br> 和 <br /> 在 HTML5 中都能工作​

<!-- HTML5 中都能解析 -->
<br />
<br />

但面试里最好说清：

  • HTML 语义上：推荐写 <br>。
  • JSX / XML / XHTML：要求标签闭合，所以常写 <br />、<img />。
  • 不要把“空标签”误等同于“自闭合标签”。self-closing 更像 XML/JSX 语法概念，void element 才是 HTML 规范概念。

高频空标签的典型用法​

1）<img>​

<img src="/images/avatar.webp" alt="用户头像" width="96" height="96" loading="lazy" />

面试加分点：

  • alt 是可访问性和兜底语义，不只是“图片加载失败才显示”。
  • width / height 先声明尺寸，有助于减少 CLS（布局偏移）。

2）<meta>​

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="HTML 空标签面试笔记" />
<link rel="stylesheet" href="/styles/app.css" /> <link rel="icon" href="/favicon.ico" />

4）<source>​

<video controls>
  <source src="/intro.webm" type="video/webm" />
  <source src="/intro.mp4" type="video/mp4" />
</video>

典型题 & 标准答法​

Q1：HTML 中有哪些空标签？​

答法建议：

  • 先给定义：不能有子内容、没有结束标签。
  • 再报高频：br、img、input、hr、meta、link、source。
  • 最后补一句：完整列表还包括 area、base、col、embed、track、wbr 等。

Q2：<br> 和 <br /> 有区别吗？​

答法建议：

  • 在 HTML5 里两者都能被解析。
  • <br> 更符合 HTML 语法；<br /> 更像 XHTML/JSX 风格。
  • 功能上通常没有区别，但不要因此误以为 HTML 所有标签都能写成自闭合。

Q3：为什么 <img></img> 不对？​

答法建议：

  • 因为 <img> 是空标签，规范规定它不能有结束标签，也不能承载子内容。
  • 浏览器可能容错，但那只是错误恢复，不代表写法正确。

常见追问​

  • 空标签和 replaced element 是一回事吗？
    • 不是。<img> 既是空标签，也是 replaced element；但 <input> 的某些表现也接近 replaced。两个概念一个偏 HTML 语法，一个偏 CSS 渲染。
  • React 里为什么 <img /> 是必须的？
    • 因为 JSX 更接近 XML 语法，所有标签都必须闭合。
  • 可以给空标签设置 innerHTML 吗？
    • DOM API 层面你可能能赋值，但 HTML 渲染语义并不会把它当成合法子内容来使用，工程上没有意义。

易错点 / 坑​

  • 把空标签当成“少写了结束标签的普通标签”。根上就理解错了。
  • 用多个 <br> 撑间距。这是样式问题，应该交给 CSS 的 margin / padding。
  • 把 <br /> 当作 HTML5 强制要求。不是，更多只是风格或 JSX 兼容写法。
  • 忘记给 <img> 写 alt。这会同时伤害可访问性和语义完整性。

速记要点（可背诵）​

  • 空标签 = 没有内容模型的标签，只能单独出现，不能写结束标签。
  • 常用 7 个：br、img、input、hr、meta、link、source。
  • HTML 推荐 <br>，JSX 常写 <br />。
  • 浏览器能容错，不代表写法规范。