area标签需配合map和usemap才能生效，仅定义坐标而非独立可点击元素；coords基于原始图片像素，不随css缩放自适应，且alt为必填属性。
area 标签必须配合 map 和 usemap 才能生效
单独写 <area> 不会触发任何跳转，它只是「坐标定义」，不是独立可点击元素。浏览器只认得它属于某张图的某个区域，前提是这张图通过 usemap 指向了对应的 <map></map> 元素。
常见错误是把 <area> 直接丢在页面里，或者忘了给 <img> 加 usemap 属性（注意前面要加 #）：
@@##@@ <map name="floor-map"><area shape="rect" coords="10,10,100,80" href="/room-a"> <area shape="circle" coords="200,50,30" href="/room-b"></map>
coords 坐标系以图片左上角为原点，单位是像素
坐标值不是百分比，也不随缩放自适应。如果图片用 CSS 改了尺寸（比如 width: 100%），coords 仍按原始图片分辨率计算，点击区域会偏移甚至失效。
-
shape="rect"：需要 4 个值 ——x1,y1,x2,y2（左上、右下） -
shape="circle"：需要 3 个值 ——cx,cy,r（圆心 x、y，半径） -
shape="poly"：需要至少 6 个值，成对出现：x1,y1,x2,y2,x3,y3,...
调试建议：先用原始尺寸显示图片，用开发者工具测量真实像素位置，再填进 coords；上线后若需响应式，得用 JS 动态重算坐标或换 SVG 方案。
href 和 target 行为和普通链接一致，但不支持 download
<area> 的 href 能跳转、能带查询参数、能用锚点，target="_blank" 也管用。但它不支持 download 属性 —— 点击不会触发下载，哪怕 href 指向一个 PDF 或 ZIP。
另外注意两点：
- 没有
href的<area>默认不可点击（不像<a></a>至少有 cursor 变化） -
alt是必填属性，否则无障碍阅读器无法识别该区域用途，WCAG 也会报错
移动端点击热区小、易误触，必须加 cursor: pointer 和足够 padding
默认情况下，<area> 在手机上没有视觉反馈，用户根本不知道哪里能点。光靠 href 不够，得手动增强交互提示：
在 CSS 中加上：
img[usemap] { cursor: pointer; }
/* 注意：area 本身不能直接设 cursor，只能作用于 img */
如果某个区域太小（比如直径 10px 的按钮图标），手指点不准。解决办法只有两个：要么扩大 coords 范围，要么换 SVG + <use></use> 或 Canvas 实现，后者能做更精细的触摸适配。
真正难的不是写对标签，而是让坐标始终对得上图片渲染后的实际位置 —— 尤其当图片被 CMS 裁剪、CDN 加水印、或前端用 object-fit 调整时，coords 就彻底失准了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
