📌  相关文章
📜  HTML picture标签

📅  最后修改于: 2020-11-04 00:48:26             🧑  作者: Mango

HTML标签

HTML标签用于响应式网页设计，我们需要根据其视口，高度，宽度，方向和像素密度加载不同的图像。

标签包含一个或多个元素和一个元素。

根据视口，将从不同的位置加载匹配的图像标签，如果没有来源包含匹配的图片，则默认图片出现在标签将显示在浏览器中。

此标记是HTML5中的新标记。

句法

以下是有关HTML的一些规范标签

Display Inline
Start tag/End tag Both Start and End tag
Usage Image

例




    Picture Tag
    



Example of picture tag


Resize the page to see the different versions of the images at different viewports, and as per viewport image will be automatically changed.


    
    
    default image

输出：

属性：

特定于标签的属性：

Attribute Value Description
media media_query It defines and accept any media query which can be defined in CSS.
srcsetHTML Tags List URL It defines the URL of the image which can be used for different situations. (Required)
type video/ogg
video/mp4
video/webM
audio/ogg
audio/mpeg		 It determines the MIME type
src URL It specifies the location of the image.

全局属性：

HTML标签支持HTML中的全局属性。

支持的浏览器

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
Yes No Yes Yes Yes