问题描述
在HTML5中正式使用 < picture> 标记目前已被纳入给出了更深入的内容分析不同的响应图像技术以及何时使用每一种技术。
Aside：Please不要相信W3School作为官方来源。 W3School选择了一个与W3C（万维网联盟）类似的名称，但事实上它们并不与官方标准组织相关。从他们的页面：该网站的名称来自万维网（W3） ，但不隶属于W3C。
Is <PICTURE> officially in HTML5? I can't find it in w3schools.com.
Assuming it is official, is the source attribute of the fallback <img> element src or srcset. I am seeing some web sites using srcset and they don't work in any version of IE, but src works in IE.
Yes, the <picture> tag is an official part of the standard, but HTML5 is a living standard, and this tag is considered "experimental".
The <picture> tag is currently accepted into the WHATWG HTML5 Living Standard. That does not mean it is set in stone, and it is still considered an "experimental technology". You should not depend on browsers to support this technology. You can see an (unofficial) overview of browser support here.
As stated on the Mozilla Developer's Network:
The "living standard" model of standardizing HTML means that elements are accepted more easily but may not remain in the standard or may be changed if a good argument is made against their current use.
The <img> element must be included, and this has the side-effect of offering a fall-back option.
The picture element, by necessity, must have an <img> tag inside it, alongside the <source> elements. This has the side-effect of providing a fall-back option, but is also necessary to provide the base image and metadata (especially to provide the required alt attribute). The <source> elements merely override the src attribute of the <img> tag (under specified circumstances).
Here is an example of the picture element, used properly. This example comes from the Mozilla Developer's Network.
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>
The src attribute should always be included, even if you use the srcset attribute in addition.
The srcset attribute is (from what I understand) an "older" technique of defining sources for different resolutions. It does not use standard-syntax media queries or have the other flexibilities afforded by using the <picture> and <source> elements (although Chris Coyier of CSS-tricks disagrees with me here), but may be supported by some browsers which don't support the newer standard. Including the srcset attribute on your <img> tag might be desirable, but, in these cases, you still need to include the src attribute as well (which provides a default when none of the srcset files are appropriate, and provides a fall-back for browsers that don't support srcset). All image tags always need src and alt attribute -- these are required attributes for the <img> tag.
A valid example of the <picture> tag, including the srcset attribute as a fall-back, and the src attribute as a worst-case-scenario fall-back, is below.
<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>
This Smashing Magazine article gives a much more in-depth analysis of the different responsive images techniques and when to use each one.
Aside: Please don't trust W3Schools as an official source. W3Schools chose a name that is similar to W3C (the World Wide Web Consortium), but they are not, in fact, related to the official standards body. From their about page: "The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C."
这篇关于< PICTURE>的备用图片>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！