HTML5<picture>元素可以设置多张图片

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
</head>
<body>
<picture>
<source srcset="Images/HTML5LOGO.jpg" media="max-width:400px" />//小屏幕显示的图片
<source srcset="Images/HTML5LOGO.jpg" />//大屏幕显示的图片
<img src="Images/HTML5LOGO.jpg" alt="logo5" />//不支持picture元素的图片
</picture>
</body>
</html>

srcset 属性的必须的，定义了图片资源。

media 属性是可选的，可以在媒体查询的 CSS @media 规则 查看详情。

对于不支持 <picture> 元素的浏览器你也可以定义 <img> 元素来替代。

HTML5<picture>元素的更多相关文章

  1. HTML5<article>元素

    HTML5<article>元素用来定义页面文档的独立内容. 实例: <article class="pageArticle"> <h2>art ...

  2. HTML5 语义元素、迁移、样式指南和代码约定

    语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...

  3. HTML5: HTML5 语义元素

    ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...

  4. 详解HTML5中的<aside>元素与<article>元素

    <aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...

  5. HTML5结构元素

    前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...

  6. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  7. article元素设计网络新闻展示

    article元素用来表示文档.页面中独立的.完整的.可以独自被外部引用的内容.它可以是一篇文章博客或者报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件等.除了内容部分,一个article元素通常 ...

  8. HTML5部分元素

    Document HTML4文档声明 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  9. HTML5语义元素总结

    HTML5语义元素 语义=意义 语义元素=元素的意义   什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...

  10. HTML5一些元素的整理

    address元素: 定义和用法 <address> 标签定义文档或文章的作者/拥有者的联系信息. 如果 <address> 元素位于 <body> 元素内,则它表 ...

随机推荐

  1. C++构造函数和拷贝构造函数详解

    构造函数.析构函数与赋值函数是每个类最基本的函数.它们太普通以致让人容易麻痹大意,其实这些貌似简单的函数就象没有顶盖的下水道那样危险. 每个类只有一个析构函数和一个赋值函数,但可以有多个构造函数(包含 ...

  2. AtCoder Beginner Contest 087 D People on a Line(DFS)

    题意 给出n个点,m组关系L,R,D,L在R的左边距离D,判断是否存在n个人的位置满足m组关系 分析 Consider the following directed graph G: There ar ...

  3. 解决MySql报错：1130 - Host 'xxx' is not allowed to connect to this MySQL server的方法

    发现问题 使用Navicat连接MySql数据库时,未能成功,提示信息如下图: 这个错误提示已经很明确了,"不允许主机'desktop-teat9ob'连接到此mysql服务器", ...

  4. 常用HTTP协议响应码（转载）

    转载于: https://blog.csdn.net/github_36032947/article/details/78343734 HTTP响应码,也称http状态码(HTTP Status Co ...

  5. EasyUI datagrid 列宽度拖动问题

    问题:拖不动或者偶尔能拖动,拖动不按指定? 原因:列宽度绑定的时候使用的百分比; 方法:获取总宽度,经过百分比计算在绑定

  6. laravel之null替换空字符串中间件

    在laravel写接口的时候免不了数据库中保存null,可用诸如设置ORM的访问器或以下方法处理 $goods->name?$goods->name:''; 其实可以利用路由中间件,在需要 ...

  7. 洛谷P1896||bzoj1087 [SCOI2005]互不侵犯

    bzoj1087 洛谷P1896 想了很久,太久没做状压都已经不会了... 状压每一行就好了 #include<cstdio> #include<algorithm> #inc ...

  8. Azure service bus Topic基本用法

    我们在升级一个POS系统的时候,决定使用微软公有云计算平台下的Azure ServiceBus 进行POS客户端与服务器的交互. 本文主要时作者在学习使用 Azure SDK for .NET 操作由 ...

  9. 关于Chrome和Opera中draw Image（）方法无法在canvas画布中绘制图片的问题

    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=d ...

  10. Unity Shader入门精要学习笔记 - 第9章 更复杂的光照

    转载自 冯乐乐的<Unity Shader入门精要> Unity 的渲染路径 在Unity里,渲染路径决定了光照是如何应该到Unity Shader 中的.因此,如果要和光源打交道,我们需 ...