HTML 空元素：全部 14 个标签列表及示例

快速解答：什么是空元素？

HTML 中的空元素是一种没有闭合标签、不能包含任何内容或子元素的标签。它只有开始标签，例如 <br> 或 <img src=”photo.jpg”>。HTML5 中共有 14 个空元素：<area>、<base>、<br>、<col>、<embed>、<hr>、<img>、<input>、<link>、<meta>、<source>、<track>、<wbr>，以及已弃用的 <param>。由于它们不包含文本内容，有时也被称为 empty elements（空元素）。

HTML5 空元素完整列表

标签	用途
<area>	在图像映射中定义可点击区域
<base>	为文档中所有相对 URL 设置基准 URL
<br>	在文本中插入换行
<col>	在 <colgroup> 中指定列属性
<embed>	嵌入外部内容，如插件或媒体
<hr>	添加水平分隔线（主题分隔）
<img>	显示图像
<input>	创建表单输入字段
<link>	在 <head> 中链接外部资源，通常是样式表
<meta>	提供有关文档的元数据
<param>	为 <object> 定义参数（在 HTML5 中已弃用）
<source>	为 <audio>、<video> 或 <picture> 指定媒体源
<track>	为 <video> 和 <audio> 添加文本轨道（字幕、说明文字）
<wbr>	标记文本中可能的换行位置

所有其他 HTML 元素（如 <div>、<p>、<span>）都需要同时具有开始标签和结束标签。如果您尝试为空元素使用结束标签，例如 <input></input>，浏览器会将其视为无效 HTML。

这些是空元素吗？

<img>、<input>、<img><img> 是空元素吗？

许多开发者在学习 HTML 时都会遇到同样的问题。简短的答案是：这四个在 HTML5 中都是空元素。

<img> 是空元素吗？

是。<img> 标签没有闭合标签，也不能包裹任何内容。用法为 <img src=”photo.jpg” alt=”A photo”>。

<input> 是空元素吗？

是。写成 <input></input> 是无效 HTML，解析器仍会渲染该字段，但闭合标签会被忽略。正确写法是 <input type=”text” name=”email”>。

<link> 是空元素吗？

是。<link> 标签用于连接样式表等外部资源，并且始终是自包含的：<link rel=”stylesheet” href=”styles.css”>

<meta> 是空元素吗？

是。像 <meta charset=”UTF-8″>、<meta name=”viewport” content=”width=device-width”> 这样的元数据标签从不包含内容，也没有闭合标签。

<audio> 和 <video> 是空元素吗？

不是。两者都不是空元素，它们包裹 <source> 和 <track> 元素（这两者是空元素），并且需要闭合标签。

空元素与自闭合标签：两者的区别

这是最常见的困惑之一。从技术上讲，HTML5 中并不存在自闭合标签。在 XML、XHTML 和 SVG 中，自闭合标签使用末尾斜杠，如 <circle r=”10″ />，且斜杠是必需的。而在 HTML 中，解析器会直接忽略空元素上的这个斜杠。

这意味着浏览器对 <br> 和 <br /> 的处理完全相同。许多代码格式化工具仍会添加斜杠，使 HTML 看起来与 XHTML 兼容，这无害，但这并不是让元素成为“空元素”的原因。元素之所以是空元素，是因为 HTML 规范如此规定，而不是因为有斜杠。

需要注意的一个陷阱：切勿在未加引号的属性值后直接加斜杠。像 <img src=https://example.com/logo.svg/> 这样的标记会使 src 值以 /> 结尾，从而破坏 URL。请始终为属性加引号，或在斜杠前加一个空格。

请参阅自闭合标签，深入了解末尾斜杠的实际行为。

空元素的常见错误

即使是经验丰富的开发者，也会在空元素上犯错。最常见的错误如下：

添加闭合标签。写成 <input type=”text”></input> 或 <br></br> 是无效 HTML。浏览器会渲染该元素，但闭合标签会被静默忽略。只使用开始标签即可。
试图在其中嵌套内容。像 <img src=”photo.jpg”>caption</img> 这样的代码不会生成说明文字——文本“caption”会成为同级节点，而不是子节点。请改用 <figure> 和 <figcaption>。
将 <input> 与非空元素的表单元素混淆。<input> 是空元素，但 <select>、<textarea> 和 <button> 都需要闭合标签。它们看起来相似，但遵循不同的规则。
因为元素“看起来是空的”就认为它是空元素。像 <div></div> 或 <span></span> 这样的标签可以渲染为空，但它们不是空元素，始终需要闭合标签。空元素的身份来自 HTML5 规范，而不取决于该元素在页面上是否有内容。

React 和 JSX 中的空元素

如果您使用过 React，可能见过这个错误：

img is a void element tag and must neither have ‘children’ nor use ‘dangerouslySetInnerHTML’.

React 严格执行 HTML 规范。您不能向 <img>、<input>、<br>、<hr> 或 <link> 等空元素传递 children 或 ‘dangerouslySetInnerHTML’。<input> 和 <link> 也会出现同样的错误：凡是在 HTML 中是空元素的，在 JSX 中同样是空元素。

在 JSX 中，空元素必须带末尾斜杠书写：<img src=”photo.jpg” />、<br />、<input type=”text” />。JSX 比 HTML 更接近 XML，因此即使普通 HTML 不需要，斜杠在 JSX 中也是必需的。

如果遇到“void element tag”错误，请检查是否意外地在标签内包裹了内容，或通过组件属性将内容作为子元素传入。

空元素的实际示例

以下是最常见的空元素在真实 HTML 中的写法：

html <p>First line.<br>Second line.</p>  <hr>  <img src="logo.png" alt="Company logo" width="120" height="40">  <input type="email" name="user_email" placeholder="you@example.com" required>  <link rel="stylesheet" href="/styles/main.css">  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

这些标签都没有斜杠结尾，也没有单独的闭合标签。属性（src、alt、type、href 等）承载了浏览器渲染该元素所需的全部信息。

空元素示例

一些常见的空元素包括 <br>、<hr>、<img>、<input>、<meta> 和 <link>。它们可以快速地向 HTML 文档添加文本节点、换行、图像、表单及其他属性值。使用 HTML 空元素可确保网页快速加载并正确显示。HTML 标签必须正确书写，这对于没有内容的元素尤为重要。

常见问题

HTML5 中有多少个空元素？

HTML5 中共有 14 个空元素，包括已弃用的 <param>。完整列表为：area、base、br、col、embed、hr、img、input、link、meta、param、source、track 和 wbr。

空元素和 empty elements 是一回事吗？

是的，在 HTML 术语中，“void elements”（空元素）和“empty elements”描述的是同一事物，即不能包含任何内容的标签。HTML5 规范正式使用的术语是“void elements”，但许多教程和较早的文档仍使用“empty elements”。

空元素是否需要在右尖括号前加斜杠？

不需要。在 HTML5 中，<br /> 中的斜杠是可选的，会被解析器忽略。在 XHTML、JSX 和 SVG 中，斜杠是必需的。

空元素可以有属性吗？

可以。空元素没有内容，但可以拥有任意数量的属性，例如 <img> 接受 src、alt、width、height、loading 等众多属性。

为什么空元素不需要闭合标签？

因为 HTML5 规范将它们定义为不可能包含内容。既然没有可包裹的内容，闭合标签也就没有意义。尝试添加闭合标签会导致无效 HTML。

HTML 中的空元素