area标签仅定义图片热点区域，不裁剪图像；必须配合和usemap使用，coords基于原图尺寸计算，需js处理缩放，shape与coords须严格匹配，usemap与name必须字节级一致。
area 标签不能裁剪图片，它只定义可点击区域——这是最常被误解的一点。想用 area 实现“裁剪”效果，本质是误用了它的语义和能力。
area 标签的用途不是裁剪，而是热点映射
area 必须配合 <map></map> 和 <img usemap> 使用，作用是把一张图划分成多个可交互的逻辑区域。它不修改图片内容、不隐藏像素、不生成新图像，只是加了一层“坐标+行为”的绑定层。
- 常见错误现象：写完
<area shape="rect" coords="10,20,100,80">后发现图片没变样 → 正常，它本来就不改图 - 如果你需要视觉上“只显示某一块”，该用
clip-path、background-position + background-size或 SVG<clippath></clippath> - 如果你需要导出裁剪后的新图，必须用 Canvas 或服务端处理，
area不参与任何像素操作
coords 坐标永远基于原始图片尺寸计算
哪怕你用 CSS 把 <img> 缩放到 30%，coords 依然按原图宽高算。比如原图是 1200×800，你在缩放后的图上用取色工具量出某区域左上角是 (60,40)，那实际 coords 应该填 "60,40,160,140" —— 但这是错的，因为取色工具量的是屏幕像素，不是原始像素。
- 正确做法：用 Photoshop / GIMP 打开原图，用标尺工具直接读原始坐标；或导出原图尺寸的截图再量
- 动态缩放场景下，必须 JS 计算缩放比：假设
img.naturalWidth = 1200，img.clientWidth = 600，则缩放比为0.5，所有coords值都要除以 2 - 漏掉这步，90% 的热区会点偏，尤其在响应式布局里
shape 和 coords 必须严格配对，否则静默失效
浏览器对 area 的校验很宽松，错配不会报错，只会让区域不可点。比如 shape="circle" 却给了 4 个 coords，Chrome 会直接忽略这个 <area>。
-
shape="rect"→coords="x1,y1,x2,y2"（左上、右下，4 个数字） -
shape="circle"→coords="cx,cy,r"（3 个数字） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（必须偶数个，至少 6 个） - 多边形顶点顺序影响填充：顺时针/逆时针都行，但自相交（如五角星未闭合）会导致部分浏览器渲染异常
usemap 和 map name 必须字节级一致
关联失败是调试中最耗时间的环节。不是“差不多就行”，而是大小写、连字符、空格、甚至不可见字符都必须完全匹配。
-
<img usemap="#product-map">必须对应<map name="product-map"></map>，写成usemap="#Product-Map"或name="product_map"都会断连 - 推荐统一用小写+短横线命名，避免意外；同时写
id和name提高兼容性：<map id="product-map" name="product-map"></map> - 验证方法：Chrome 中右键图片 → “检查”，看是否能高亮到对应的
<map></map>；不能高亮，说明关联失败
真正容易被忽略的是：coords 没有单位、没有相对概念、不随 CSS 变化——它就是一串硬编码的原始像素值。一旦图片源变更（比如换图但没重测坐标），所有区域立即失效，且毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
