area标签必须嵌套在map内，且img需用usemap="#xxx"关联map name="xxx"，三者缺一不可；shape和coords须严格匹配，href不支持纯#id跳转，移动端热区需适配物理尺寸。
area 标签必须嵌套在 map 里，且 img 要用 usemap 关联
单独写 <area> 不会生效——它不是独立可点击元素，而是图像映射（image map）的一部分。必须三者配合：<img usemap="#xxx"> → <map name="xxx"> → 若干个 <area>。
常见错误是：usemap 写成 usemap="xxx"（漏掉 #），或 <map name="abc"> 和 usemap="#ABC" 大小写不一致（name 属性大小写敏感）；也有人把 <area> 放到 <map> 外面，浏览器直接忽略。
-
usemap的值必须以#开头，且与<map name>完全一致（含大小写） -
<map>必须在<img>后出现（DOM 顺序不影响，但建议放附近，便于维护） - 每个
<area>必须有shape和coords，否则区域不可点
shape 和 coords 必须严格配对，格式错一个像素就偏移
坐标系原点在图片左上角（0,0），所有值都是原始图片像素单位，不随 CSS 缩放变化。你用 Photoshop 或 Figma 量出的坐标，如果图片被 width / height 缩放过，<area> 热区就会错位——这点极易被忽略。
-
shape="rect"：需 4 个值，coords="x1,y1,x2,y2"（左上 + 右下），顺序不能颠倒 -
shape="circle"：需 3 个值，coords="cx,cy,r"（圆心 x、y + 半径），r 不能为 0 -
shape="poly"：需偶数个值，coords="x1,y1,x2,y2,x3,y3,..."，顶点按顺时针或逆时针连成封闭多边形；导出后务必手动删掉空格和换行，Safari 会跳过带空格的coords -
shape="default"：覆盖未被其他<area>覆盖的剩余区域，无需coords
href 不能写 #id，否则点击无反应
很多人想点热区跳到本页某个锚点（比如 #contact），直接写 href="#contact" —— 这在绝大多数浏览器里不会触发滚动。W3C 规范明确要求 <area> 的 href 必须是有效 URL，纯片段标识符（fragment-only）不被支持。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
href="./page.html#contact"（相对路径+锚点）或href="https://example.com#faq" - 若坚持本页跳转，必须用
href="javascript:void(0)"配合 JS：onclick="document.getElementById('contact').scrollIntoView()" -
href=""、href="#"、href="#section"全部失效，不要试 - 记得加
alt属性——不仅是无障碍要求，Chrome 某些版本没alt会静默禁用该<area>
移动端热区太小会导致点不准
苹果 Human Interface Guidelines 和 Google Material Design 都规定：触控目标最小尺寸为 44×44px。但 <area> 坐标是按原始图尺寸写的，如果原始图宽高很大（比如 2000×1200），而你在手机上只显示 375×225，那按原始坐标生成的热区可能只有几像素宽——根本点不中。
- 最稳妥方案：改用 SVG，天然响应式，坐标自动缩放
- 若坚持用
<map>，需 JS 监听resize，根据img.naturalWidth / img.clientWidth动态重算coords - 测试时务必在真机上点，模拟器触摸精度高，容易掩盖问题
#id、以及移动端热区物理尺寸不足这三点。 
