纯#id锚点在<area>中无效，必须用完整URL或JS处理；href必须为有效URL，shape和coords需严格匹配原始尺寸，usemap与map name须完全一致且带#，移动端需注意热区尺寸与可访问性。
纯 #id 锚点在 <area> 中根本不会跳转，这是最常踩的坑——必须用完整 URL 或 JS 处理。
area 的 href 必须是有效 URL，不是纯锚点
浏览器对 <area href="#section"> 的支持极差，多数情况下点击无反应，控制台还可能报 Failed to load resource（当成绝对路径请求了）。href 不能为空、不能是 #、不能是 #id。
-
href="./page.html#detail"✅ 可用，相对路径 + 锚点 -
href="javascript:void(0)"✅ 配合 JS 实现滚动或状态切换 -
href="#detail"❌ 大部分浏览器静默失败 -
href=""或href="#"❌ 同样失效，且可能触发页面顶部跳转
shape 和 coords 必须严格匹配，错一位就偏移
shape 决定 coords 的解析方式，不是“固定四参数”，硬记 x1,y1,x2,y2 会出错。
-
shape="rect"：coords="left,top,right,bottom"，4 个值，左上 + 右下像素坐标 -
shape="circle"：coords="cx,cy,radius"，3 个值，圆心 + 半径（不是直径） -
shape="poly"：coords="x1,y1,x2,y2,x3,y3,..."，必须偶数个值，至少 6 个（三组点），顺序影响形状走向 -
shape="default"：覆盖未被其他区域占据的剩余区域，不需coords
坐标始终基于图片原始尺寸（非 CSS 缩放后尺寸），如果图片用 width 或 max-width 缩放过，热区会严重错位。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
usemap 和 map name 必须完全一致且带 #
<img usemap="#floor-map"> 和 <map name="floor-map"> 是绑定关系，大小写敏感、不可多一个字符，也不可少 #。
-
usemap="#main"→<map name="main">✅ -
usemap="main"或usemap="#main-map"→<map name="main">❌ 不匹配，整个热区失效 -
<area>必须是<map>的直接子元素，嵌套在<div>或自闭合写法（<area />）都无效
移动端热区太小会点不准，coords 不随缩放变化
移动端最小可触控热区建议 ≥44×44px，但 coords 是按原始图像素写的，CSS 缩放后坐标不会自动换算。
- 原始图 800×600，
coords="100,100,200,200"定义了一个 100×100px 区域 - 若用 CSS 缩放到 400×300 显示，该区域物理尺寸只剩约 50×50px，接近临界值
- 更稳妥的做法：用 SVG 替代
<map>，或用 JS 根据img.naturalWidth和实际显示尺寸动态重算coords
别忽略 alt 属性——它不是可选的，而是可访问性必需项，要准确描述功能，比如 alt="进入厨房放大图"，而不是 alt="点击此处"。
