usemap与map name必须严格匹配（大小写敏感），area的shape和coords需格式一致，href和alt不可省略，响应式下热区失效需用SVG替代或保持原图尺寸。
usemap 和 map name 必须严格匹配，大小写敏感
绑定失败是“点不动”的第一原因。#floorplan 必须和 的 name 完全一致——不能多空格、不能大小写混用（#FloorPlan ≠ floorplan），也不能漏掉开头的 #。
常见错误包括：
- 复制粘贴时带了中文标点或不可见字符
- 把
name写成id或class -
放在外（比如误塞进）
area 的 shape 和 coords 格式必须一一对应
每个 的 shape 决定了 coords 应该有几个值、怎么解释。手填错一个数，整个热区就偏移或失效。
正确写法示例：
<area shape="rect" coords="50,30,180,120" href="/room/101"><area shape="circle" coords="320,150,40" href="/room/202"><area shape="poly" coords="10,200,60,190,70,240,20,250" href="/lobby">
注意：
-
rect：4 个值，顺序是left,top,right,bottom（不是宽高） -
circle：3 个值，center-x,center-y,radius -
poly：偶数个值，每两个为一组x,y坐标，至少 3 组（6 个数） - 所有坐标单位是像素，基于图片原始尺寸（非 CSS 缩放后尺寸）
跳转链接需显式声明 href，alt 不可省略
不像 有默认样式或行为，没写 href 就完全不响应点击；没写 alt 则违反可访问性规范，屏幕阅读器无法播报该区域用途。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
建议写法：
<area shape="rect" coords="100,50,200,100" href="/admin" alt="管理员入口" target="_blank">
关键点：
-
href必须存在，哪怕只是href="#"（但应配合 JS 阻止默认行为） -
alt是强制要求，不是“可选优化” -
target="_blank"可按需添加，但记得加rel="noopener"防安全风险
响应式下热区会失效，别只靠静态 coords
只要对 width: 100% 或 max-width，原始像素坐标就立刻错位。浏览器不会自动缩放 coords。
可行解法只有两个：
- 放弃响应式缩放，用原图尺寸 +
max-width: 100%+height: auto保比例（最简单，但移动端可能过大） - 改用
替代 —— 矢量坐标天然适配缩放，支持 hover、JS 事件、无障碍更友好
硬用 JS 动态重算 coords 成本高、精度差、移动端 touch 坐标难对齐，不推荐作为首选方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
