必须嵌套在中且由的usemap属性关联，href不支持javascript:void(0)或空字符串，shape与coords需严格匹配，target和rel须写在上，alt不可为空，现代项目应优先用语义化替代方案。

用 做整页跳转必须配 和 usemap

本身不能独立存在，它必须嵌套在 标签里，且对应图片（）得通过 usemap 属性显式关联。漏掉任一环，点击区域就完全无响应。 常见错误是只写了 却没包 ，或 usemap 值写成 ="#mymap"（多了 #），正确写法是 usemap="#mymap"，而 中的 name 必须严格匹配。 的 href 规则和 一致：支持绝对 URL、相对路径、锚点（#section），但不支持 javascript:void(0) 或空字符串——这些会导致跳转失败或行为不可预测。

的 shape 和 coords 容易错位

shape

决定热区几何类型：rect（四值）、circle（三值）、poly（偶数个值），每种对应的 coords 格式必须精确。 例如 shape="rect" 要求 coords="left,top,right,bottom"，顺序错一位（比如写成 "top,left,bottom,right"）就会让热区偏移到屏幕外。 移动端尤其敏感：若图片被 CSS 缩放或容器有 transform，coords 仍按原始图片像素计算，热区会严重错位。解决方案只有两个： - 图片不用缩放，靠 width/height 属性等比拉伸 - 改用 SVG + 或 JS 计算动态热区，放弃

无法触发新标签页？target="_blank" 必须加在 上

支持 target 属性，但很多人误以为要写在 或 上。它只能直接写在 标签内。 要安全打开新页，rel="noopener" 同样必需，否则存在 window.opener 安全风险。 是完整写法。 注意：Safari 对 的 rel 支持较晚（iOS 16.4+），旧版本可能忽略该属性，但 target="_blank" 仍生效。

无障碍与语义问题常被忽略

默认没有可访问文本，屏幕阅读器无法朗读其目的。必须用 alt 属性提供简明描述，例如 alt="进入产品页"。 alt="" 表示该区域纯装饰、无需朗读；但只要它承载跳转功能，alt 就不能为空。 更关键的是：如果整张图本身就是导航入口（比如首页 banner 图含多个跳转区域），建议改用语义化结构——例如用

配合 CSS 热区定位，再用 JS 绑定 window.location.href。因为 在现代响应式布局中维护成本高、适配难，且无法响应 hover/focus 状态样式。

真正需要 的场景极少，仅限于必须保留位图热点且不依赖 JS 的静态导出图（如 PDF 转 HTML 的老系统）。其他情况，优先用 套容器或 SVG。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！