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. 算法学习--Day9

    继上一次完成最小生成树后,这次我开始准备最短路径的程序. 最短路分为两种算法,第一个为Floyd算法,第二个为Dijkstra. 简单来说,Floyd是以点为参照对象,它使用三层循环求解当前图中所有点 ...

  2. HDU5971【瞎搞】

    题意:略(忙着准备文化课...明天期中考啊.... 思路: 正解就是染色,2-sat搞: AC代码(虽然是错误的...数据水(过踏马的也行啊,起码打脸他啊!) 4 3 1 0 1 2 2 3 3 4 ...

  3. E. Similarity of Subtrees【hash】

    题意: 给你一棵树,问你有多少个组合的相似: 相似是a结点的子树和b结点的子树的每一层的结点数相等: 思路: HASH来搞: 主要也没学过散列表,以及一个散列函数的构造: 其实看下面程序很简单,手跑案 ...

  4. unity3d读写txt

    http://www.cnblogs.com/sunet/p/3851353.html?utm_source=tuicool 记录一下昨天用到的技术点:基于android平台unity3d读写txt. ...

  5. AFN的使用

    http网络库是集XML解析,Json解析,网络图片下载,plist解析,数据流请求操作,上传,下载,缓存等网络众多功能于一身的强大的类库.最新版本支持session,xctool单元测试.网络获取数 ...

  6. Vuex目录结构推荐

    目录结构如下: - src - store // 在src目录下 新建一个store文件夹 - mutations.js // mutations - mutaions_types.js // mut ...

  7. Csc”任务不支持“SharedCompilationId”参数。请确认该参数存在于此任务中，并且是可设置的公共实例属性

    今天.NetCore2.1版本,建立Asp.net Core web应用程序项目时,报以下错误: 未能使用“Csc”任务的输入参数初始化该任务. “Csc”任务不支持“SharedCompilatio ...

  8. python文件实现增删改查操作

    # coding = utf-8 import os import json import re ''' 本程序旨在将练习基础知识部分,包括: 列表,元组,字典,文件,函数,字符串等知识 实现的功能: ...

  9. 利用Common-Fileupload上传文件图片

    一,介绍 common-fileupload是appache的开源组件,基于该组件可以轻松实现文件上传的功能,strust框架的文件上传功能也是基于该组件. 二,使用 1,导入两个jar包:commo ...

  10. jquery select 列表 ajax 动态获取数据 模糊查询 分页

    最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...