HTML的<area>元素用于定义图像映射的可点击区域。在使用<area>元素时，shape属性是必须的，它用于指定可点击区域的形状。shape属性共有四种取值：default、rect、circle和poly。在本篇文章中，我们将详细介绍这四种形状的使用方法。
默认形状 - default
default是<area>元素的默认形状，它表示整个区域都是可点击的。这种形状通常用于不规则形状的图像映射，或者当区域没有特定的形状时使用。
<img src="image.jpg" usemap="#map"> <map name="map"> <area shape="default" coords="0,0,100,100" href="page.html"> </map>
在上面的示例中，<area>元素的形状被指定为default，并且通过coords属性定义了可点击区域的坐标范围。
矩形形状 - rect
rect形状用于定义矩形区域作为可点击区域。coords属性需要指定矩形的左上角和右下角的坐标。
<img src="image.jpg" usemap="#map"> <map name="map"> <area shape="rect" coords="0,0,100,100" href="page.html"> </map>
在上面的示例中，<area>元素的形状被指定为rect，并且通过coords属性定义了矩形的左上角和右下角的坐标。
圆形形状 - circle
circle形状用于定义圆形区域作为可点击区域。coords属性需要指定圆形的圆心坐标和半径。
<img src="image.jpg" usemap="#map"> <map name="map"> <area shape="circle" coords="50,50,50" href="page.html"> </map>
在上面的示例中，<area>元素的形状被指定为circle，并且通过coords属性定义了圆形的圆心坐标和半径。
多边形形状 - poly
poly形状用于定义多边形区域作为可点击区域。coords属性需要指定多边形的顶点坐标。
<img src="image.jpg" usemap="#map"> <map name="map"> <area shape="poly" coords="0,0,100,0,100,100,0,100" href="page.html"> </map>
在上面的示例中，<area>元素的形状被指定为poly，并且通过coords属性定义了多边形的顶点坐标。
通过以上的介绍，我们可以看到HTML <area>元素的shape属性可以帮助我们创建各种形状的可点击区域，从而实现更加灵活和复杂的图像映射效果。在实际开发中，根据需要选择合适的形状属性，并结合coords属性定义区域的坐标，可以实现更加丰富和交互性强的页面效果。