area标签不显示是正常行为，它必须嵌套在map内且被img通过usemap引用；coords须按shape严格匹配整数坐标格式；含href时alt为必填项；坐标基于图片原始尺寸，不随CSS缩放自适应。
area 标签本身就不显示，它从来不是用来“渲染”的——不显示是正常行为，显示了反而说明你误用了它。
area 必须嵌套在 map 里，且 map 必须被 img 正确引用
常见错误现象：开发者工具里能看到 <area> 元素，但鼠标悬停没手型、点击无反应；getBoundingClientRect() 返回 { width: 0, height: 0 }。
-
<area>离开<map></map>就彻底失效，写在或<div> 里会被浏览器忽略（即使 DOM 树里能查到） <li> <code><img alt="HTML区域映射为什么不显示？常见语法排错清单" >的usemap属性必须带#前缀，且与<map name="xxx"></map>的name值逐字节匹配：大小写、连字符、空格都不能错 - 错误示例：
usemap="worldmap"（缺 #）、usemap="#WorldMap"（大小写不一致）、<map name="world-map"></map>配usemap="#worldmap"（连字符不一致） -
<map></map>应紧邻<img alt="HTML区域映射为什么不显示？常见语法排错清单" >，避免被<picture></picture>、<figure></figure>或 Shadow DOM 隔离 -
coords值必须是整数像素，逗号分隔，**不能有空格**：正确是"100,200,150,180,180,220"，错误是"100, 200, 150, 180"（空格导致截断） -
shape="poly"至少需要 3 对坐标（6 个数字），少于则被忽略；顶点按顺序列出，自动闭合，无需重复首尾点 -
shape="rect"要求x1 且 <code>y1 ，反序会导致区域不可见 - 坐标系原点在图片左上角（0,0），X 向右、Y 向下——导出坐标时若来自 Sketch/Figma/SVG 工具，注意是否默认 Y 向上
-
alt不是“可选提示”，而是 WCAG 强制要求：必须描述区域用途，例如alt="广东省，点击查看政策细则"，禁用alt=""或alt="点击这里" -
href缺失时，<area>失去链接行为（哪怕绑了 JS click 事件，部分浏览器也不触发冒泡） - 如果要执行 JS，仍需写
href="javascript:void(0)"或href="#"，并配onclick，否则某些 iOS 版本会静默忽略 -
title可加，但非必需；不能替代alt，且部分浏览器对title渲染不可靠 -
coords永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），和 CSS 渲染宽高无关 - 缩放比计算公式：
scaleX = img.offsetWidth / img.naturalWidth，scaleY = img.offsetHeight / img.naturalHeight - 不同
shape处理方式不同：rect四值都缩；circle圆心坐标按各自方向缩，半径用Math.min(scaleX, scaleY)；poly所有偶数位（x）乘scaleX，奇数位（y）乘scaleY - 必须监听
img.onload和window.resize，仅靠 CSS 或object-fit无法修正
coords 坐标格式错一个字符就失效
常见错误现象：热区偏移、点不准、多边形完全不响应；用截图工具量取的坐标在页面上无效。
alt 和 href 缺一不可，否则语义与功能双崩
常见错误现象：屏幕阅读器跳过该区域；旧版 Safari 完全不识别；点击无跳转，控制台也无报错。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
响应式图片下 coords 必须手动重算，没有例外
常见错误现象：桌面端调好，移动端热区“飘”走；max-width: 100% 一加，整个映射就失效。
真正容易被忽略的点是：area 的坐标绑定的是自然尺寸，不是渲染尺寸；而绝大多数人调试时只看渲染后的像素，却忘了读 naturalWidth。一旦图片被拉伸、裁剪或用 vw 设置宽度，硬写死的 coords 就等于废代码。
