图片元素
img元素（image），空元素
src属性
source，资源路径，《路径写法》
alt属性
当图片资源失效的时候，将使用该属性的文字替代图片
与a元素联用
让a元素成为img元素的父元素，点击图片即可跳转页面
<a href="https://www.xuanfengge.com/funny/html5/element/" target="_blank">
<img src="./HTML5元素周期表.png" title="HTML5元素周期表">
</a>
与map元素的联用
map元素：地图，有一个area子元素用于地图选点,选点时坐标系原点是图片左上角，x轴是从左到右，y轴是从上到下，具体数值需要自己根据图片量取。注：衡量坐标时，为了避免误差，需要使用专业的衡量工具。例如：ps，pxcook等。
img在与map元素联用时mao需要指定唯一name，img需要增加usemap属性（类似于超链接的锚点）
<!-- 与map元素的联用 -->
<img usemap="#yuanMap" src="./HTML5元素周期表.png">
<map name="yuanMap">
<!-- 圆形选点 -->
<area shape="circle" coords="344,275,30" href="https://juejin.cn/post/7010207051922014222" target="_blank">
<!-- 矩形选点 -->
<area shape="rect" coords="832,304,886,364" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" target="_blank">
<!-- 多边形选点 -->
<area shape="poly" coords="252,113,249,239,309,174" href="https://www.w3school.com.cn/html/index.asp" target="_blank">
</map>
与figure元素联用
figure元素：指代，定义，通常用于图片，图片标题，描述包裹起来
子元素：figcaption 图片标题
通常使用figure元素将元素内容语义化
例如：
<figure>
<img src="./HTML5元素周期表.png" alt="这是HTML5元素周期表" title="HTML5元素周期表">
<figcaption>
<h2>HTML5元素周期表</h2>
</figcaption>
<p>Periodic Table of the HTML5 Elements</p>
</figure>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片元素</title>
</head>
<body>
<!-- 与a元素的联用 -->
<a href="https://www.xuanfengge.com/funny/html5/element/" target="_blank"><img src="./HTML5元素周期表.png"></a>
<!-- 与map元素的联用 -->
<img usemap="#yuanMap" src="./HTML5元素周期表.png">
<map name="yuanMap">
<!-- 圆形选点 -->
<area shape="circle" coords="344,275,30" href="https://juejin.cn/post/7010207051922014222" target="_blank">
<!-- 矩形选点 -->
<area shape="rect" coords="832,304,886,364" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" target="_blank">
<!-- 多边形选点 -->
<area shape="poly" coords="252,113,249,239,309,174" href="https://www.w3school.com.cn/html/index.asp" target="_blank">
</map>
<!-- 与figure元素联用 -->
<figure>
<img src="./HTML5元素周期表.png" alt="这是HTML5元素周期表" title="HTML5元素周期表">
<figcaption>
<h2>HTML5元素周期表</h2>
</figcaption>
<p>Periodic Table of the HTML5 Elements</p>
</figure>
</body>
</html>
