HTML picture元素如何定义

HTML picture元素如何定义

这篇“HTML picture元素如何定义”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML picture元素如何定义”文章吧。

HTML<picture>元素

HTML picture元素如何定义

实例

根据屏幕匹配的不同尺寸显示不同图片,如果没有匹配到或浏览器不支持picture属性则使用img元素:

<picture>

<source media="(min-width: 650px)" srcset="demo1.jpg">

<source media="(min-width: 465px)" srcset="demo2.jpg">

<img src="img_girl.jpg">

</picture>

定义

picture元素允许我们在不同的设备上显示不同的图片,一般用于响应式。

HTML5引入了<picture>元素,该元素可以让图片资源的调整更加灵活。

<picture>元素零或多个<source>元素和一个<img>元素,每个<source>元素匹配不同的设备并引用不同的图像源,如果没有匹配的,就选择<img>元素的src属性中的url。

注意:<img>元素是放在最后一个<picture>元素之后,如果浏览器不支持该属性则显示<img>元素的的图片。

HTML4.01与HTML5之间的差异

<picture>属性是HTML5新定义的。

全局属性

<picture>标签支持HTML的全局属性。

事件属性

<picture>标签支持HTML的事件属性。

以上就是关于“HTML picture元素如何定义”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注恰卡编程网行业资讯频道。

发布于 2022-03-18 22:49:15
收藏
分享
海报
0 条评论
33
上一篇:jQuery如何创建DOM元素 下一篇:在html5中怎么才可以禁止手机虚拟键盘弹出
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码