coords必须为偶数个整数，按顺时针或逆时针列顶点x,y坐标，原点在图片左上角(0,0)，单位像素；少于6个数字无效，缩放会导致坐标失效，推荐用SVG替代或JS动态重算。
coords 坐标必须是偶数个整数，顺序和原点不能错
多边形热区生效的前提是 coords 值合法：必须为偶数个整数，按顺时针或逆时针依次列出所有顶点的 x,y，比如 coords="60,40,120,30,110,90,60,80" 表示四个点。浏览器会自动首尾闭合，所以不要重复第一个点（如写成 "60,40,120,30,110,90,60,80,60,40" 可能触发解析异常）。
坐标原点固定在图片左上角 (0,0)，单位是像素 —— 这意味着只要图片被 CSS 缩放、transform: scale()、或容器尺寸变化，这些坐标就立刻失效，点击区域会偏移甚至完全错位。
- 少于 3 个点（即
coords不足 6 个数字）会被浏览器忽略，可能退化为矩形或直接不响应 - UI 给的标注图必须是原始尺寸截图，不是 Sketch/Figma 导出的 50% 缩放 PNG
- 别手算坐标：用 Image Map Generator 或 Photoshop 的“路径选择工具”导出，确保数值准确
poly 热区不支持 hover、z-index 和事件委托
本身不渲染任何 DOM 节点，也不支持 :hover 伪类，它只定义“哪里能点”，不提供“哪里看起来能点”。你看到的只是图片，热区是透明叠加的几何逻辑。
- 想实现悬停高亮，只能靠
title属性（最简），或额外加一层pointer-events: none的/覆盖层来绘制视觉反馈 - 没有
z-index，无法用 CSS 控制层级；不能加class，无法用 CSS 选中 - 无法对单个
直接绑定mouseenter，只能监听父容器的click，再通过event.target判断是否为某个
响应式适配只有两个现实路径：JS 动态缩放 or 改用 SVG
原生 没有响应式能力，coords 是死的像素值。硬要适配不同屏幕，只能二选一：
- 用 JS 在
load和resize时重算：img.naturalWidth/img.naturalHeight对比当前img.offsetWidth/img.offsetHeight，按比例缩放所有coords值，再写回area.coords - 彻底放弃
，改用内嵌:hover、fill、stroke、事件委托，坐标可用百分比或viewBox自适应 - 如果只是按钮级需求（非图像映射），优先考虑
clip-path: polygon()+pointer-events: auto，更轻量、易调试
area 的 shape="poly" 和 href/target 配合要点
的交互能力非常基础：每个 只能绑定一个 href，跳转行为由 target 控制（_self / _blank 等）。它不支持 AJAX、preventDefault、或自定义数据属性透传。
-
nohref已废弃，现代写法统一用href="#"+ JSclick监听 - 多个
共享同一个，usemap必须匹配，且建议同时写id="xxx"（兼容旧浏览器） -
alt属性不可省，影响可访问性（screen reader 会读出） - 若需区分不同区域逻辑，推荐在 JS 中用
data-id或data-type挂载标识，而非依赖href字符串解析
真正卡住人的从来不是怎么写标签，而是坐标准不准、缩放后点不中、hover 效果做不出来又不肯换方案 —— 这三件事不提前想清楚，上线后修图、调坐标、补 JS，时间全花在缝合上了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
