HTML参考手册
标签 | Elements
picture
这是一个实验中的功能
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
HTML<picture>元素是一个容器，用来为其内部特定的<img>元素提供多样的<source>元素。浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。
内容类别 |
Flow content, phrasing content, embedded content |
|---|---|
允许的内容 |
零个或多个<source>元素，后跟一个<img>元素，可选地与脚本支持元素混合在一起。 |
标记遗漏 |
没有，起始和结束标签都是强制性的。 |
允许父级 |
任何允许嵌入内容的元素。 |
允许ARIA角色 |
没有 |
DOM界面 |
HTMLPictureElement |
属性
这个元素只包含全局属性。
示例1：使用该media属性
media属性允许你提供一个用于给用户代理作为选择<source>元素的依据的媒体查询。如果这个媒体查询匹配结果为false，那么这个<source>元素会被跳过。
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>示例2：使用该type属性
type属性允许你为<source>元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个<source>元素会被跳过。
<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>规范
Specification |
Status |
Comment |
|---|---|---|
WHATWG HTML Living StandardThe definition of '<picture>' in that specification. |
Living Standard |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
Basic support |
38 |
13 |
38 (38) |
No support |
25 |
9.1 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
Basic support |
38 |
(Yes) |
38.0 (38) |
No support |
25 |
iOS 9.3 |
标签 | Elements相关
超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
加载中,请稍侯......