map、area、picture、source、figure、figcaption元素
map和area元素
首先用img加载一张图片，再img里用usemap和map相关联，然后map里指定是什么形状，然后跳转到什么网址，下面具体说下shape：
- 圆形：shape=circle，圆形的话提供圆心坐标和半径,
- 多边形：shape=poly，然后按顺时针方向提供坐标
- 矩形：shape=rect，需要提供左上角和右下角的坐标
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img src="img/b.png" alt="练习" usemap="#pra">
<map name="pra">
<area shape="circle" coords="100,100,100" alt="1" href="https://www.baidu.com" target="_blank">
<area shape="poly" coords="200,200,400,200,400,400,200,400,300,300" alt="2" href="https://www.bilibili.com" target="_blank">
<area shape="rect" coords="420,420,660,660",alt="3" href="https://www.tencent.com" target="blank">
</map>
</body>
</html>
picture元素和source元素
在picture里可以为一张照片配置多个source，
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<picture>
<source media="(min-width: 1024px)" srcset="img/a.png">
<source media="(min-width: 512px)" srcset="img/b.png">
<img src="img/c.png" alt="示例" style="width:auto;">
</picture>
</body>
</html>
figure和figcaption元素
将图片标记为插图，
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<figure>
<img src="img/a.png" alt="示例">
<figcaption>这是图片的标题</figcaption>
</figure>
</body>
</html>
