网页中 area 标签的 shape 属性如何定义点击区域形状

shape 属性支持的三种形状类型

HTML 规范定义了三种形状类型，分别是矩形、圆形和多边形。矩形使用 rect 值，需要提供左上角和右下角的坐标。圆形使用 circle 值，需要提供圆心坐标和半径。多边形使用 poly 值，需要提供一系列顶点的坐标。这些值直接定义了图片上可点击的几何区域。

每种形状都有特定的坐标要求。矩形需要 x1,y1,x2,y2 四个数值。圆形需要 x,y,radius 三个数值。多边形需要 x1,y1,x2,y2...xn,yn 一系列数值。浏览器会根据这些坐标在图片上绘制对应的形状区域，用户点击这些区域即可触发链接。

coords 属性必须与 shape 属性配合使用，提供具体的坐标数值。对于矩形，数值是左上角和右下角的坐标。对于圆形，数值是圆心坐标和半径。对于多边形，数值是所有顶点的坐标。这些数值的单位是 CSS 像素。

如果 shape 设置为 default，则不能使用 coords 属性。default 表示图片中未被其他形状覆盖的整个区域。当使用多边形时，如果首尾坐标不重合，浏览器会自动连接首尾坐标以闭合多边形。

在 HTML 中，area 标签必须放在 map 标签内部。shape 属性定义形状，coords 属性定义坐标，href 属性定义链接目标。例如，设置一个圆形区域，需要指定圆心坐标和半径。设置一个多边形区域，需要列出所有顶点的坐标。

示例代码展示了如何设置不同形状。矩形区域使用 rect，圆形区域使用 circle，多边形区域使用 poly。每个区域都需要提供对应的坐标数值。这些设置决定了用户点击图片的哪个位置会跳转到指定的链接。

在浏览器中打开包含 area 标签的网页，将鼠标悬停在图片上。如果设置正确，鼠标指针会变成手型，并且只有指定的形状区域会响应点击。如果鼠标指针没有变化，说明形状或坐标设置有误，需要检查 shape 和 coords 属性的值。

使用浏览器的开发者工具检查元素。在开发者工具中，可以查看 area 标签的属性值是否正确。如果形状区域显示不正确，可能是坐标数值计算错误或单位设置不正确。确保所有数值都是数字，并且符合对应形状的格式要求。