HTML 空元素 And 可替换元素

• 空标签

MDN 概念

一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。

举例说明

img 标签一般使用方法

<img src="../images/avatar.png" alt="头像图片">

而不会写成这样

<img src="../images/avatar.png" alt="头像图片">这是头像图片</img>

• 空标签只有开始标签，没有结束标签；即使添加结束标签也是无效的。
• 空标签没有子节点内容：即没有在开始标签和结束标签之间的节点内容。

空标签列表

- <area>
- <base>
- <br>
- <col>
- <colgroup>
- <command>
- <embed>
- <hr>
- <img>
- <input>
- <keygen>
- <link>
- <meta>
- <param>
- <source>
- <track>
- <wbr>

• 可替换标签

MDN 概念

在中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

换句话说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe>元素，可能具有自己的样式表，但它们不会继承父文档的样式。

举例说明

使用 img 标签说明

<img src="../images/avatar.png" alt="头像图片">

• 根据标签和属性才能确定最终显示内容。
  例如：图片在下载完成之前，无法确定其具体显示内容；
  当图片下载完成之后，浏览器才能最终确定显示内容。

• 一般可替换元素都有默认样式，例如宽高，但会受 CSS 的影响。
  例如：图片在下载完成之后，会有默认宽高，但往往不是我们需要的尺寸，
  所以我们使用 CSS 控制图片宽高。

• 虽然 CSS 可以控制可替换元素的属性，但无法改变具体显示内容。
  例如：标签最终呈现的内容，显然由 src 属性控制，
  而不能单纯的靠 CSS 来控制或修改图片的最终显示内容，除非更换 src 资源。

可替换标签列表

典型可替换元素
- <iframe>
- <video>
- <embed>
- <img>
特定情况下作为可替换元素
- <option>
- <audio>
- <canvas>
- <object>
- <applet>