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>