area标签poly热区需显式闭合（首点重复）、coords为偶数个整数、无空格逗号分隔，usemap与map name必须逐字节匹配，缩放时须JS重算坐标，否则点击无效。
原生 <area> 标签不支持贝塞尔曲线、弧线或带内孔的复杂图形，只能用 shape="poly" 拼出近似轮廓——它本质是折线围成的多边形，顶点越多越接近真实形状，但代价是坐标维护成本陡增、移动端响应变慢。
poly coords 必须手动闭合且偶数个坐标点
浏览器不会自动把首尾点连起来，coords 值必须显式重复第一个点，否则区域不封闭，点击无效或行为不可靠（尤其 Safari 和旧 Edge）。坐标总数也必须是偶数，否则部分浏览器直接跳过该 <area>。
-
shape="poly"的coords是一串逗号分隔的数字，如"10,20,40,30,35,80,5,70,10,20"—— 最后10,20是为闭合而重复的起点 - 用图像工具（Figma/Photoshop）导出坐标后，务必检查是否含空格、换行或末尾多余逗号；
coords="10,20, 40,30"中的空格会导致解析失败 - 顶点顺序影响渲染：顺时针和逆时针都可，但交叉多边形（如“8”字形）在不同浏览器中填充结果不一致，应避免
usemap 与 map name 逐字节匹配失败最常见
热区静默失效，90% 是因为 usemap 和 <map name=""> 不匹配。这不是松散匹配，而是字符串完全相等：大小写、连字符、下划线、空格、#号一个都不能错。
- 正确：
<img usemap="#floor-plan">+<map name="floor-plan"> - 错误：
usemap="floor-plan"（漏 #）、usemap="#Floor-Plan"（大小写错）、<map id="floor-plan">（用 id 而非 name） - 调试技巧：Chrome 开发者工具中右键图片 → “检查”，看能否高亮到对应
<map>；不能高亮，基本就是匹配失败
响应式缩放下 coords 必须用 JS 动态重算
<area> 的 coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），CSS 缩放后热区会严重偏移。没有纯 HTML/CSS 解法。
立即学习“前端免费学习笔记（深入）”；
- 关键逻辑：缩放比 =
img.offsetWidth / img.naturalWidth（宽高比一致时可用宽度比，否则需分别计算） - 监听
img.onload和window.resize，遍历所有<area>，将每个coords字符串拆解、乘以比例、再拼回 - 示例片段：
function updateAreaCoords() {<br> const scale = img.offsetWidth / img.naturalWidth;<br> Array.from(map.querySelectorAll('area')).forEach(area => {<br> const coords = area.coords.split(',').map(n => Math.round(n * scale));<br> area.coords = coords.join(',');<br> });<br>} - 注意：移动端最小热区建议 ≥ 44×44px 物理像素，缩放后若某
<area>对应区域小于该值，iOS Safari 可能无响应
alt 和 href 是强制属性，缺一不可
<area> 不是装饰性标签，它是语义化可访问链接。缺失 alt 或 href 会导致热区被浏览器忽略，且不符合 WCAG 标准。
-
href必须是有效 URL：href="./room-201.html"或href="javascript:void(0)"都可以；但href="#"或href="#room201"在多数浏览器中会触发页面跳顶或失效 -
alt不可为空字符串；应描述区域用途，例如alt="点击进入主卧详情"，而非alt="链接" -
<area>必须是<map>的**直接子节点**；嵌套在<div>或<section>内，或放在<map>外，所有浏览器都会静默丢弃
真正麻烦的不是画多边形，而是让几百个坐标点在各种缩放、加载时机、设备像素比下始终对得准——这需要 JS 精确干预，而不是寄希望于浏览器自动适配。如果项目已重度响应式，优先考虑 SVG 替代方案。
