area标签必须写href才被浏览器识别为有效热区，即使仅作坐标标记；shape="default"可省略coords但需置于map末尾；alt为强制属性，coords须为无空格无小数的纯数字序列。
area 标签不写 href 就不是“可点击区域”
很多人想用 <area> 仅做坐标标记、不跳转也不绑事件，但这是行不通的。浏览器只把带 href 的 <area> 当作有效热区；没 href，它就彻底被忽略——即使你加了 onclick，旧版 IE 和部分 Safari 也不会触发，开发者工具里也看不到高亮。
实操建议：
- 必须写
href，哪怕只是占位：href="#"或href="javascript:void(0)" - 若真不需要跳转，用 JS 阻止默认行为：
onclick="event.preventDefault(); doSomething();" - 千万别省略
href只留alt和coords，那等于没写这个<area>
shape="default" 是唯一不依赖 coords 的写法
shape="default" 表示整个图像区域，此时 coords 属性可省略（也不应写）。它常被用来兜底：比如在 <map></map> 末尾放一个 <area shape="default" href="/404" alt="未命中区域">，捕获所有未被其他 <area> 覆盖的点击。
注意点：
-
shape="default"不参与坐标计算，也不受图片缩放影响 - 它必须是
<map></map>中最后一个<area>，否则可能遮挡后续区域（渲染顺序决定命中优先级） - 仍需保留
href和alt，否则无效
area 没有“非交互”模式，alt 是强制可访问入口
<area> 不存在“仅划分、不交互”的语义。只要它被浏览器识别，就默认可聚焦、可键盘操作、可被屏幕阅读器朗读。所以 alt 不是可选项，而是强制要求——没有 alt，WCAG 直接不通过，Chrome 控制台也会报 warning。
常见错误写法：
-
alt=""：等同于隐藏该区域，视障用户完全感知不到 -
alt="点击此处"：无上下文，违反无障碍原则 -
alt内容与href目标无关，比如链接到产品页却写alt="公司Logo"
正确做法是描述功能+目标，例如：alt="进入技术支持页面" 或 alt="查看上海仓库实时库存"。
coords 空字符串或格式错误 = 区域消失
coords 值必须是纯数字、逗号分隔、无空格、无单位、无小数。比如 coords="100,200,150,180" 合法，coords="100, 200, 150, 180"（含空格）或 coords="100.5,200"（含小数）都会导致整个 <area> 被浏览器丢弃。
特别容易被忽略的细节：
-
shape="poly"至少需要 6 个数字（3 个顶点），写成coords="10,20,30,40,50,60"即可，首尾点不用重复 -
shape="circle"必须是x,y,r三元组，coords="100,100,30"表示圆心 (100,100)、半径 30 像素 - 所有坐标都基于原图尺寸，不是 CSS 渲染尺寸——这点一旦忽略，测试时点不准根本查不到原因
实际项目里最麻烦的从来不是写错语法，而是把 <area> 当成 SVG 路径来用，指望它自动响应缩放或支持 hover 样式。它就是个静态坐标映射，要动态适配，只能靠 JS 重算 coords 或换用 <svg></svg>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
