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. iTween基础之iTweenPath浅析(自定义路径移动)

    http://www.2cto.com/kf/201604/498023.html 在游戏开发中经常会用到让一个游戏对象按照指定的路线移动,iTweenPath就提供了可视化的编辑路径功能. iTwe ...

  2. String.Format 大全

    0.0的格式化 string.Format("{0:8D8}", 3)//第一个8表示空8个位置,后一个8表示用0填写最多8位数据 1.格式化货币(跟系统的环境有关,中文系统默认格 ...

  3. RPC跟MQ之间的差异比较

    在阿里的平台技术部参与开发了Dubbo(远程调用服务)和Napoli(消息解决方案),又给网站应用支持这2个产品很长一段时间,了解了这2个产品的实现及应用对这两个产品的用法. 大部分情况下,“给定场景 ...

  4. 解决tomcat一闪而过（转）

    转自 http://blog.csdn.net/znn626/article/details/7893555 遇到很多次运行startup.bat后,一个窗口一闪而过的问题,但是从来没去纠正怎样修改配 ...

  5. Windows下MySQL8.0.13解压版安装教程

    下载 MySQL8.0.13-64位下载地址 在下载页面的底部,有三种安装包,第一种是MySQL的安装程序,下载完点击安装即可. 第二种是普通的压缩版,体积较小. 第三种是自带debug和测试的压缩版 ...

  6. centos 7 安装node.js

    Node.js v10.x安装命令 curl --silent --location https://rpm.nodesource.com/setup_10.x | bash - Node.js v5 ...

  7. STP-3-收敛到新的STP拓扑

    事实上,即使拓扑已经稳定,STP也从未停止工作,对每个收到的BPDU,交换机都会重新计算自己对于根桥,RP,DP的选择.在稳定的拓扑中,交换机收到的BPDU不变,因此对这些BPDU的处理会一遍一遍产生 ...

  8. __slots__,__doc__,__module__,__class__.__call__

    __slots__ 1.__slots__是什么:是一个类变量,变量值可以是列表,元祖,或者可迭代对象,也可以是一个字符串(意味着所有实例只有一个数据属性)2.引子:使用点来访问属性本质就是在访问类或 ...

  9. Codeforces Round #541 (Div. 2) C.Birthday

    链接:https://codeforces.com/contest/1131/problem/C 题意: 求给的n个数,相邻差值最小的排列方式.1-n相邻. 思路: sort后隔一个取一个,取到底后再 ...

  10. 洛谷 P4092 [HEOI2016/TJOI2016]树 || bzoj4551

    https://www.lydsy.com/JudgeOnline/problem.php?id=4551 https://www.luogu.org/problemnew/show/P4092 这当 ...