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. SPOJ PHT【二分】+SPOJ INUM【最小/大值重复】

    BC 两道其实都是水 没有完整地想好直接就码出事情.wa了一次以后要找bug,找完要把思路理的非常清楚 SPOJ PHT[二分] #include<bits/stdc++.h> using ...

  2. HDU5894【组合数学】

    题意: 现在 m个考生人需要坐在有n个座位的圆桌上. 你需要安排位置,使得任意两个考生之间相距至少k个位置. 桌子有编号,考生a和b交换位置视作一种方案,问有多少方案,mod 1e9+7. (0 &l ...

  3. atcoder#073D(枚舉)

    題目鏈接: http://arc073.contest.atcoder.jp/tasks/arc073_b 題意: 給出n, m兩個數, n是物品數目, m是背包容量, 接下來n行輸入, wi, vi ...

  4. Ruby对象模型总结

    参考<Ruby元编程>,元编程,即 用来编写代码的代码 . 对象由一组实例变量和一个类的引用组成 对象的方法存在与对象所属的类中,类似js中的prototype,在ruby中准确的说,应该 ...

  5. js中 call() ，apply()，bing()方法三者的用法和区别

    面试中经常会被问到的,或者做笔试题的时候也会有这样的问题,所以今天专门对这个问题做个总结: 先看个例子: var age = '19' var myObj = { name:'小赖', myAge:t ...

  6. tagName

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. TYVJ 2032 搜索

    P2032 「Poetize9」升降梯上 描述 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨 ...

  8. Java内置锁和简单用法

    一.简单的锁知识 关于内置锁 Java具有通过synchronized关键字实现的内置锁,内置锁获得锁和释放锁是隐式的,进入synchronized修饰的代码就获得锁,走出相应的代码就释放锁. jav ...

  9. 用java自带jdk开发第一个java程序

    [学习笔记] 1.用java自带jdk开发第一个java程序:   下面要讲的eclipse要想正常工作,需要先学会配置这里的jdk.jdk要想正常工作,需先学会配置JAVA_HOME和ClassPa ...

  10. 【Linux】VirtualBox网络配置桥接模式

    VirtualBox网络配置桥接模式 CentOS/RHEL (虚拟机)配置 # 基于桥接模式设置固定 ip cat >> /etc/sysconfig/network-scripts/i ...