area标签本身不渲染且不响应事件，仅在与img正确配对、usemap与map name逐字节匹配（含大小写及符号）、coords按原始尺寸书写、href和alt属性合规、且为map直接子元素时才生效。
area 标签本身不渲染、不响应事件，它只在和 <img> 正确配对且坐标无误时才“活”起来；单独写 <area> 标签不会产生任何交互效果。
usemap 和 map name 必须逐字节匹配
这是最常卡住的地方：浏览器不报错，但点击完全没反应。
-
usemap值必须以#开头，比如usemap="#product-diagram" -
<map name="product-diagram">的name属性值必须**完全一致**——大小写、连字符、下划线都不能差一个字符 - 调试时直接在 Chrome 控制台里右键图片 → “检查”，看能否高亮到对应
<map>；如果找不到，基本就是匹配失败 - 不要把
<map>放在<picture>、<figure>或 Shadow DOM 里，usemap会失效
coords 坐标必须按原始图片尺寸写，缩放后必漂移
你用 CSS 把一张 1920×1080 的产品图设为 width: 100%; height: auto，coords="100,200,300,400" 依然指向原图上的矩形区域——现在它在屏幕上可能只剩一半大小，点不准是必然的。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径（正整数像素） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点成对出现，总数必须是偶数；首尾点不用重复 - Figma/Photoshop 导出坐标后，务必手动删掉空格、换行、中文逗号
href 和 alt 不可省略，且有硬性要求
很多产品图交互失效，是因为 <area> 缺了关键属性或写法错误。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
href必须是有效 URL：href="./specs.html#motor"✅，href="#"❌，href="#motor"❌（纯锚点在多数浏览器中静默失败） - 若需 JS 控制行为，用
href="javascript:void(0)"或href="#"配合event.preventDefault() -
alt是强制属性，不能为空字符串；要描述功能，比如alt="点击查看散热模块详情"，不是alt="链接" -
<area>是空元素，不能自闭合（<area />是错的），也不能放在<div>里“中转”——必须是<map>的直接子元素
响应式下热区失效？没有纯 HTML/CSS 解法
HTML 图像映射天生不支持缩放适配。所有 coords 都是固定像素值，CSS transform、scale()、width 调整都会导致错位。
- 移动端最小热区建议 ≥44px 宽高，否则 iOS Safari 点击不灵敏
- 若必须响应式，只能靠 JS 在
window.resize和<img>.onload后动态重算 coords：先读取图片原始宽高（img.naturalWidth）、当前显示宽高（img.offsetWidth），再按比例缩放所有 coords 值 - 更推荐替代方案：用 SVG 替代
<img>+<map>，矢量图形天然响应式，支持 :hover、pointer-events、JS 事件绑定，维护成本更低
真正难的不是写几个 <area>，而是确保坐标、匹配、路径、可访问性四者同时成立；任意一环松动，整个热区就“哑火”。尤其要注意 coords 没有视觉反馈，错了一点都得靠反复比对原始图才能发现。
