map和area必须配合img的usemap属性使用，usemap值须带#前缀以匹配map的name；area须嵌套于map内，coords为图片原始像素坐标，不支持百分比，缩放会导致热区偏移。
map 和 area 不是独立可用的标签，它们必须配合 img 的 usemap 属性才能生效。漏掉 # 前缀、name 不匹配、area 放在 map 外面——这三类错误占实际失效案例的 90% 以上。
usemap 的值为什么必须带 # 号
usemap 是一个片段标识符引用，本质和页面内锚点链接（如 <a href="#section1"></a>）同理。浏览器只认 usemap="#nav-map" 这种写法，对应 <map name="nav-map"></map>。写成 usemap="nav-map" 或 usemap="map/nav-map" 都会静默失败，图片热区完全不响应。
常见错误现象：
- 鼠标悬停无手型，点击无跳转
- 开发者工具里能看到
area元素，但getBoundingClientRect()返回空区域
area 必须严格嵌套在 map 内部，且 coords 坐标系以图片左上角为原点
area 标签没有视觉输出，它只是坐标描述器。所有 coords 值都是相对于原始图片像素坐标的绝对值，不是相对容器或视口的位置。如果图片被 CSS 缩放、拉伸或用 object-fit 裁剪，热区会严重偏移——这是最隐蔽的兼容性坑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 用原始尺寸图片（比如 800×600），避免用 CSS 控制宽高
- 矩形：
shape="rect"→coords="x1,y1,x2,y2"（左上 + 右下） - 圆形：
shape="circle"→coords="cx,cy,r"（圆心 x,y + 半径） - 多边形：
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（至少 3 组坐标，首尾不自动闭合） -
alt属性不可省，否则屏幕阅读器无法识别，部分浏览器也会禁用该区域
HTML5 中 area 的 target、title、href 都仍有效，但 nohref 已废弃
nohref 是 HTML4 的遗留属性，现代浏览器已忽略。若想让某个区域“不可点击”，直接删掉 href 即可，但要注意：没有 href 的 area 仍会触发 click 事件（只是不跳转），适合搭配 JS 做自定义交互。
其他关键点：
-
target="_blank"可用于新开窗口，但需加rel="noopener"防安全风险 -
title会在鼠标悬停时显示 tooltip，对用户提示很实用 -
map元素可以复用：同一name的map可被多张img引用，只要图片尺寸一致
真正难的不是写对语法，而是当图片尺寸动态变化（比如响应式布局中 width: 100%）、或后端返回缩略图时，coords 怎么同步缩放。这时候纯 HTML 方案基本失效，得换 SVG 或 canvas + JS 计算。别指望靠百分比 coords —— area 的 coords 只接受像素值，不支持 % 或 rem。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
