src href img的srcset

src 和 href 的区别

• src 是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame元素。当浏览器解析到元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
• href 是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它所指向的文件时，就会并行下载资源，不会停止当前文档的处理。

img 的 srcset 的作用

可以设计相应图片，我们可以使用两个新的属性 srcset 和 sizes 来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些条件为真时，什么样的图片尺寸是最佳选择。
所以有了这些属性，浏览器会这些事情:

• 查看设备宽度
• 检查sizes列表中哪个媒体条件是第一个为真
• 查看给予改媒体查询的槽大小
• 加载srcset列表中引用的最接近所选的槽大小的图像

srcset提供了根据屏幕条件所选取图片的能力

<img src="wo-shi-zhen-de-shuai-200.png"
	alt="shuaiqibiren"
	srcset="wo-shi-zhen-de-shuai-200.png 200w,
			wo-shi-zhen-de-shuai-400.png 400w"
	sizes="(min-width: 600px) 200px, 50vw">

还有哪一个标签能起到跟srcset相似作用
picture 元素通过包含零个或者多个 source 元素和一个 img 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 source 元素，如果没有匹配的，就选择 img 元素的 src 属性中的 URL。 然后，所选图像呈现在 img 元素占据的空间中

picture 同样可以通过不同设备来匹配不同的图像资源

<picture>
	<source srcset="/wo/shi/zhen/de/shuaiqi-240-200.jpg"
			media="(min-width: 800px)">
	</source>
	<img src="/wo/shi/zhen/de/shuaiqi-480-400.jpg">
</picture>