usemap与map的name必须逐字节匹配（含#、大小写、连字符），coords基于原始尺寸计算且需适配缩放，area须为map直接子元素并设有效href和alt，shape仅支持rect/circle/poly/default。
usemap 和 map name 必须逐字节匹配
楼层平面图热区失效，90% 是因为 usemap 和 <map name=""></map> 没对上。浏览器不报错，只让点击完全没反应。
-
usemap值必须带#，比如usemap="#floor-plan"；写成usemap="floor-plan"（漏#）就彻底断连 -
<map name="floor-plan"></map>的name必须和usemap后面的字符串**完全一致**：大小写、连字符、空格都不能差——usemap="#Floor-Plan"配<map name="floor-plan"></map>就是无效 - 别用
id代替name：<map id="floor-plan"></map>不会被识别，usemap只认name - 调试时直接在 Chrome 开发者工具里右键图片 → “检查”，看是否能高亮到对应
<map></map>；不能高亮，基本就是匹配失败
coords 坐标必须基于原始图片尺寸计算
你用 CSS 把一张 1200×800 的平面图缩成 375px 宽，coords="100,200,300,400" 依然指原始图上那块矩形——它在屏幕上实际只有约 31×67px，远低于触控最小推荐尺寸 44×44px，点不准是必然的。
-
shape="rect"要求coords="x1,y1,x2,y2"，且必须满足x1 < x2且y1 < y2；填反了会静默失效或区域错位 -
shape="poly"的坐标必须成对出现（总数为偶数），首尾点建议手动重复闭合，比如coords="10,20,100,20,100,80,10,80,10,20"；不闭合时部分浏览器（如 Safari）可能渲染异常 - 别信“自动适配”：HTML/CSS 没有原生机制让
coords随缩放自适应，硬写百分比或 vw/vh 是无效的 - 真要响应式，必须用 JS 动态重算：监听
window.resize和img.load，用img.naturalWidth / img.offsetWidth得缩放比，再遍历所有<area>更新coords
area 必须嵌套在 map 内，且 href 和 alt 不可省略
<area> 不是独立标签，脱离 <map></map> 就等于不存在。哪怕只多包一层 <div>，所有浏览器都会忽略它。
<ul>
<li>
<code><area> 必须是 <map></map> 的**直接子节点**，不能放在 <section></section>、<picture></picture> 或 Shadow DOM 里
href 必须是有效 URL：href="https://www.php.cn/link/3486f4031460180965996feb913fbb66" 或 href="javascript:void(0)" 都行；但 href="#" 或 href="#room-201" 在多数浏览器中会失效或触发页面跳动alt 是强制属性，不可为空字符串以外的缺失；写成 alt="卫生间" 比 alt="链接" 更有用，屏幕阅读器靠它传达语义poly 热区响应迟钝，建议每个热区物理像素 ≥ 44×44px，否则得加 touch-action: manipulation 优化shape 取值只能是 rect/circle/poly/default
写错 shape 值不会报错，但热区会静默退化为 rect 或直接不响应。
立即学习“前端免费学习笔记（深入）”；
- 合法值仅四个：
rect、circle、poly、default；rectangle、oval、polygon、triangle全部非法 -
shape="default"会捕获所有未被其他<area>覆盖的点击，容易干扰调试，上线前建议删掉 - 多边形顶点顺序影响渲染：交叉或自相交的
poly（比如“8”字形）在 IE/旧 Edge 中可能完全不显示，Chrome 行为也不可靠，务必用顺时针/逆时针单向闭合 - 坐标获取别靠肉眼估：用 Figma 导出坐标时检查是否含多余空格或换行；用浏览器开发者工具临时加
style="outline: 2px solid red"到<img alt="HTML area标签制作楼层平面图热点的方法" >上，再用“Toggle element screenshot”功能比对位置
