area标签必须配合map和img使用，单独存在无效；需通过usemap="#name"绑定，coords为绝对像素值，不支持响应式，推荐SVG替代。
area 标签必须配合 map 和 img 才能工作
单独写 <area> 不会显示，也不会响应点击。它只是定义图像上的一个可点击区域，依赖 <map> 的 name 和 <img> 的 usemap 属性绑定。常见错误是只写了 <area> 却忘了 <map> 或漏掉 usemap="#xxx" 中的 # 符号。
正确结构示例：
<img src="china-map.png" usemap="#chinamap" alt="中国地图"> <map name="chinamap"> <area shape="poly" coords="120,80,135,75,140,90,..." href="#" data-province="广东"> <area shape="poly" coords="60,150,75,145,80,160,..." href="#" data-province="黑龙江"> </map>
省份坐标用 poly 形状最实用，但手动取点极容易出错
中国各省边界不规则，shape="rect" 或 "circle" 完全不适用；shape="poly" 是唯一可行选择，但需要一长串 x,y 坐标。直接用 Photoshop 或在线工具（如 ImageMap Generator）在图上描边导出，比手写靠谱得多。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
coords中坐标是相对于<img>左上角的像素值，图片缩放后坐标立即失效 - 导出的坐标末尾常带逗号或空格，粘贴前务必清理，否则
<area>会被浏览器忽略 - 相邻省份的坐标如果留白过大，会出现“点击无响应”的缝隙；过小则容易误触，建议描边时向外略扩 2–3 像素
点击事件不能只靠 href，要用 JavaScript 拦截并增强交互
href="#" 会导致页面跳到顶部，href="javascript:;" 又不利于可访问性。更稳妥的做法是：保留 href="javascript:void(0)"，同时用 JS 绑定 click 事件，并调用 event.preventDefault()。
实操建议：
- 给每个
<area>加统一 class（如class="province-area"），方便批量绑定 - 用
data-province存省名，避免从coords或文本里反推 - 别在
onclick属性里写逻辑，容易和后端模板冲突；改用document.querySelectorAll(".province-area").forEach(...)
简单示例：
document.querySelectorAll('.province-area').forEach(el => {
el.addEventListener('click', function(e) {
e.preventDefault();
console.log('点击了：', this.dataset.province);
});
});
响应式场景下 area 坐标完全失效，必须重算或换方案
这是最容易被忽略的一点：<area> 的 coords 是绝对像素值，图片用 width="100%" 或 CSS 缩放后，所有区域都会偏移甚至错位。原生 <map> 不支持响应式。
可行对策：
- 放弃响应式图片，固定
<img>宽高（如width="800" height="500"），用媒体查询在不同屏幕下切换整套 map + area - 改用 SVG 地图：每个
<path>天然支持缩放、事件和 CSS 样式，维护成本远低于手工 coord - 真要保 area，就得用 JS 在
resize时按比例重算所有coords——但坐标多、逻辑重，实际项目中极少有人这么做
如果你的地图需要适配移动端，SVG 几乎是唯一合理选择。area 标签只适合固定尺寸、静态展示的后台管理页或内网系统。
