網(wǎng)站首頁(yè) 編程語(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
相關(guān)推薦
- 2025-02-10 window11 系統(tǒng)安裝 yarn
- 2022-12-24 react時(shí)間分片實(shí)現(xiàn)流程詳解_React
- 2022-02-28 CommonsChunkPlugin 插件使用方法 、 出現(xiàn)報(bào)錯(cuò) : Error: webpa
- 2022-02-24 TypeError: ‘Serializer‘ object is not callable
- 2022-12-26 React生命周期與父子組件間通信知識(shí)點(diǎn)詳細(xì)講解_React
- 2022-05-01 Python?Pandas讀取Excel日期數(shù)據(jù)的異常處理方法_python
- 2022-01-26 iconv(): Detected an illegal character in input st
- 2022-06-24 python學(xué)習(xí)之讀取配置文件_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過(guò)濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支