area标签必须嵌套在map内并与usemap属性匹配的img配对才生效；usemap值须字节级一致（含#号），coords基于原图像素计算，shape需匹配坐标格式，href和alt为强制属性。
area 标签不是独立可用的标签，它必须嵌套在 <map> 内，且只有和带 usemap 的 <img> 正确配对后，点击区域才生效；90% 的“不响应点击”问题都出在关联失败或坐标错位。
usemap 和 map name 必须字节级一致
浏览器只认 usemap="#nav-map" 这种写法，usemap="nav-map"（缺 #）、usemap="#Nav-Map"（大小写/连字符不一致）都会断连。即使页面渲染看起来正常，实际热区完全无效。
-
<img src="logo.png" usemap="#product-section">→ 对应<map name="product-section"> - 推荐统一用小写字母 + 连字符命名，避免空格、下划线或中文
- 为兼容旧标准和 HTML5，可同时写
<map id="product-section" name="product-section"> - 检查是否关联成功：Chrome 中右键图片 → “检查”，看能否高亮到对应
<map>块；不能高亮 = 关联失败
shape 和 coords 必须严格匹配且按原图尺寸计算
coords 坐标永远基于原始图片像素尺寸，不是 CSS 缩放后的显示尺寸。一张 1200×800 的图用 width="600" 缩放后，coords="0,0,100,100" 仍指原始左上角 100×100 区域——现在它只占屏幕 50×50 像素，点起来必然偏移。
-
shape="rect"→coords="x1,y1,x2,y2"（左上、右下，4 个数字） -
shape="circle"→coords="x,y,radius"（圆心 x,y + 半径，3 个数字） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（至少 6 个数字，即 3 个顶点） - 坐标原点是图片左上角 (0,0)，单位是像素，不是百分比或 rem
href 和 alt 是强制属性，缺一不可
<area> 是空元素，但不是“随便写就能用”。没有 href，点击不会跳转；没有 alt，屏幕阅读器跳过该区域，Chrome 控制台报 warning，无障碍直接失效。
立即学习“前端免费学习笔记（深入）”；
-
href必须存在（哪怕只是href="#"或href="javascript:void(0)"），否则热区无交互行为 -
alt是必需属性，值要简明描述区域用途，如alt="返回首页"、alt="查看产品详情" - 若需 JS 绑定，建议仍保留
href，再用event.preventDefault()拦截，否则部分旧浏览器不触发 click 事件 -
target、rel等可选，但target="_blank"需搭配rel="noopener"防安全风险
真正容易被忽略的是坐标与缩放的脱节——很多人用截图工具量的是显示尺寸，填进 coords 就失效；还有人把 <area> 放在 <div> 里或 <head> 中，浏览器直接忽略。它只认一种结构：<img usemap> + <map name> + 直接子元素 <area>，中间不能插任何其他标签或注释。
