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>