图像(img)

图像是 HTML 文档中常用的元素，用于显示图片。要在 HTML 文档中添加图像，需要使用 <img> 标签。例如：

<img src="image.jpg" alt="这是一张图片">

其中，src="image.jpg" 表示图像文件的路径，alt="这是一张图片" 表示图像的替代文本，当图像无法显示时，会显示替代文本。

可以是静态图，也可以是gif动画图

如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片

图像的路径

图像文件的路径可以是相对路径或绝对路径。相对路径是相对于 HTML 文档所在的目录的路径，绝对路径是从根目录开始的完整路径。例如：

假设 HTML 文档所在的目录是 /home/front/html/，图像文件 image.jpg 位于 /home/front/html/images/ 目录下。

• 相对路径：images/image.jpg
• 绝对路径：/home/front/html/images/image.jpg

图像的尺寸

图像的尺寸可以通过 width 和 height 属性来设置。例如：

<img src="image.jpg" alt="这是一张图片" width="300" height="200">

如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。所以建议在添加图片时，同时指定图片的宽度和高度。

图像映射

图像映射是指在图像上添加可点击的区域，当用户点击这些区域时，会触发相应的事件。要创建图像映射，需要使用 <map> 标签和 <area> 标签。例如：

<img src="image.jpg" alt="这是一张图片" usemap="#image-map">
<map name="image-map">
  <area shape="rect" coords="0,0,100,100" href="https://www.baidu.com" alt="这是一个矩形区域">
</map>

其中：

• usemap="#image-map" 表示将图像映射应用到图像上，#image-map 是 <map> 标签的 name 属性值。
• <map> 标签定义了图像映射的区域，name="image-map" 是 <map> 标签的 name 属性值。
• <area> 标签定义了图像映射的区域，shape="rect" 表示区域是矩形，coords="0,0,100,100" 表示矩形的坐标为 (0,0) 到 (100,100)，href="https://www.baidu.com" 表示点击区域后跳转的 URL，alt="这是一个矩形区域" 表示区域的替代文本。

如何准确知道映射位置

要准确知道映射位置，需要先了解图像的尺寸。例如，图像的宽度是 300px，高度是 200px。

假设要在图像上添加一个矩形区域，该区域的坐标为 (100,100) 到 (200,200)，则需要将 coords 属性设置为 100,100,200,200。

注意：坐标值是相对于图像的左上角的。

添加其他形状的区域

除了矩形区域，还可以添加其他形状的区域，例如圆形、多边形等。要添加其他形状的区域，需要将 shape 属性设置为相应的值。例如，要添加一个圆形区域，需要将 shape 属性设置为 circle，并将 coords 属性设置为 x,y,radius，其中 x,y 是圆心的坐标，radius 是圆的半径。

<area shape="circle" coords="200,200,50" href="https://www.taobao.com" alt="这是一个圆形区域">

还有多边形区域，要添加一个多边形区域，需要将 shape 属性设置为 poly，并将 coords 属性设置为 x1,y1,x2,y2,...，其中 x1,y1 是多边形的第一个顶点的坐标，x2,y2 是多边形的第二个顶点的坐标，以此类推。

<area shape="poly" coords="100,100,200,100,200,200,100,200" href="https://www.taobao.com" alt="这是一个多边形区域">