usemap属性必须以#开头，如usemap="#mymap"；map需同时设name和id；coords为绝对像素值；area必需alt、shape、coords；响应式下坐标失准，推荐svg替代。
usemap 属性为什么总不生效？
根本原因是值没加 # 号，浏览器只认带井号的引用。写成 usemap="myMap" 就完全失效，必须是 usemap="#myMap"。
<map></map> 标签必须同时设 name 和 id（HTML5 要求），否则旧版 Safari 或 IE 兼容模式可能不识别；name 是唯一匹配依据，id 是辅助定位用的，不能只写 id。
-
<img>的usemap必须以#开头，且大小写、空格、连字符都需与<map name="..."></map>严格一致 - 如果图片是通过 CSS 控制尺寸（比如
max-width: 100%），但没设原始width/height属性，坐标系可能错乱 - 动态插入的
<img>或<map></map>，必须确保 DOM 插入顺序正确：先有<map></map>，再有引用它的<img>
coords 坐标怎么填才不偏移？
所有 coords 都是绝对像素值，原点在图片左上角（0,0），X 向右、Y 向下递增——这点和 CSS 的 top/left 一致，但和数学坐标系相反。
别抄图像编辑器里“百分比坐标”，HTML5 已废弃百分比支持，只认整数像素。
- 矩形
rect：按顺序填left,top,right,bottom，如coords="50,30,180,120" - 圆形
circle：center_x,center_y,radius，如coords="100,80,30" - 多边形
poly：每对x,y连续写，如coords="60,40,120,30,110,90,60,80"
area 标签必须配哪些属性？
alt 不是可选项，是语义必需项。没有它，屏幕阅读器无法识别该区域用途，无障碍访问直接失败。例如 alt="点击进入华东地区详情"。
title 虽非强制，但缺了就没了悬停提示，用户不知道点这里干啥；target="_blank" 必须搭配 rel="noopener"，否则有安全风险。
-
<area>必须嵌套在<map></map>内，单独写在外面会被浏览器忽略 - 每个
<area>必须有shape和coords，哪怕shape="default"也要显式声明 - 不要依赖
href的默认行为来“测试是否生效”——先确认alt和坐标都对，再加链接逻辑
响应式页面里 area 总是点不准怎么办？
这不是 bug，是设计限制：<area> 坐标系固定，图片缩放后视觉位置变了，但热区坐标没变。纯 HTML map/area 在响应式场景下天生不可靠。
移动端适配失败率极高，尤其 iOS Safari 对缩放后坐标映射的支持极不稳定。
- 优先用 SVG 替代：SVG 支持百分比坐标、缩放自适应、事件委托更可控
- 次选用 CSS
position: absolute叠加伪热区（配合pointer-events） - 实在要用
map，至少给图片加max-width: 100%和height: auto，并在主流设备上实测真实像素尺寸
坐标系固定、引用符号不能省、alt 不可省略、响应式场景下它天生不可靠——这些不是边缘情况，是每天都会撞上的硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
