一、HTML图像属性
在HTML中，可以使用<img>标签来插入图像。<img>标签是一个自闭合标签，不需要结束标签。它有以下常用属性：
1、src：指定图像的URL地址；
2、alt：指定图像的替代文本，当图像无法显示时，将显示这段文本；
3、width：指定图像的宽度；
4、height：指定图像的高度；
5、map：创建图像映射。
二、img属性
下面是一个示例，展示如何使用<img>标签插入一张图片，示例代码如下：
<img src="https://example.com/images/picture.jpg" alt="A beautiful picture" width="500" height="300">
在上面的示例中，我们使用了<img>标签来插入一张名为picture.jpg的图片。src属性指定了图片的URL地址，alt属性指定了图片的替代文本，width和height属性指定了图片的宽度和高度。
注意：<img>标签是一个自闭合标签，不需要结束标签。同时，应该确保src属性指定的URL地址是有效的，并且alt属性中的替代文本应该清晰、准确地描述图片的内容，以便于用户理解。另外，应该避免使用过大的图片，以免影响页面加载速度和用户体验。
三、Alt属性
alt属性是用来为图像定义一串可替换的文本，当浏览器无法加载图像时，将显示这个替代性的文本，以向用户提供有关图像内容的信息。
示例代码如下：
<img src="boat.gif" alt="Big Boat">
在这个示例中，alt属性的值为”Big Boat”，它是定义的替换文本。如果浏览器无法加载名为boat.gif的图像，将显示”Big Boat”作为替代文本。将替代文本属性添加到页面上的图像是一个良好的实践，因为它可以提供更好的信息展示，并对那些使用纯文本浏览器的用户非常有用。
四、图像边框
在<img>标签中可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。示例代码如下：
<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">
五、图像对齐
默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。示例代码如下：
<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">
六、图像映射
<map>是HTML中的一个元素，用于创建图像映射（image map）。图像映射允许用户将多个链接与图像的不同区域关联起来，从而实现对图像的更精细的交互。
要创建图像映射，需要使用<map>元素和其内部的<area>元素。<map>元素定义了图像映射的容器，而<area>元素定义了图像的特定区域以及与之关联的链接或其他交互行为。
以下是一个示例，展示了如何使用<map>和<area>创建图像映射：
<img src="worldmap.jpg" alt="World Map" usemap="#worldmap"> <map name="worldmap"> <area shape="rect" coords="0,0,100,100" href="https://www.example.com/1" rel="external nofollow" > <area shape="circle" coords="200,200,50" href="https://www.example.com/2" rel="external nofollow" > <area shape="poly" coords="300,100,400,200,300,300" href="https://www.example.com/3" rel="external nofollow" > </map>
在这个示例中，首先使用<img>标签来显示一个名为”worldmap.jpg”的世界地图图像，并为其设置了替代文本”World Map”，然后使用<map>元素创建了一个名为”worldmap”的图像映射容器。
在<map>元素内部使用了三个<area>元素来定义不同的图像区域，每个<area>元素都有一个shape属性来指定区域的形状，可以是矩形（”rect”）、圆形（”circle”）或多边形（”poly”）。coords属性用于指定区域的坐标，具体根据不同的形状而有所不同。最后，我们为每个<area>元素设置了一个href属性，指定与该区域关联的链接。
当用户点击图像上的不同区域时，浏览器会根据相应的<area>元素中的链接进行导航或执行其他交互行为。
