img用来在网页中呈现一个图片，通过
src属性指定图片的位置，alt属性指定图片的介绍
srcset属性
适配屏幕的像素密度
- 指定不同像素密度下，应该显示的图片，像素密度单位用
x表示 - 当
srcset指定像素密度不满足当前屏幕时，就显示src指定的图片 srcset可以指定多个值，每个值用,分隔，并且每个值包含两个数据- 图片链接
- 像素密度
<img
class="img"
srcset="
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0515%2F465567a6j00qadpfz001cc000hs00b4c.jpg&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=2e4df2a6704d36a03434a78523beb590,
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic01.1sucai.com%2F180115%2F330814-1P11516240997.jpg&refer=http%3A%2F%2Fpic01.1sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=a3f71c8cc87f3cb43fa9c72f178013f8 1.5x,
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=5c0e99c333c928c8a1f2b45a0e7fab17 2x
"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=4d1f61d1afbac58b819ac87dca6651d5"
alt=""
/>
sizes和srcset
适配不同屏幕大小要显示的图片
sizes指定匹配的规则，用媒体查询表示srcset指定不同屏幕大小下要显示的图
<img
class="img"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=4d1f61d1afbac58b819ac87dca6651d5"
sizes="(max-width:440px) 100vw,(max-width:900) 33vw,254px"
srcset="
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0515%2F465567a6j00qadpfz001cc000hs00b4c.jpg&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=2e4df2a6704d36a03434a78523beb590 160w,
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic01.1sucai.com%2F180115%2F330814-1P11516240997.jpg&refer=http%3A%2F%2Fpic01.1sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=a3f71c8cc87f3cb43fa9c72f178013f8 320w,
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654074869&t=5c0e99c333c928c8a1f2b45a0e7fab17 640w
"
alt=""
/>
picture和source
同时适配不同屏幕大小以及不同像素密度要显示的图片
source的media属性指定要适配的屏幕大小，srcset指定不同像素密度下要显示的图片- 没有指定像素密度
<picture>
<source media="(max-width: 500px)" srcset="cat-vertical.jpg">
<source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
<img src="cat.jpg" alt="cat">
</picture>
#当没有匹配任何屏幕时显示img
- 指定像素密度
<picture>
<source srcset="homepage-person@desktop.png,
homepage-person@desktop-2x.png 2x"
media="(min-width: 990px)">
<source srcset="homepage-person@tablet.png,
homepage-person@tablet-2x.png 2x"
media="(min-width: 750px)">
<img srcset="homepage-person@mobile.png,
homepage-person@mobile-2x.png 2x"
alt="Shopify Merchant, Corrine Anestopoulos">
</picture>
#当没有匹配任何屏幕时显示img
<picture>标签还可以用来选择不同格式的图像- 依次检查图片的格式，当某个格式浏览器支持时就停止检查，并加载相应的图片
- 如果都没有支持，就显示
img
<picture>
<source type="image/svg+xml" srcset="logo.xml">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="ACME Corp">
</picture>
