img 和 picture 的区别和使用场景
img img 是 HTML4 时就有的标签， 至今仍然是在网页中嵌入图片的最常用的方式。 与 <span>, <em> 等标签一样属于行内标签 （准确地说属于 Phrasing Content）。下面是一个示例： <img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x"> img 其实也可以控制在高清屏幕采用哪个图片，适合用在移动端 picture <picture> <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" /> </picture> 要决定加载哪个URL，user agent 检查每个 <source> 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。 picture 就可以方便的控制在某种媒体类型，加载哪个图片。感觉比较适合做响应式用。 相比 img 标签，picture 提供了更丰富的响应式资源选择方式； picture 是 HTML5 中定义新标签， 其中可以定义若干个 <source>，浏览器会匹配 <source> 的 type, media, srcset 等属性， 来找到最适合当前布局、视口宽度、设备像素密度 的一个去下载。 为了向下兼容不识别 <picture> 和 <source> 的浏览器，<picture> 中还可以写一个 <img> 作为 fallback。...