area标签shape="circle"必须严格使用coords="x,y,r"三元组顺序，x和y为圆心像素坐标，r为正整数半径，逗号分隔无空格，且需配合usemap与同名map标签才能生效。
area 标签的 shape="circle" 语法必须严格按顺序写坐标
HTML 中 <area> 的 shape="circle" 不是“圆心 + 半径”这种直觉写法，而是固定三元组：coords="x,y,r" —— 顺序错一个（比如写成 "r,x,y" 或漏逗号），热区就完全失效，且浏览器不报错，只默默忽略该区域。
常见错误现象：图片显示正常，但鼠标悬停无反应、点击没跳转；用开发者工具检查 <area> 元素，发现 coords 值被浏览器解析为空或截断。
-
x和y是圆心在图片中的像素坐标（从左上角 0,0 起算） -
r是半径，单位为像素，必须是正整数（0无效，1.5会被截断为1） - 所有值之间用英文逗号分隔，前后不能有空格（
"100, 50, 20"会失败，必须写"100,50,20"）
必须配合 usemap 属性和 map 标签才能生效
<area> 本身不渲染也不绑定任何行为，它只是地图数据。没有正确的 <map></map> 容器和 <img> 上的 usemap 指向，它就是一段被忽略的 HTML。
关键点：
-
<map></map>必须有name属性，例如<map name="spot-map"></map> -
<img>必须有usemap，且值为"#spot-map"（注意开头的#） -
<area>必须放在该<map></map>内部，不能放错位置或遗漏闭合
示例片段：
@@##@@ <map name="spot-map"><area shape="circle" coords="120,80,25" href="/kitchen" alt="厨房"></map>
圆形热区坐标容易因图片缩放失效
如果图片用了 CSS width/height 缩放，或者设置了 max-width: 100%，原始像素坐标就会错位 —— 浏览器仍按原图尺寸解析 coords，但用户看到的是拉伸/压缩后的图像。
解决路径只有两条：
- 禁用图片缩放：确保
<img src="plan.png" usemap="#spot-map" alt="布局图">的显示尺寸等于其固有尺寸（可通过img.naturalWidth/naturalHeight查看） - 改用 SVG 或 Canvas 实现响应式热区（
<area>本身不支持百分比或相对坐标）
没有中间方案。试图用 JS 动态重算 coords 在不同屏幕下极易出错，且移动端 DPR 会进一步干扰像素对齐。
area 的 href 和 target 在现代浏览器中受安全策略限制
当 <area> 的 href 指向外部域名，或 target="_blank" 时，部分浏览器（尤其 Chrome 88+）会阻止跳转，控制台报类似 Unsafe attempt to open a URL... 的警告。
这不是 bug，是主动防护。可行做法：
- 确保
href是同源路径（如/product/123），避免协议绝对地址（https://example.com/...） - 如需新窗口打开，显式添加
rel="noopener"：<area ... href="/page" target="_blank" rel="noopener"> - 不要依赖
onclick内联事件覆盖默认行为 ——<area>的事件冒泡和兼容性不如普通<a></a>可靠
热区逻辑越简单越稳定；一旦涉及跨域、动态生成或响应式适配，<area> 就不是最优解了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
