您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)html中可替換元素指的是什么,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
最近在群聊里偶然看到有位仁兄發(fā)了張今日頭條前端面試題的截圖,其中關(guān)于 HTML 的只有一題,如下:
請(qǐng)問(wèn)什么是可替換元素和非可替換元素,它們的差異是什么?并舉例說(shuō)明。
前端面試中 HTML 的題目本來(lái)就最少,而且并不難,翻來(lái)覆去也就那幾樣。我們之前已經(jīng)談到過(guò)最經(jīng)典的 HTML 語(yǔ)義化 ,今天就借此機(jī)會(huì)來(lái)談?wù)効商鎿Q元素。
釋義
什么是可替換元素?顧名思義,就是會(huì)被替換的元素。 (尬笑……
比如一個(gè)典型的可替換元素 img:
<img src=xxx.jpg>
我們并沒有在 img
標(biāo)簽中寫入任何內(nèi)容,那它的內(nèi)容從哪里來(lái)的呢?
是瀏覽器去下載 src 屬性給到的圖片,并用該圖片資源替換掉 img
標(biāo)簽,而且瀏覽器在下載前并不知道圖片的寬高。所以,可替換元素比較特殊,它的寬高是由其加載的內(nèi)容決定的。(當(dāng)然 CSS 可以覆蓋其樣式)
示例
還是用 img
標(biāo)簽舉幾個(gè)例子:
<img src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
該圖片在頁(yè)面中展現(xiàn)出來(lái)的話,就是圖片本身本身的寬高。
img
元素也支持 width
和 height
屬性:
<img width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
此時(shí)該元素展現(xiàn)出來(lái)就是寬高為 80 像素。
如果我們?cè)儆?CSS 去覆蓋其樣式:
img { width: 60px; height: 60px; }
該元素的展現(xiàn)即為 60 像素。
MDN 的釋義
看過(guò)上面的例子之后我們?cè)賮?lái)理解概念性的知識(shí)就比較容易了。
可替換元素(replaced element)的展現(xiàn)效果不是由 CSS 來(lái)控制的。這些元素是一種外部對(duì)象,它們外觀的渲染,是獨(dú)立于 CSS 的。簡(jiǎn)單來(lái)說(shuō),它們的內(nèi)容不受當(dāng)前文檔的樣式的影響。CSS 可以影響可替換元素的位置,但不會(huì)影響到可替換元素自身的內(nèi)容。
典型的可替換元素有 <iframe>
<video>
<embed>
<img>
,還有一些元素僅在特定情況下被作為可替換元素處理,比如 <input>
。
關(guān)于html中可替換元素指的是什么就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。