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. Lightoj 1082【RMQ】

    这里很low地写了个线段树... #include <bits/stdc++.h> using namespace std; typedef long long LL; const int ...

  2. 题解 P1162 【填涂颜色】

    看到题目规模是n(1≤n≤30)即最大规模为30*30 本蒟蒻有个奇妙的想法!! 核心思路:搜索地图内除开被1包围着的0,并标注为1(即不填色) !!!那么,我们可以从每一个边界点开始去搜索 话不多说 ...

  3. 要单独拿出来讲的a标签

    a标签的属性 href属性赐予a标签力量:href属性指定要通过a标签借助浏览器请求的资源,可以是图片.视屏.网站.音频等.不加herf属性的a标签就是一个没有任何特殊样式和功能的文本容器. targ ...

  4. mysql--浅谈查询1

    这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql5.6 系统环境:win 在谈查询之前,先说一个特别重要的概念 一定将列名看成变量,既然是变量就可以运算 一定将 ...

  5. 001-JDK安装

    1.确定JDK的具体版本号 [root@bogon ~]# rpm -qa | grep jdk java-1.7.0-openjdk-1.7.0.91-2.6.2.3.el7.x86_64 java ...

  6. a标签中href=""的几种用法

    http://blog.csdn.net/u010297791/article/details/52784879 这是分页上的 <?php function pages($page,$e_pag ...

  7. 转 SecureCRT中文乱码解决方法

    1. 打开对话窗口,在工具栏中点开“选项”,选择“会话选项”.  2. 在打开的“会话选项”中,选择“外观”.  3. 在显示的“窗口和文本外观”中找到“字符编码”.  4. 把“字符编码”设置为“U ...

  8. python学习day11

    目录 SqlAlchemy 外键 SqlAlechemy SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象 ...

  9. java中 awt Graphics2D

    Graphics2D ,Graphics 类,提供了对几何形状.坐标转换.颜色管理和文本布局更为复杂的控制.它是用于在 Java(tm) 平台上呈现二维形状.文本和图像的基础类.验证码生成可以用到此类 ...

  10. Vue.js - Day5 - Webpack

    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...