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

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

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

鑰匙要點(diǎn)：

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

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

固有的尺寸解釋了：

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

>在實(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)容時(shí)被替換）。
• >>圖像（通常被替換）：<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ù)期加載時(shí)被替換；否則，它可能以按鈕呈現(xiàn)）。
>

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

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

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

表格控制：澄清：

> 其他表單控件是

不是

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

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

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

>

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

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

>

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

。

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

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

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

>替換元素的一些常見(jiàn)用途是什么？

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

>

如何指定替換元素的來(lái)源？

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

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

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

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

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

>

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

>

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

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

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

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