>本文探討了HTML中替代元素的經(jīng)常被忽略的行為，闡明了它們的性質(zhì)並消除了共同的誤解。

由於瀏覽器和操作系統(tǒng)之間的渲染不一致，

前端開發(fā)人員經(jīng)常遇到諸如iframe，applet和表單控件之類的元素。儘管眾多圖書館提供解決方法，但了解根本原因（替換元素的概念）至關(guān)重要。 本文深入研究W3C規(guī)格以提供明確的解釋。

鑰匙要點(diǎn)：

>替換元素：它們的內(nèi)容源於CSS格式化模型（例如，圖像，嵌入式文檔）。它們通常具有內(nèi)在的維度（寬度，高度，寬高比）。
• > 內(nèi)在維度：代表元素本身的首選大小，與頁面上的上下文無關(guān)。 並非全部替換元素都有所有三個維度。
>
• ，和的元素
始終
• 更換元素。 <embed></embed> <iframe></iframe> <video></video>誤解：許多人認(rèn)為，形式控件被替換為元素。 但是，HTML標(biāo)準(zhǔn)將它們顯式將其分類為
• 元素。 它們的默認(rèn)維度源於特定於瀏覽器的渲染規(guī)則，而不是固有的屬性。 > 理解替換的元素：

> W3C將替換的元素定義為：“其內(nèi)容不在CSS格式化模型範(fàn)圍之外的元素，例如圖像，嵌入式文檔或applet。” 內(nèi)容被其引用的外部資源代替。

固有的尺寸解釋了：

內(nèi)在尺寸（寬度，高度，縱橫比）由CSS圖像值定義，並替換了內(nèi)容模塊級別3。這些尺寸代表元素的自然大小。 圖像具有所有三個； SVG可能只有縱橫比；一個空的iframe沒有。 任何兩個的存在都會自動定義第三個。

>在實(shí)踐中替換元素：

> HTML Living標(biāo)準(zhǔn)提供詳細(xì)的渲染規(guī)則。某些元素總是被替換，而另一些元素僅在特定條件下：

• >嵌入式內(nèi)容（始終替換）：<embed></embed>，<iframe></iframe>，<video></video>。
• >嵌入式內(nèi)容（有條件地替換）：，<applet></applet>，<audio></audio>，<object></object>，<canvas></canvas>（表示表示嵌入式內(nèi)容時被替換）。
• >>圖像（通常被替換）：<img src="/static/imghw/default1.png" data-src="/uploads/20250217/173975173867b2813a4a5be.webp" class="lazy" alt="替換了HTML的元素：神話和現(xiàn)實(shí)" >和<input type="image">（當(dāng)圖像加載或預(yù)期加載時被替換；否則，它可能以按鈕呈現(xiàn)）。
>

>替換元素的默認(rèn)尺寸：

如果固有維度不可用，瀏覽器應(yīng)用默認(rèn)規(guī)則（視覺格式化模型詳細(xì)信息）：

1. 如果存在明確的寬度，高度和比率，則使用這些。
>
2. 如果僅知道比率，則將width>設(shè)置為height，保持縱橫比。 auto>
如果沒有可用的尺寸：
3. >
   視口≥300px：。
   • width: 300px; height: 150px視口＆lt; 300px：
   >和
   • 是width，具有2：1的縱橫比。 height auto

表格控制：澄清：

> 其他表單控件是

不是

替換元素。 HTML標(biāo)準(zhǔn)將其歸類為非重建的。它們的外觀由瀏覽器特異性渲染和> appearance結(jié)論：

了解替換元素和形式控件之間的區(qū)別需要仔細(xì)檢查HTML和CSS規(guī)範(fàn)。 在形式控件中，僅是一個替換元素。這種澄清提供了對HTML渲染經(jīng)常被誤解的方面的更清晰的理解。 >

>常見問題（常見問題解答）：<input type="image">（本部分與輸入相比基本不變，因?yàn)檫@是一個有用的補(bǔ)充，並且不需要重大重寫偽源性。）

>

在html中究竟替換了什麼？ HTML中替換的元素是其外觀和尺寸由外部資源定義的元素。它們被稱為“替換”，因?yàn)樗鼈兊膬?nèi)容被這些資源替換。替換元素的示例包括圖像，對象，視頻和嵌入式文檔。這些元素的實(shí)際內(nèi)容不是由HTML文檔本身確定的，而是由外部文件確定。

>替換元素與非重定元素有何不同？

>

>替換元素和非重建元素之間的主要區(qū)別在於如何確定其內(nèi)容。對於非重建元素，內(nèi)容由HTML文檔本身確定。對於替換元素，內(nèi)容由外部資源確定。這意味著替換元素的外觀和尺寸可能與HTML文檔中指定的內(nèi)容不同。

。

我可以控制替換元素的大小嗎？ 是的，您可以使用CSS控制替換元素的大小。您可以使用“寬度”和“高度”屬性來指定元素的寬度和高度。但是，請記住，除非您指定寬度和高度，否則將保持外部資源的長寬比。

使用替換元素有任何限制嗎？

>替換元素具有很大的靈活性，但它們也有一些限制。例如，您無法使用CSS或JavaScript更改替換元素的內(nèi)容。另外，某些CSS屬性不適用於替換元素，例如“垂直align”和“線路高”。

>替換元素的一些常見用途是什麼？

更換的元素通常用於將外部資源嵌入網(wǎng)頁中。這包括圖像，視頻，音頻文件和其他多媒體內(nèi)容。它們也可以用於嵌入文檔，例如PDF，以及創(chuàng)建互動內(nèi)容，例如游戲和測驗(yàn)。

>

如何指定替換元素的來源？

使用“ SRC”屬性指定了替換元素的來源。此屬性的值是外部資源的URL。例如，要嵌入圖像，您將使用“ img”元素將“ src”屬性設(shè)置為圖像的URL。

>可以替換元素會影響我的網(wǎng)頁的性能嗎？

> 是的，更換的元素可能會影響您的網(wǎng)頁的性能。由於這些元素的內(nèi)容是從外部資源加載的，因此它們可以增加網(wǎng)頁的負(fù)載時間。為了最大程度地減少這種影響，您應(yīng)該優(yōu)化外部資源的大小，並考慮使用懶惰的加載技術(shù)。

是否有使用替換元素的可訪問性注意事項(xiàng)？

是的，使用替換元素時，重要的是要考慮可訪問性。例如，對於圖像，您應(yīng)始終包含描述圖像內(nèi)容的“ alt”屬性。這有助於屏幕讀取器理解內(nèi)容，從而使您的網(wǎng)頁更容易受到視覺障礙的訪問。

>

我可以使用帶有替換元素的CSS嗎？

>

是的，您可以將CSS使用帶有替換元素的CSS。但是，並非所有CSS屬性都適用於更換的元素。例如，您可以使用“寬度”和“高度”屬性來控制元素的大小，但是您不能使用“ content”屬性來更改元素的內(nèi)容。

是否有使用更換元素的最佳實(shí)踐？

使用替換元素時，重要的是要優(yōu)化外部資源的大小，以最大程度地減少對網(wǎng)頁加載時間的影響。另外，始終包含圖像以提高可訪問性的“ alt”屬性。請記住，雖然您可以控制使用CSS替換元素的大小，但應(yīng)維護(hù)外部資源的縱橫比以防止失真。

以上是替換了HTML的元素：神話和現(xiàn)實(shí)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！