前面我们构建的网站都是纯文字的，但是网页中肯定不止有文字对吧，最常见的还有图片，如果我要在网页中插入一张图片，就需要使用 img 元素。
图片元素使用方法
图片元素就是 img 元素，使用方法非常简单，首先，img 元素是一个没有结束标记的空元素，其实在 2.第一个网页 这里见到过，这个元素非常常见，所以单独用一篇文档来写。
html
<img src="" alt="">img 常用的属性就这两个，一个 src，一个 alt
src 属性：我们显示图片肯定要给定一个图片的地址吧，比如我这个图片是我当前文件夹下的 bg.jpg，那我 src 的值就应该是 ./bg.jpg ，这里又用到我们在路径那儿的知识了。
alt 属性：我们知道，我们这个图片元素要像显示图片，它必须有一个路径对吧，但是路径未必是有效的，比如我写好了一个路径 ./bg.jpg，但是这个 bg.jpg 之后被不小心删了，这个路径就失效了，那这个路径失效的时候图片应该显示什么呢，其实应该啥也显示不出来，但是如果强行设置宽高，就会显示出这样一张图片：
相信这张图片读者也多多少少见过，但是这并不友好，我希望它哪怕图片资源失效了，起码给我显示一点文字稍微告诉我图片里是什么东西吧，这就是 alt 属性干的事。
alt 属性的值就是当图片失效的时候出现的文字提示内容，例如我将 alt 属性设置为 "这是一张图片"，那图片路径失效的时候就会长这样：
图片元素和其他元素的连用
和 a 元素连用
这是一种非常常见的使用方式，我们知道，a 元素就是一个链接，点击之后可以做一些事情，比如跳转网页，跳转到锚点，那图片元素呢又是一张图片，这就有意思了，如果我在 a 元素里面嵌套一个图片元素，那这个图片不就变成一个可以点的东西了吗，或者说这个图片不就可以变成一个链接了吗，这就是一种常见的实现方案，比如百度新闻的图片链接就是这么写的
当我们这样写了之后，图片本身变成了一个链接，我们可以再拓展一下思考，如果我把这个图片换成一个按钮样式的图片，那我其实就实现了一个可以点击的按钮。
和 map 元素连用
我们考虑这样一个场景，我假设我的图片是这个样子
现在我希望点击土星的区域跳转到土星，点击木星的区域跳转到木星，点击天王星的位置跳转到天王星，即点击指定位置跳转到指定页面，这个效果说实话如果不会 map 元素还真不好实现，可以考虑后面会学到的定位去做，但我们有了 map 元素就很容易实现了呀，我们来说一下 map 如何使用
map 是和 img 一起用的元素，map 元素有一个专用的子元素 area，这个 area 元素只能放在 map 里面
首先，介绍 map 元素，map 元素可以实现图片映射，也就是刚才我们说的那种效果，将图片的部分区域变成可点击的链接，那怎么变呢，首先，map 既然要让图片的部分区域变成可以点击的链接，那 map 元素肯定是需要和 img 元素建立链接的，这里建立的方式和锚点很像，如下所示
html
<img usemap="#bgMap" src="bg.jpg">
<map name="bgMap">我们在 map 上添加一个 name 属性，给他取一个名字，然后在要链接的 img 元素上添加一个 usemap 属性，属性值就是井号加上 map 的 name 即可，这样就建立了一个 img 和 map 的链接
我们建立了 map 和 img 的链接，接下来我们要在 img 的指定区域添加链接，就要写在 map 里面，在 map 里面使用 area 元素就可以给 img 指定区域添加链接，使用几个 area 就可以添加几个不同位置的链接，很显然，area 元素本质上就是一个超链接。
area 有很多属性，这里只介绍以下几个
- shape
- coords
- href
- target
- alt 首先，我相信很多属性我是不用详细介绍的，既然 area 是超链接，那 area 这五个属性中的 href，target，alt 都非常好理解，href 就是要跳转的超链接地址，target 就是打开方式，比如在新窗口打开，而 alt 则是当图片显示不出来的时候，这个区域应该显示什么文字。
接下来主要介绍 shape 和 coords，我们说过，area 是给指定区域添加上一个超链接，那 shape 和 coords 就应该把这个指定区域指定出来吧，从英文我们也能看出来，shape 指定的是形状类型，coords 指定的是坐标。
首先我们应该指定形状，也就是 shape 属性，在 area 中有三种形状，圆形，矩形，多边形，分别对应的属性值为 circle，rect，poly，比如我将 area 的 shape 属性设置为 circle，就说明这是一个圆形区域。
而设置好区域之后，我们就要来定义它的坐标，也就是位置，坐标通过 coords 参数来定义，很显然，坐标肯定不止一个参数，所以需要通过逗号隔开传递多个参数，不同的形状需要传入的参数格式是不一样的，如下所示
- circle: 横坐标, 纵坐标, 半径
- rect: 左上角横坐标，左上角纵坐标, 右下角横坐标, 右下角纵坐标
- poly: 点 1 横坐标, 点 1 纵坐标, 点 2 横坐标, 点 2 纵坐标....
我们用这个例子来说明：
html
<map name="infographic">
<area
shape="poly"
coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank"
alt="HTML" />
<area
shape="poly"
coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank"
alt="CSS" />
<area
shape="poly"
coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank"
alt="JavaScript" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />很显然，这里建立了一个图片和 map 的映射，map 中规定了三个区域，三个区域都是多边形，这三个区域分别链接到不同的地址，并且都用新标签页打开，以第三个区域为例，第三个区域的 coords 有六个八个参数，两个两个一队，表示了四个坐标，分别是 (130,147) (200,107) (130,4) (59,107)，这四个坐标构成了一个矩形，所以这个区域表示的就是这样一个矩形，点击这个矩形区域会跳转到 https://developer.mozilla.org/docs/Web/JavaScript 这个网址。
这个 map 元素看起来很牛逼，但实际上用的并不多，很多前端培训课都不一定会讲，但如果真的有这样的需求的话读者可以考虑这种方便的方式去实现。
计算机中的坐标
计算机的坐标和数学中的坐标不太一样，数学上的坐标轴一般是以中心点为原点，x 轴向右递增，y 轴向上递增，而计算机中一般则是以左上角为原点，x 轴正向为右，y 轴正向为下，如下图所示 
所以图片中的坐标也是以图片左上角为原点量出来的，量出来的方式可以直接使用截图工具，也可以用专业的图片处理软件，例如 Photoshop
和 figure 元素连用
有一些图片可能会附带一些附加信息，比如对这个图片的一些介绍，这些介绍信息我们一般写在 img 后面，但这样语义化并不好，因为对这张图片的介绍和图片本身应该是一个整体，我希望计算机能够知道这些东西就是对这个图片的介绍，这里就需要 figure 元素帮忙了。
html
<figure>
<img src="./bg.jpg">
<h2>这是一个图片</h2>
<p>这是一段介绍</p>
</figure>这样用 figure 元素将 img 和对其的介绍包裹起来，计算机就知道我后面的这些东西是对图片的一个描述。
figure 元素还有一个专用的子元素，叫做 figcaption 元素，这个 figcaption 元素是指这个图片的标题，比如上面的例子中的 h2 元素其实就是一个标题，所以我们就可以把这个 h2 中的内容放到 figcaption 里面去，如下
html
<figure>
<img src="./bg.jpg">
<figcaption><h2>这是一个图片</h2></figcaption>
<p>这是一段介绍</p>
</figure>这个 figure 元素和 figcaption 并不会对样式产生影响，只是语义化的问题，用这个元素可以有更好的语义化，这样搜索引擎和浏览器都知道你这个是什么东西。