area标签无宽高概念，其点击区域由coords坐标决定：矩形为x1,y1,x2,y2，圆形为cx,cy,r，多边形由顶点坐标围成；响应式下需js按缩放比重算coords，否则错位；推荐用div+background-image替代以获css控制与无障碍支持。
可点击区域本身没有“宽度和高度”这个概念——area 标签是图像映射（map）里的坐标定义工具，它不渲染、不可见、不占布局空间。你真正能调的，是它在图片上覆盖的**坐标范围**，而这个范围最终决定用户点哪里会触发链接。
area 的 coords 值直接决定点击区域大小
area 的尺寸完全由 coords 属性控制，它不是 CSS 尺寸，而是像素坐标序列。浏览器按这些坐标画出矩形、圆形或多边形，再判断鼠标是否落在其中。
- 矩形（
shape="rect"）：写成coords="x1,y1,x2,y2"，左上角到右下角的像素距离就是实际宽高 - 圆形（
shape="circle"）：写成coords="cx,cy,r"，半径r决定直径，也就是“高度/宽度”都是2r - 多边形（
shape="poly"）：每两个数字是一组x,y，连起来形成封闭区域，包围盒（bounding box）宽高由最左/右、最上/下坐标差决定
响应式下 coords 会失效，必须动态重算
原生 area 不支持百分比（HTML5 已废弃 coords 的百分比语法），图片缩放后，固定像素坐标就错位了。常见现象是：PC 上点得准，手机上点偏、点不中。
- 不能靠
width: 100%+coords像素值混用——坐标不会跟着图片缩放自动换算 - 若图片用
max-width: 100%或vw/vh响应式缩放，必须用 JS 在 resize 时重新计算所有coords值 - 简单方案：记录原始图片尺寸（如
800×600），再按当前img.naturalWidth / img.clientWidth比例缩放每个坐标
替代方案：用 div + background-image 模拟 area
当需要真正可控的宽高、响应式、无障碍或复杂交互时，放弃 area 是更稳妥的选择。
- 把图片设为
div的background-image，再用子div绝对定位模拟热点区域，CSS 控制width/height/top/left - 每个热点加
role="link"和aria-label，确保屏幕阅读器可读 - 配合
pointer-events: auto和z-index避免遮挡，移动端注意touch-action: manipulation - 缺点是无法直接复用原图的
usemap，但换来的是完整 CSS 控制力和 JS 可编程性
最容易被忽略的一点：即使你用 JS 动态更新 coords，iOS Safari 对 area 的点击热区检测仍有延迟或偏差，尤其在快速缩放后；真要保点击精度，还是得切到 div 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
