area 的 href 必须是有效 url，纯 #id 锚点无效，因浏览器将其拼接为完整 url 后不触发跳转；需用 js 拦截或合法 url；usemap 与 map name 必须逐字符匹配；shape 和 coords 格式严格；移动端需 ≥44×44px 并设 alt；推荐 svg 替代。
area 标签的 href 必须是有效 URL，纯 #id 锚点几乎必然失效 —— 这不是 bug，是规范限制。
为什么 href="#section" 在 <area> 里点不动
浏览器对 <area> 的 href 解析比 <a></a> 严格得多：#id 被当成相对路径拼接到当前 URL 后，结果变成类似 https://site.com/current-page.html#section，但该地址本身不触发页面内跳转逻辑。多数浏览器直接忽略或报 Failed to load resource（控制台可见）。javascript:void(0) 或 ./page.html#detail 才算合法值。
- 常见错误写法：
href="#contact"、href=""、href="#" - 真正有效的写法：
href="./index.html#contact"、href="https://example.com/about#team"、href="javascript:void(0)" - 若真要锚点跳转，必须用 JS 拦截：
onclick="document.getElementById('contact').scrollIntoView()"，同时href设为占位值（如javascript:void(0)）
usemap 和 <map name></map> 大小写与符号必须完全一致
<img usemap> 的值是以 # 开头的字符串，它必须和对应 <map></map> 的 name 属性**逐字符匹配**，包括大小写、连字符、下划线——任何差异都会导致整个热点区域失活。
- 正确：
<img usemap="#main-map">+<map name="main-map"></map> - 错误：
<img usemap="#Main-Map">（大小写错）、<img usemap="main-map">（漏#）、<img usemap="#main_map">（下划线 vs 短横） - 调试技巧：在控制台运行
document.querySelector('img[usemap]')和document.querySelector('map[name="..."]')，确认两者能被同时查到
shape 和 coords 的格式容错率极低
shape 只接受四个固定值：rect、circle、poly、default；拼错（如 rectangle、polygon、oval）会导致该 <area> 被静默忽略，且无控制台警告。
-
rect：必须且仅能有 4 个数字，格式为x1,y1,x2,y2（左上 + 右下），不能多也不能少 -
circle：必须且仅能有 3 个数字，格式为cx,cy,r（圆心 x、y + 半径） -
poly：坐标数必须为偶数，顶点按顺序列出，如x1,y1,x2,y2,x3,y3,x4,y4；中间不能有空格、换行或逗号后空格 - 所有坐标单位是像素，基于原图尺寸，不随
<img>的 CSS 缩放自适应
移动端和可访问性容易被忽略的关键点
在 iOS Safari 上，小于 44×44px 的 <area> 热区响应迟钝甚至不触发；而屏幕阅读器依赖 alt 属性读出区域用途 —— 缺失 alt 会让无障碍支持直接归零。
- 移动端补救：给
<img>加style="max-width:90%"，或用 JS 把小热区扩展成最小 44px 宽高 - 无障碍强制项：
<area>必须带alt，哪怕只是alt="产品详情"，不可省略 - 更稳妥替代方案：如果热区形状复杂或需响应式缩放，优先考虑 SVG
<path></path>+<a></a>，而非<map>/<area></map>
最常被卡住的地方不是写法，而是坐标系错觉：你量的是缩放后图片上的像素，但 coords 要填原图尺寸下的绝对坐标 —— 没有 JS 换算就直接上线，90% 的 poly 区域会在高清屏或缩放后偏移或消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
