HTML图像
一般我们用到的就是插入图片，将图片多为背景，再者将图片作为链接。涉及到的标签就是< img> 接下来我们就动手开始写一个HTML文件加深了解 首先我们用浏览器在网页上下载几张图片（放到和HTML文件一个文件夹中）供后面使用。
1.先设置一张图片为网页背景图片
在body属性中加入background属性添加背景图片
2.举例插入一张图片 写法如下
<img src="路径加文件名">
插入图片以后：
这时我们可以看出，字体和图片的低端是对其的，下面我们就来调整下对其方式
3.添加属性调整图片的对其方式
在< img>标签中加入align属性，调整对其。 相对习题的上下可以加的参数有 bottom、middle、top，默认就是我们刚看见的bottom 相对字体左右可加的参数有right，left默认为right
下面我们直接来比较下：
<html> <head> <title>image test</title> </head> <body background="./qwe.gif"> <p>let's have an example<img src="./julizi.png"></p> <p> align top<img src="./julizi.png" align="top" ></p> <p>align middle<img src="./julizi.png" align="middle"></p> <p>align left<img src="./julizi.png" align="left" ></p> </body> </html>
4.调整插入图片尺寸
大多数的尺寸都没有那么合适，直接插入以后会破换整体页面的效果。所以在插入图片时，很有必要控制其尺寸，这是很容易办到的，就孩子需要在< img>标签中加入width height 两个属性。 那我们顺势就控制下上面的那几副图吧
width="80" height="80"
（当然，我还调整了字体大小）
5.创建图像映射
在这之前我们动手试验过将图片作为链接来使用，触发链接的方式就是点击图片的任何地方都可以链接到跳转地址，有时我们需要实现，点击图片的不同地方跳转到不同的地方。意思就是，一张图片我们可以创建带有可供点击区域的图像地图，其中每个区域就是一个超链接。涉及到的标签就是< map>标签，用来指定图片,< area>用来指定超链接区域
<img src="xx.jpg" usemap="#mp"/> <map name="mp" id="mp"> <area> ... ... ... </area> </map>
这里以一张图片作为地图， 在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。
这是具体实现内容
<html> <head> <title>image test</title> </head> <body background="./qwe.gif"> <p>tap the li zi </p> <img src="./julizi.png" usemap="#lizi"/> <map name="lizi"> <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank" </map> </body> </html>
然后，当我们点击小松鼠举起的栗子，你就会看见跟多栗子
shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。
coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。
![Front-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Nullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB-Frontend-Tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Praktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
