area标签无src属性，不解析路径；真正影响图像映射的是img的src路径，其相对/根路径在本地file://协议下易出错，须用本地服务器运行；area的href路径规则与a标签完全一致；map的name与img的usemap值必须严格匹配。

area 标签里不能直接写相对路径或绝对路径

<area> 本身不加载资源，它只定义图像映射中的一个可点击区域，所以它没有 src 属性，也没有路径解析逻辑。你真正要关心的是它所依附的 <img> 标签的 src 值——那个路径才决定图片能不能加载出来。

常见误解是以为 <area href="about.html"> 的 href 是“路径类型问题”，其实不是：href 是跳转目标，它的解析规则和普通 <a> 标签完全一致，跟 <area> 本身无关。

• href="contact.html"：相对路径，以当前 HTML 文件位置为起点
• href="/contact.html"：根路径（不是绝对路径），以站点根目录为起点
• href="https://example.com/contact"：完整 URL，无歧义

img 标签的 src 路径错，area 区域就全失效

如果 <img src="images/map.png"> 加载失败（404、跨域、file:// 协议下路径错），那整个图像映射就不可见——<area> 再准也没用。此时鼠标悬停不会变手形，点击也无响应。

最容易踩的坑是本地双击打开 HTML 文件时用 /images/map.png：

立即学习“前端免费学习笔记（深入）”；

• 在服务器上跑：http://localhost:8080/images/map.png ✅
• 双击 file:///Users/you/site/index.html 时，/images/map.png 会被解析成 file:///images/map.png ❌（系统根目录，不是你项目根）

解决方法只有一个：本地开发必须起服务，比如 python3 -m http.server 8000，然后访问 http://localhost:8000。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

area 的 href 路径写法和 a 标签完全一样

<area> 的 href 行为等价于 <a href="...">，所以所有路径规则都复用：

• 同级页面：href="about.html"
• 子目录页面：href="blog/post.html"
• 上级页面：href="../index.html"（注意不是 ../../index.html，层级只看当前 HTML 文件位置）
• 根路径跳转：href="/admin/dashboard" —— 移动 HTML 文件位置也不用改

特别注意：href 中不要写 file:// 或盘符路径（如 C:\pages\help.html），浏览器会拒绝跳转或触发安全拦截。

map 和 area 的 name / usemap 必须严格匹配

这是和路径无关但常被忽略的硬性要求：<img usemap="#my-map"> 中的 #my-map 必须和 <map name="my-map"> 的 name 值**完全一致**（大小写敏感、无空格、无额外字符）。

一旦不匹配，area 定义就彻底失效，且浏览器不会报错——只是默默当普通图片处理。

建议做法：

• 把 name 设为语义化短名，如 product-map，避免用数字或下划线开头
• 在同一个 HTML 文件里定义 <map>，不要拆到外部文件（<map> 不支持外部引用）
• 用浏览器开发者工具检查 Elements 面板：展开 <img> 看是否关联了正确的 <map> 节点