整 理：晋 哲 时 间：2017-02-23 说 明：介绍<picture>和<details>HTML5新标签的实用用法
一、响应式显示图像
在<picture>标签里会先识别<source>里的路径，当满足media条件时显示srcset里的图片，当不满足条件则显示<img>里的图片。
<picture>
<source srcset="images/pic2_1.png, images/pic2_2.png 2x"
media="(min-width: 200px) and (max-width:320px)">
<img src="images/pic1_1.png" srcset="images/pic1_2.png 2x, images/pic1_3.png 3x" />
</picture>
1、<source>元素用于创建可替换的图像文件；
2、media属性：用来包含想要展示的特性，比如视口的当前高度(viewport height)，宽度(width)，方向(orientation)等；
3、srcset属性：与相应的图像文件名相匹配，进行加载。如果需要提供不同的像素密度，可以添加多个的文件名到srcset属性中。
提示：可以放置多个<source>标签，以指定不同的图像文件名，进而根据不同的条件进行加载。
兼容性：
二、显示或隐藏下拉菜单
在<details>标签里会默认先隐藏<summary>标签以外的html内容，点击<summary>标签内容则显示出来，形成下拉效果。
<details>
<summary>Click me</summary>
<dl>
<dd>list1</dd>
<dd>list2</dd>
<dd>list3</dd>
</dl>
</details>
提示：请与<details>标签一起使用。<summary>标题是可见的，当用户点击标题时会显示出详细信息。
注释："summary"元素应该是"details"元素的第一个子元素。
兼容性：
