area标签coords属性需按shape类型严格匹配：矩形为x1,y1,x2,y2，圆形为cx,cy,r，多边形为x1,y1,x2,y2,...；坐标系以原图左上角为原点，与CSS缩放无关。
area 标签的 coords 属性怎么填才对应真实座位位置
坐标必须按 shape 类型严格匹配：矩形用 coords="x1,y1,x2,y2"（左上→右下），圆形用 coords="cx,cy,r"，多边形用 coords="x1,y1,x2,y2,x3,y3,..."。常见错误是把像素坐标和 DOM 布局坐标混用——area 的坐标系原点在图像左上角，且只认 img 的原始尺寸，跟 CSS 缩放、width/height 属性无关。
实操建议：
- 先用
img原图尺寸（如 800×600）做底图，在图上标出每个座位的精确像素范围 - 导出时禁用响应式缩放，或用 JavaScript 动态重算坐标（监听
window.resize+ 比例换算） - 用浏览器开发者工具的「元素选择器」悬停
area，看高亮区域是否贴合座位轮廓；不贴合基本就是坐标没对齐原图分辨率
map 和 area 如何绑定到可点击的座位图
关键在 map 的 name 和 img 的 usemap 必须完全一致，且 usemap 值要带 # 前缀。例如：<img src="seats.png" usemap="#seatmap"> 对应 <map name="seatmap">。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
-
usemap写成useMap（大小写敏感，HTML 中全小写） -
map放在body外或被其他标签包裹（必须同级或在img后就近放置） - 多个座位共用一个
area（不行，每个座位必须独立area，否则点击无法区分） - 没加
alt或aria-label，导致屏幕阅读器无法识别座位号
点击 area 后怎么拿到具体是哪个座位
不能靠 event.target 直接读属性，因为 area 不触发默认事件冒泡到 img。正确做法是给每个 area 绑定 click 事件，用 dataset 存座位标识：
<area shape="rect" coords="120,80,160,110" data-seat-id="A3" data-status="available">
JS 中这样取值：
document.querySelectorAll('area').forEach(area => {
area.addEventListener('click', e => {
const seatId = e.target.dataset.seatId; // → "A3"
const status = e.target.dataset.status; // → "available"
});
});
注意：area 默认不可聚焦，若需键盘操作（Tab 切换），得加 tabindex="0" 并手动处理 Enter 键事件。
响应式页面里 area 坐标失效怎么办
area 的坐标天生不响应式——这是 HTML 规范限制，不是 bug。强行用 CSS 缩放 img 会导致点击热区偏移。
可行方案只有两个：
- 服务端返回多套不同分辨率的座位图 + 对应 coords 数据（适合固定几档尺寸）
- 用 SVG 替代
img+map：SVG 中的<rect>或<circle>天然支持百分比坐标和事件绑定，且能直接嵌入 DOM 参与 CSS 布局
如果必须用 area，就别用 width/height 缩放图片，改用 max-width: 100% + height: auto，再配合 JS 按比例重算所有 coords——但要注意，重算逻辑必须在图片加载完成（img.onload）后执行，否则宽高为 0。
真正麻烦的是移动端触摸精度：小座位在手机上容易点歪，这时得加最小点击区域（用 padding 包裹整个 map 容器），或改用 SVG + pointer-events: visiblePainted 控制命中区域。
