HTML5<picture>元素
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>元素的更多相关文章
- HTML5<article>元素
HTML5<article>元素用来定义页面文档的独立内容. 实例: <article class="pageArticle"> <h2>art ...
- HTML5 语义元素、迁移、样式指南和代码约定
语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...
- HTML5: HTML5 语义元素
ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...
- 详解HTML5中的<aside>元素与<article>元素
<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...
- HTML5结构元素
前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- article元素设计网络新闻展示
article元素用来表示文档.页面中独立的.完整的.可以独自被外部引用的内容.它可以是一篇文章博客或者报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件等.除了内容部分,一个article元素通常 ...
- HTML5部分元素
Document HTML4文档声明 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- HTML5语义元素总结
HTML5语义元素 语义=意义 语义元素=元素的意义 什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...
- HTML5一些元素的整理
address元素: 定义和用法 <address> 标签定义文档或文章的作者/拥有者的联系信息. 如果 <address> 元素位于 <body> 元素内,则它表 ...
随机推荐
- [Xcode 实际操作]八、网络与多线程-(24)社会化分享功能开发包的安装和配置:微信、QQ、微博
目录:[Swift]Xcode实际操作 本文将演示如何在开放平台注册应用,并获得相关的密钥信息,用于实现后面文章的微博分享功能. 一.新浪微博开放平台 [登录]->[微服务]->[粉丝服务 ...
- Html5shiv ---- 让IE低版本浏览器识别并支持HTML5标签
Html5shiv.js是针对IE浏览器的 javaScript 补丁,作用如题 该脚本的下载链接 使用使在head标签中使用script标签引用即可
- C# CSV文件的导入导出以及datatable转化csv
1.csv文件写入操作 首先,创建datatable对象: DataTable dt = new DataTable(); 添加列: dt.Columns.Add("name", ...
- java string(转)
初探Java字符串 优化变成了忧患:String.split引发的“内存泄露” String是java中的无处不在的类,使用也很简单.初学java,就已经有字符串是不可变的盖棺定论,解释通常是:它是f ...
- luoguP2408不同子串个数
传送门 可以知道每一个子串都是后缀的前缀,那么对于第\(i\)小的后缀的贡献就可以表示为n-sa[i]+1 然而会存在重复的子串,注意height数组的定义,对于sa[i-1]和sa[i],只有hei ...
- Curious Array Codeforces - 407C(高阶差分(?)) || sequence
https://codeforces.com/problemset/problem/407/C (自用,勿看) 手模一下找一找规律,可以发现,对于一个修改(l,r,k),相当于在[l,r]内各位分别加 ...
- Arch Linux 安装记(安装到移动硬盘)
一转眼传说中装起来难于上青天,用起来险如上刀梯(容易滚挂),绰号“洗发水”并被戏称为“邪教”的 Arch Linux 已经用了几个月.某些关于其安装难度和稳定性的传说实在太夸张了,反而觉得这才是适合懒 ...
- 2个sql 函数dbms_lob.substr 和 wm_concat
转自: http://blog.csdn.net/wenzhongyan/article/details/50315473 http://blog.csdn.net/ojerryzuo/article ...
- 539 Minimum Time Difference 最小时间差
给定一个 24 小时制(小时:分钟)的时间列表,找出列表中任意两个时间的最小时间差并已分钟数表示.示例 1:输入: ["23:59","00:00"]输出: 1 ...
- C/C++程序员应聘常见面试题深入剖析(1)
摘自:http://blog.csdn.net/zhoudengqing 1.引言 本文的写作目的并不在于提供C/C++程序员求职面试指导,而旨在从技术上分析面试题的内涵.文中的大多数面试题来自各大论 ...