替換了HTML的元素：神話和現實

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

由於瀏覽器和操作系統之間的渲染不一致，

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

鑰匙要點：

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

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

固有的尺寸解釋了：

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

>在實踐中替換元素：

> HTML Living標準提供詳細的渲染規則。某些元素總是被替換，而另一些元素僅在特定條件下：

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

>替換元素的默認尺寸：

如果固有維度不可用，瀏覽器應用默認規則（視覺格式化模型詳細信息）：

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

表格控制：澄清：

> 其他表單控件是

不是

替換元素。 HTML標準將其歸類為非重建的。它們的外觀由瀏覽器特異性渲染和> appearance結論：

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

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

>

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

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

>

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

。

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

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

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

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

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

>

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

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

>可以替換元素會影響我的網頁的性能嗎？

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

是否有使用替換元素的可訪問性注意事項？

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

>

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

>

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

是否有使用更換元素的最佳實踐？

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

以上是替換了HTML的元素：神話和現實的詳細內容。更多資訊請關注PHP中文網其他相關文章！