area标签必须嵌套在map元素内才生效，单独使用无效；coords值顺序依shape类型而定，非固定“左上右下”；需JS补全交互反馈与响应式适配。
area 标签必须嵌套在 map 里，单独写无效
很多人把 area 当成独立可点击元素直接丢进 HTML，结果完全没反应——area 本身不渲染，也不响应事件，它只在配合 img 的 usemap 属性时才生效。正确结构是：map 元素定义热区集合，img 通过 usemap="#xxx" 关联它，area 必须作为 map 的子元素存在。
常见错误写法：<area shape="rect" coords="0,0,100,100" href="page.html">（孤立存在，无作用）
正确结构示例：
@@##@@ <map name="floor-map"><area shape="rect" coords="10,20,110,120" href="room-a.html" alt="A区"> <area shape="circle" coords="200,150,30" href="room-b.html" alt="B区"></map>
coords 值顺序和单位取决于 shape，不是固定“左上右下”
shape 决定了 coords 的含义和参数个数，硬记“x1,y1,x2,y2”会出错。浏览器按 shape 类型解析坐标，错一位就热区偏移或失效。
-
shape="rect"：coords="x1,y1,x2,y2"（左上 + 右下，注意是像素值，相对图片左上角） -
shape="circle"：coords="cx,cy,r"（圆心 x、y + 半径，不是直径） -
shape="poly"：coords="x1,y1,x2,y2,x3,y3,..."（至少三组点，首尾不自动闭合，但浏览器会自动连线闭合）
调试建议：先用开发者工具选中 area，看 computed styles 里的 coords 解析是否符合预期；或者临时加 style="outline: 2px solid red" 到关联的 img 上，配合截图工具比对坐标。
现代项目中 area 缺少交互反馈，需手动补 JS 逻辑
原生 area 只支持 href 跳转和 alt 提示，不支持 hover 效果、点击高亮、键盘焦点管理，也不触发 click 以外的事件（如 mouseenter）。如果要实现悬停变色、空格键激活、屏幕阅读器友好，必须靠 JS 补足。
关键注意事项：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
area元素默认不可聚焦，需加tabindex="0"才能键盘导航 -
mouseenter/mouseleave不冒泡到map，只能监听每个area自身 -
pointer-events: none在父容器上会屏蔽所有area交互，慎用 - 移动端 click 有 300ms 延迟，建议用
touchstart或click+fastclick库
简单高亮示例（CSS 配合 JS）：
<area shape="rect" coords="50,50,150,100" data-id="zone-1" href="#"><style>
area[data-id="zone-1"]:hover + img::before { content: "A区"; position: absolute; ... }
</style>
实际更推荐用 JS 动态添加 class 到 img 或 overlay 层。
响应式图片下 area 坐标会失效，没有自动缩放机制
area 的 coords 是绝对像素值，绑定的是原始图片尺寸。一旦 img 因 CSS（如 max-width: 100%）或 srcset 改变显示大小，热区就严重偏移——这是最常被忽略的兼容性陷阱。
可行方案只有两种：
- 放弃响应式，固定图片宽高，用媒体查询切换不同
map（维护成本高） - 用 JS 动态计算缩放比例，重写
coords（监听resize和load，取img.naturalWidth与img.clientWidth比值）
注意：img.width / img.height 属性返回的是 HTML 属性值，不是真实渲染尺寸；要用 getBoundingClientRect() 或 clientWidth 配合 naturalWidth 才可靠。
实际项目里，只要图片尺寸可能变化，area 就得配 JS 校准逻辑——纯 HTML 方案只适用于静态、定宽场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
