<area> 标签必须嵌套在 <map> 中并通过 usemap 关联图片才能生效，单独使用无效；其 coords 坐标无单位、顺序依赖 shape，响应式下易失效，推荐用 SVG 替代。
area 标签必须嵌套在
单独写 <area> 不会响应点击，浏览器直接忽略。它不是独立交互元素，而是地图坐标描述符，依赖 <map> 的上下文绑定。
常见错误是把 <area> 当成按钮或链接直接丢在页面任意位置，结果点击没反应、控制台也无报错——因为根本没被解析。
- 必须用
name属性给<map>命名，比如<map name="scenic-map"> - 对应图片要用
usemap指向该 name，写成<img src="map.jpg" usemap="#scenic-map">（注意：usemap值带#，而<map>的name不带） -
<map>可放在<img>前或后，但不能放在<picture>或<figure>内部（部分浏览器不识别）
coords 坐标格式容易写反或漏单位
coords 是纯数字列表，不带单位（px/%/em 等一概不写），顺序和 shape 强绑定，写错一个数就偏移整个区域。
比如杭州西湖断桥区域，想画个矩形：<area shape="rect" coords="120,80,240,160" href="#duanqiao">，四个值依次是「左、上、右、下」像素值（相对于图片左上角原点）。有人误写成「宽高」或「中心点+半径」，点击区域就完全错位。
立即学习“前端免费学习笔记（深入）”；
-
shape="circle"要三个数：cx,cy,r（圆心 x、y，半径），不是x,y,w,h -
shape="poly"是多边形，按顺时针或逆时针列顶点x1,y1,x2,y2,x3,y3,...，最后一点自动闭合，别多写或少写一对 - 坐标值建议用图像编辑工具（如 Photoshop 的信息面板、或在线 map 工具）直接拖选获取，手算极易出错
href 和 onclick 同时存在时行为不一致
<area> 支持 href 跳转，也支持 onclick 执行 JS，但两者混用有坑：Chrome/Firefox 中 onclick 会先触发，若函数返回 false 或调用 event.preventDefault()，则 href 不跳转；Safari 旧版本可能忽略 onclick 直接跳转。
- 推荐只用一种方式：纯导航用
href，需要传参或埋点就用onclick+event.preventDefault() - 如果要模拟「点击弹窗」，别写
href="javascript:void(0)"，直接用onclick="showInfo('leifengta')" -
target="_blank"在<area>上有效，但新窗口打开需用户主动触发（避免被浏览器拦截），不要依赖自动弹窗
响应式图片下 area 坐标会失效
当 <img> 设置了 width: 100% 或用 srcset 切换不同分辨率图片时，<area> 的 coords 仍按原始图片尺寸计算，导致点击区域漂移。
没有浏览器原生方案解决这个问题。硬编码像素坐标在缩放后必然失准，这是 <area> 的根本限制。
- 最简方案：禁用图片缩放，用固定宽高 +
max-width: 100%保比例，确保实际渲染尺寸与原始图一致 - 进阶方案：改用 SVG 替代 —— 把景点地图画成
<svg>，每个景点用<path>或<circle>，天然响应式，坐标随容器缩放 - 折中方案：用 JS 监听
resize，按图片当前offsetWidth / naturalWidth比例动态重算所有coords（适合少量区域）
真正做景点导览页时，<area> 只适合静态、固定尺寸的场景。一旦涉及适配，就得换技术栈，这点常被忽略。
