空元素是什么？可替换元素又是个啥？

空元素

An empty element is an element from HTML, SVG, or MathML that cannot have any child nodes (i.e., nested elements or text nodes).

这是来自 MDN 的解释。按照我的理解，用大白话说出来就是，在 HTML、SVG 或 MathML 中，空元素指这个元素节点里不存在子节点，这个子节点指 元素节点（element node）或者 文本节点（text node）。

PS：关于 DOM 节点的概念，如果你不了解，可以戳 阮一峰的《JavaScript 标准参考教程(alpha)》中 6.1 概述 来学习。

举例说明，
在 HTML 中有以下空元素：

• <area>
• <base>
• <br>
• <col>
• <colgroup> when the span is present
• <command> Obsolete
• <embed>
• <hr>
• <img>
• <input>
• <keygen> Obsolete
• <link>
• <meta>
• <param>
• <source>
• <track>
• <wbr>

此外，在这些空元素上使用一个闭标签是无效的。如 <input type="text"></input> 是错误的。

在 SVG 中有 <font-face-name> 、<hkern> 、<vkern> 等。

在 MathML 中有 <mspace> 、<semantics> 等。

可替换元素

In CSS, a replaced element is an element whose representation is outside the scope of CSS. In other words, these are external objects whose representation is independent of the CSS formatting model.

MDNReplaced element

看懂了吗？看懂了吗？不懂？那我给你看下MDN的中文解释。

CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。

现在懂了？还是不懂？

Emmm…

Maybe it would help.

替换元素 是浏览器根据其标签的元素与属性来判断显示具体的内容的，CSS并不需要考虑渲染替换元素，它的展现独立于CSS，这就是“independent of the CSS formatting model”的意思。此外，不像 非替换元素 一样，它们将内容直接告诉浏览器，而检查替换元素的代码时可以发现它并没有实际的内容。

这是一个来自 W3C 关于 Replaced element 的解释，如果你看得懂英文的话，结合W3C标准的原始定义会理解得更准确一点。

另外，有人提出，把 Replaced element 翻译成可替换元素是不准确的，就英文字面意思来说， replaced 是已被替换了的， Replaced element 不由CSS负责展示渲染，不是可以被替换的概念。原文请戳这里。