是<PICTURE>正式的HTML5？我在w3schools.com找不到它.
假设它是官方的,是回退<img>元素的源属性src或srcset.我看到一些网站使用srcset,他们不能在任何版本的IE中工作,但src在IE中工作.
Woo*_*low 13
是的,<picture>标签是标准的官方部分,但HTML5是一种生活标准,这个标签被认为是"实验性的".
该<picture>标签目前已被WHATWG HTML5生活标准所接受.这并不意味着它是一成不变的,它仍然被认为是一种"实验技术".您不应该依赖浏览器来支持这项技术.您可以在此处查看(非官方)浏览器支持概述.
正如Mozilla开发人员网络上所述:
这是一项实验技术.由于此技术的规范尚未稳定,请检查兼容性表以获取在各种浏览器中使用的正确前缀.另请注意,随着规范的变化,实验技术的语法和行为可能会在未来版本的浏览器中发生变化.
标准化HTML 的" 生活标准 "模型意味着元素被更容易接受,但可能不会保留在标准中,或者如果针对其当前使用提出了良好的论据,则可能会被更改.
必须包含该<img>元素,这具有提供后备选项的副作用.
必要时,图片元素必须在其中包含<img>标签以及<source>元素.这具有提供后备选项的副作用,但也需要提供基本图像和元数据(尤其是提供所需alt属性).的<source>元件仅仅覆盖src所述的属性<img>标签(在特定情况下).
这是一个正确使用的图片元素的例子.此示例来自Mozilla Developer's Network.
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
该src属性应该总是被包括在内,即使你用srcset另外的属性.
该srcset属性(根据我的理解)是一种定义不同分辨率源的"较旧"技术.它不使用标准语法媒体查询或使用<picture>和<source>元素提供的其他灵活性(虽然CSS-tricks的Chris Coyier在这里不同意我的观点),但可能会受到一些不支持新标准的浏览器的支持.srcset在您的<img>标记中包含该属性可能是可取的,但是,在这些情况下,您仍然需要包含该src属性(当没有任何srcset文件适合时,它提供默认值,并为不具有该属性的浏览器提供后备支持srcset).所有图像标签始终需要src和alt属性 - 这些是<img>标签的必需属性.
<picture>标记的有效示例(包括srcset作为后退的src属性,以及作为最坏情况下降的属性)如下所示.
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" srcset="mdn-logo.png 2x" alt="MDN">
</picture>
这篇Smashing Magazine文章对不同的响应式图像技术以及何时使用每种技术进行了更深入的分析.
旁白:请不要相信W3Schools是官方消息来源.W3Schools选择了一个类似于W3C(万维网联盟)的名称,但实际上它们并不与官方标准组织相关.从他们的关于页面:"该网站的名称来自万维网(W3),但不隶属于W3C."