shape="poly"仅定义多边形顶点坐标，coords须为至少6个整数（3组x,y），偶数个，禁用小数和百分比；浏览器自动闭合，无需首尾重复。
shape="poly" 本身不画图，只告诉浏览器：后面这串数字是多边形顶点坐标，按顺序连成封闭区域。能不能点准，全看坐标对不对、格式严不严。
coords必须是偶数个整数，且至少6个
浏览器把 coords 当作 x,y 对列表，每两个数一组。少于6个（即少于3个点），poly 区域直接被忽略；奇数个数字会被截断——比如 coords="10,20,30,40,50" 实际只取前4个，变成线段而非区域。
- 正确示例：
coords="100,80,200,60,220,150,180,200"（4个点，8个整数） - 错误示例：
coords="100,80,200,60,220"（5个数，末尾220被丢弃，只剩前4个） - 别写小数或百分比：
coords="100.5,80.2"或"50%,30%"都无效，浏览器只认整数像素值
顶点顺序决定形状，首尾无需手动重复
浏览器会自动把最后一个点连回第一个点闭合多边形。写成 coords="x1,y1,x2,y2,x3,y3,x1,y1" 反而多余，还可能因坐标精度误差导致渲染异常。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 顺时针或逆时针都行，但建议统一用顺时针，方便后续做点在多边形内判断（如用射线法）
- 相邻点间距太小（比如
- 调试时可用
outline: 2px solid red加到<img>上，再截图叠在坐标工具里比对
coords永远以原图尺寸为基准，和CSS缩放无关
哪怕你用 width="100%" 把图压成手机屏宽，coords 还是得按图片原始宽高（img.naturalWidth/img.naturalHeight）来算。否则热区会漂移。
- 最稳做法：给
<img>加width和height属性，强制渲染尺寸 = 原图尺寸 - 动态适配方案：用 JS 读取
img.naturalWidth和当前img.offsetWidth算缩放比，再把原始坐标等比缩放 - 千万别信“浏览器会自动适配”——它不会，写了就是写了，错一点就偏一大块
shape值大小写敏感，拼写错误直接失效
shape 只接受严格小写的 poly。写成 Poly、polygone、polygon 或 shape="multi"，浏览器一律静默忽略，对应 <area> 完全不生效，控制台也不报错。
- 检查手段：打开开发者工具，选中
<area>，看Computed面板里有没有解析出有效坐标 - 常见陷阱：
shape="poly "（末尾空格）、coords="100, 80"（中文逗号或空格）都会导致截断 -
alt不是可选：缺了它，屏幕阅读器无法识别该热区用途，WCAG 直接不合规
真正麻烦的不是怎么写标签，而是坐标从哪来、怎么验。导出坐标的工具默认用 SVG 坐标系（Y轴向上）或带小数，直接贴进 coords 几乎必错。最省事的办法：用浏览器开发者工具截图+标尺量，且确保此时图片未被 CSS 缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
