img的title和alt有什么区别
1.title：通常当鼠标滑动到元素上的时候显示
2.alt：alt是img标签的特有属性，是图片内容的等价描述，用于图片无法正常加载时显示
alt 和 title 是两个常用的属性，alt定义元素的替换文本，title定义元素的提示文本。
<div>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d6815fd52174d07b810c4b5a6c0f595~tplv-k3u1fbpfcp-zoom-1.image" title="小猫" alt="图片未正常加载"/>
</div>
img 标签的 srcset 的作用是什么？
考察点: 处理响应式图片的方式 (css 媒体查询换的是背景图片, 而不是 img 标签的 src)
开发者和设计师们竞相寻求 处理响应式图片 的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备宽度下，
使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？
你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。 博客链接
其实通过使用 img 标签的 srcset 属性，可定义一组额外的图片集合，让浏览器根据不同的屏幕状况选取合适的图片来显示。
也就是图片的响应式处理能力。
如果你的响应式需求比较简单，只需要针对屏幕的不同 dpr （device pixel ratio，设备像素比）来决定图片的显示的话，
dpr 设备像素比, 越高, 能够显示的越清晰 (dpr: 2, dpr: 3)
那么就只要这么写：
<img srcset="320.png 1x, 640.png 2x, 960.png 3x" />
对于可变宽度的图像，我们使用srcset搭配w描述符以及sizes属性 。
w描述符告诉浏览器列表中的每个图象的宽度。sizes属性需要至少包含两个值，是由逗号分隔的列表。
根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。
sizes属性有两个值：
-
第一个是媒体查询条件；
-
第二个是图片对应的尺寸值，
在特定媒体条件下，此值决定了图片的宽度。
需要注意是，源图尺寸值不能使用百分比，如果要用 100%,
vw是唯一可用的 CSS 单位。
<img
alt="img元素srcset属性浅析"
srcset="320.png 320w, 480.png 480w, 640.png 640w"
sizes="
(max-width: 320px) 100vw,
(max-width: 360px) 320px,
(max-width: 480px) 360px,
(max-width: 640px) 480px,
640px"
src="640.png"
/>
为 img 定义以上属性后，浏览器的工作流程如下：
- 检查设备的实际宽度
- 检查 img 标签的 sizes 属性中定义的媒体查询条件列表，并计算哪个条件最先匹配到
- 得到图片此时的响应式宽度
- 加载 srcset 中最接近, 最适合媒体查询匹配到的宽度的图片
注意: 测试时, 清除缓存测试, 因为一旦加载了高清图, 就不会也没有必要, 回过去再用小图替换了
且我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。
(译者注：srcset 和 size 列表是对浏览器的一个建议(hint)，而非指令。由浏览器根据其能力、网络等因素来决定。)
响应式图片处理优化: Picture 标签
考察点: 响应式图片处理
picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载的图片
在 <picture> 下可放置零个或多个<source>标签、以及一个<img>标签，为不同的屏幕设备和场景显示不同的图片。
如果 source 匹配到了, 就会优先用匹配到的, 如果没有匹配到会往下继续找
使用picture元素选择图像，不会有歧义。
浏览器的工作流程如下：
- 浏览器会先根据当前的情况，去匹配和使用
<source>提供的图片 - 如果未匹配到合适的
<source>，就使用<img>标签提供的图片
<picture>
<source srcset="640.png" media="(min-width: 640px)" />
<source srcset="480.png" media="(min-width: 480px)" />
<img src="320.png" alt="" />
</picture>
