日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后,達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

在html中src和href的區(qū)別,以及img中的srcset的作用是什么?

作者:賣菜的小白 更新時(shí)間: 2022-04-19 編程語(yǔ)言

一、src和href的區(qū)別
src是指向外部資源的位置,指向的內(nèi)容會(huì)嵌?到?檔中當(dāng)前標(biāo)簽所在的位置,在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)?到?檔內(nèi),如js腳本,img圖?和frame等元素。當(dāng)瀏覽器解析到該元素時(shí),會(huì)暫停其他資源的下載和處理,知道將該資源加載、編譯、執(zhí)?完畢,所以?般js腳本會(huì)放在底部?不是頭部。
href是指網(wǎng)絡(luò)資源所在位置(的超鏈接),?來(lái)建?和當(dāng)前元素或?檔之間的連接,當(dāng)瀏覽器識(shí)別到它他指向的?件時(shí),就會(huì)并?下載資源,不會(huì)停?對(duì)當(dāng)前?檔的處理。比如link標(biāo)簽。
二、知道img的srcset的作用是什么?
可以設(shè)計(jì)響應(yīng)式圖片,我們可以使?兩個(gè)新的屬性srcset 和 sizes來(lái)提供更多額外的資源圖像和提示,幫助瀏覽器選擇正確的?個(gè)資源。srcset 定義了我們?cè)试S瀏覽器選擇的圖像集,以及每個(gè)圖像的??。

    <img src="./img/1.jpg" srcset="./img/2.jpg 500w, ./img/3.jpg 1000w, ./img/4.jpg 1200w" 
    sizes="(max-width:500px) 600px, (max-width: 1000px) 1500px" alt="">
    //這里size中max-width:500px表示最大為500px時(shí)將其當(dāng)做600px,然后和srcset進(jìn)行匹配

三、還有哪?個(gè)標(biāo)簽?zāi)芷鸬礁鷖rcset相似作??
元素通過(guò)包含零或多個(gè)元素和一個(gè)元素來(lái)為不同的顯示/設(shè)備場(chǎng)景提供圖像版本。瀏覽器會(huì)選擇最匹配的? 元素,如果沒(méi)有匹配的,就選擇 元素的 src屬性中的URL。然后,所選圖像呈現(xiàn)在 元素占據(jù)的空間中。

<picture>
	<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
	<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

原文鏈接:https://blog.csdn.net/weixin_47450807/article/details/124214601

欄目分類
最近更新