area标签必须配合map和usemap使用，单独无效；usemap值需带#号引用map的name；coords应借助工具生成；shape仅支持rect/circle/poly/default；移动端需加touch-action和focus-visible优化。
area 标签必须配合 map 和 usemap 才能生效
单独写 <area> 标签不会产生任何点击效果，浏览器根本不识别它。必须用 name 属性给 <map></map> 命名，再在 <img alt="用HTML区域映射制作校园地图" > 上通过 usemap 属性引用（注意前面要加 #）。
常见错误是漏掉 #，比如写成 usemap="campus-map"，结果整个区域映射完全失效，控制台也不报错，排查起来特别隐蔽。
正确写法示例：
<img src="campus.png" alt="校园平面图" usemap="#campus-map"> <map name="campus-map"> <area shape="rect" coords="120,80,220,150" href="library.html" alt="图书馆"> <area shape="circle" coords="400,300,60" href="admin-building.html" alt="行政楼"> </map>
coords 坐标值容易对不准，建议用工具辅助生成
手动数像素写 coords 几乎不可行：图片缩放、设备 DPR、CSS 覆盖都会让坐标偏移。直接在浏览器里用开发者工具选中图片，拖动测量，数值误差常超过 20px。
立即学习“前端免费学习笔记（深入）”；
更可靠的做法是：
- 保持图片原始尺寸加载（不设
width/heightCSS 或内联属性） - 用在线工具如 Image Map Generator 上传图后画区域，它会输出准确的
coords - 若需响应式，改用 SVG 替代
<map></map>—— SVG 原生支持百分比和视口单位，坐标自动适配
shape 取值只有 rect/circle/poly/defaults，没有 ellipse 或 roundedrect
shape 属性只接受四个固定值：rect（矩形）、circle（圆）、poly（多边形）、default（整个区域）。别指望用 ellipse 画椭圆，也不支持圆角矩形。
实际使用中要注意：
-
rect：coords="x1,y1,x2,y2"，左上→右下，顺序不能反 -
circle：coords="cx,cy,r"，半径是像素值，不是百分比 -
poly：coords="x1,y1,x2,y2,x3,y3,..."，至少 3 组点，首尾不自动闭合，但浏览器会自动连线收口
如果建筑轮廓复杂（比如带弧形外墙的教学楼），poly 是唯一选择，但点越多，手写越容易出错，务必复制粘贴，别手敲。
移动端点击热区小，必须加 touch-action 和 focus-visible 优化
默认 <area> 在手机上点击反馈弱，手指稍偏就点空，用户根本不知道哪里可点。这不是 bug，是规范本身没定义触摸行为。
补救方式有限但有效：
- 给包裹
<img alt="用HTML区域映射制作校园地图" >的容器加style="max-width:90%"，减少点击延迟 - 为提升可发现性，用 CSS 配合
<map></map>外部的伪元素或透明 overlay 层（需额外 JS 监听 click 并模拟跳转） - 避免依赖
:hover做高亮——移动端没 hover，改用:focus-visible+tabindex支持键盘导航
真正难处理的是斜坡、连廊、空中通道这类非正交结构——它们在二维平面图上投影变形严重，靠 <area> 无法精确覆盖，这时候该考虑切片地图或 Leaflet 集成，而不是硬调 coords。
