溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html中可替換元素指的是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
最近在群聊里偶然看到有位仁兄發了張今日頭條前端面試題的截圖，其中關于 HTML 的只有一題，如下：
請問什么是可替換元素和非可替換元素，它們的差異是什么？并舉例說明。
前端面試中 HTML 的題目本來就最少，而且并不難，翻來覆去也就那幾樣。我們之前已經談到過最經典的 HTML 語義化 ，今天就借此機會來談談可替換元素。
釋義
什么是可替換元素？顧名思義，就是會被替換的元素。 （尬笑……
比如一個典型的可替換元素 img：
<img src=xxx.jpg>
我們并沒有在 img 標簽中寫入任何內容，那它的內容從哪里來的呢？
是瀏覽器去下載 src 屬性給到的圖片，并用該圖片資源替換掉 img 標簽，而且瀏覽器在下載前并不知道圖片的寬高。所以，可替換元素比較特殊，它的寬高是由其加載的內容決定的。（當然 CSS 可以覆蓋其樣式）
示例
還是用 img 標簽舉幾個例子：
<img src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
該圖片在頁面中展現出來的話，就是圖片本身本身的寬高。
img 元素也支持 width 和 height 屬性：
<img width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
此時該元素展現出來就是寬高為 80 像素。
如果我們再用 CSS 去覆蓋其樣式：
img {
width: 60px;
height: 60px;
}該元素的展現即為 60 像素。
MDN 的釋義
看過上面的例子之后我們再來理解概念性的知識就比較容易了。
可替換元素（replaced element）的展現效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于 CSS 的。簡單來說，它們的內容不受當前文檔的樣式的影響。CSS 可以影響可替換元素的位置，但不會影響到可替換元素自身的內容。
典型的可替換元素有 <iframe> <video> <embed> <img> ，還有一些元素僅在特定情況下被作為可替換元素處理，比如 <input> 。
關于html中可替換元素指的是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
