area标签shape属性合法值为rect、circle、poly、default，分别对应矩形、圆形、多边形和整个图像区域；其他值如triangle、oval等均不合法，浏览器会忽略或退化为rect行为。
RECT 值必须配合 X、Y、WIDTH、HEIGHT 四个属性才有效
单独把 SHAPE 设为 RECT 不会触发任何区域判定，浏览器或解析器会直接忽略该区域。真正起作用的是 X、Y（左上角坐标）、WIDTH 和 HEIGHT 这四个数值属性。它们共同构成一个轴对齐矩形。
常见错误是只写：
<AREA SHAPE="RECT" HREF="page.html">——这等同于没定义区域。
正确写法示例：
<AREA SHAPE="RECT" COORDS="10,20,110,120" HREF="page.html">或（若使用 X/Y/W/H 语义化写法，取决于具体平台）：
<AREA SHAPE="RECT" X="10" Y="20" WIDTH="100" HEIGHT="100" HREF="page.html">
COORDS 属性优先级高于 X/Y/W/H，且格式固定为“左,上,右,下”
在标准 HTML <map> + <area> 中，RECT 实际依赖 COORDS，而非独立的 X/Y 属性。COORDS 必须是四个以英文逗号分隔的整数，顺序是 left,top,right,bottom（不是宽高）。
-
COORDS="0,0,100,50"表示从 (0,0) 到 (100,50) 的矩形，宽=100，高=50 - 写成
COORDS="100,50,0,0"会导致区域无效（右小于左 / 下小于上） - 部分旧版工具或非标准渲染器可能接受
X/Y/WIDTH/HEIGHT，但这些不是 HTML 规范属性，浏览器不保证支持
注意坐标系原点和图像缩放带来的偏移
<AREA> 坐标始终基于原始图像像素尺寸，不是渲染后尺寸。如果 <img> 使用了 CSS width/height 缩放，或设置了 transform: scale()，COORDS 仍要按原图大小计算。
容易踩的坑：
- 用 Photoshop 量出 200×100 的区域，但图片被 HTML 设为
width="400"——此时COORDS要翻倍：比如原图中 (10,20,60,70) → 改为 (20,40,120,140) - 响应式页面中图片宽度随屏幕变化，静态
COORDS会错位；此时需用 JS 动态重算，或改用 SVG 热区 - 某些 CMS 或编辑器导出的
COORDS可能含小数或空格，如"10.5, 20 , 110.0 ,120"——多数浏览器会截断或报错，务必转为整数并去空格
SHAPE="RECT" 不区分大小写，但值只能是 RECT、CIRCLE、POLY 或默认（省略）
SHAPE 属性值不区分大小写，rect、Rect、RECT 效果一致。但它只接受这几种字面值，写成 "rectangle" 或 "box" 会被当作未知类型，退化为默认行为（通常等效于 POLY 且无坐标时完全失效）。
验证是否生效最简单的方法：
– 在浏览器中右键图片 → “检查元素”，确认 <area> 标签存在且 coords 属性可读
– 鼠标悬停区域，看状态栏是否显示 HREF 地址
– 点击后是否跳转（注意：部分浏览器需加 href 才激活热区）
COORDS 四值齐全、顺序正确、对应原图尺寸，SHAPE="RECT" 就能稳稳工作。其他所有“简化写法”或“扩展属性”都是非标准的幻觉。 
