shape="poly"的coords必须为偶数个纯整数、逗号分隔、无空格无单位，顶点按顺时针或逆时针顺序排列并显式闭合首尾点，浏览器基于图片原始像素解析，不随CSS缩放自适应。
shape="poly" 的 coords 必须是偶数个整数，且顺序决定区域形状
不规则热区只能用 shape="poly"，它靠顶点坐标连成封闭区域；浏览器不会自动闭合，但多数会补线——别依赖，手动重复首尾点最稳。常见错误是导出坐标时多一个逗号、少一对数字，或把小数当整数填进去（比如 coords="120.5,90.2,150.8,85.1" 会被截断为 "120,90,150,85"，区域严重偏移）。
正确写法必须满足：
-
coords是纯数字、逗号分隔、无空格、无单位、无小数 - 总数量为偶数（每对
x,y构成一个顶点） - 推荐显式闭合：如三角形写成
"100,200,150,180,130,240,100,200"（首尾相同） - 顶点按顺时针或逆时针连续排列，避免自相交（否则 Chrome 可能填充异常，Safari 直接忽略）
usemap 和 map name 不匹配，热区就完全不响应
这是 90% 不规则热区失效的根源。usemap="#hotmap" 中的 #hotmap 必须和 <map name="hotmap"></map> 的 name 值**逐字符一致**：大小写、连字符、有无空格、是否带 # 全部算在内。
典型错误：
立即学习“前端免费学习笔记（深入）”；
-
usemap="hotmap"（漏#）→ 映射断开 -
<map id="hotmap"></map>（用了id）→ 浏览器只认name -
usemap="#HotMap"对应<map name="hotmap"></map>（大小写错）→ 静默失败
调试方法：右键图片 → “检查”，看能否高亮到对应 <map></map>；如果 DOM 里找不到或名字对不上，热区必然无效。
响应式图片下 coords 会严重偏移，不能靠 CSS 缩放解决
原生 <area> 的坐标永远绑定图片原始尺寸（img.naturalWidth/img.naturalHeight），不是渲染后宽高。只要图片用了 width: 100%、max-width 或 object-fit，热区立刻错位。
临时验证技巧：给 <img alt="HTML使用area标签创建不规则热区的方法" > 加 style="max-width:90%"，再用开发者工具的「截图测量」功能比对原始坐标与当前显示位置。
可靠解法只有两个：
- 用 JS 动态重算：监听
resize和load，按img.offsetWidth / img.naturalWidth得缩放比，遍历所有<area>并重设coords - 直接换
<svg></svg>：<path d="M100,200 L150,180 L130,240 Z"></path>天然适配缩放，无需手动计算
alt 属性不是可选的，而是强制要求且影响可访问性
没有 alt 的 <area> 在 WCAG 2.1 下不合规，屏幕阅读器无法识别该区域用途。它不是“备用文字”，而是语音导航时的唯一操作提示。
写法要点：
- 不可省略，也不可用
alt=""（除非区域纯装饰且无交互） - 避免“点击此处”“查看详情”等无意义文案
- 应描述区域语义，例如
alt="引擎盖区域，点击切换维修状态" -
title属性不可靠，部分浏览器不支持，aria-label会被忽略，别指望它们替代alt
真正容易被忽略的是：移动端热区物理尺寸低于 44×44px 时，iOS Safari 可能完全不触发点击——哪怕 coords 写对了、name 匹配了、alt 也写了，点不中就是点不中。
