必须嵌套在中且由的usemap属性关联，href不支持javascript:void(0)或空字符串，shape与coords需严格匹配，target和rel须写在上，alt不可为空，现代项目应优先用语义化替代方案。
用 <area> 做整页跳转必须配 <map></map> 和 usemap
<area> 本身不能独立存在，它必须嵌套在 <map></map> 标签里，且对应图片（<img alt="HTML区域映射怎么做整页跳转？页面链接整合指南" >）得通过 usemap 属性显式关联。漏掉任一环，点击区域就完全无响应。
常见错误是只写了 <area> 却没包 <map></map>，或 usemap 值写成 ="#mymap"（多了 #），正确写法是 usemap="#mymap"，而 <map name="mymap"></map> 中的 name 必须严格匹配。
<area> 的 href 规则和 <a></a> 一致：支持绝对 URL、相对路径、锚点（#section），但不支持 javascript:void(0) 或空字符串——这些会导致跳转失败或行为不可预测。
<area> 的 shape 和 coords 容易错位
shape 决定热区几何类型：rect（四值）、circle（三值）、poly（偶数个值），每种对应的 coords 格式必须精确。
例如 shape="rect" 要求 coords="left,top,right,bottom"，顺序错一位（比如写成 "top,left,bottom,right"）就会让热区偏移到屏幕外。
移动端尤其敏感：若图片被 CSS 缩放或容器有 transform，coords 仍按原始图片像素计算，热区会严重错位。解决方案只有两个：
- 图片不用缩放，靠 width/height 属性等比拉伸
- 改用 SVG + <use></use> 或 JS 计算动态热区，放弃 <area>无法触发新标签页？target="_blank" 必须加在 <area> 上
<area> 支持 target 属性，但很多人误以为要写在 <img alt="HTML区域映射怎么做整页跳转？页面链接整合指南" > 或 <map></map> 上。它只能直接写在 <area> 标签内。
要安全打开新页，rel="noopener" 同样必需，否则存在 window.opener 安全风险。
<area shape="rect" coords="10,20,100,80" href="https://example.com" target="_blank" rel="noopener"> 是完整写法。
注意：Safari 对 <area> 的 rel 支持较晚（iOS 16.4+），旧版本可能忽略该属性，但 target="_blank" 仍生效。
无障碍与语义问题常被忽略
<area> 默认没有可访问文本，屏幕阅读器无法朗读其目的。必须用 alt 属性提供简明描述，例如 alt="进入产品页"。
alt="" 表示该区域纯装饰、无需朗读；但只要它承载跳转功能，alt 就不能为空。
更关键的是：如果整张图本身就是导航入口（比如首页 banner 图含多个跳转区域），建议改用语义化结构——例如用 <div role="link" tabindex="0"> 配合 CSS 热区定位，再用 JS 绑定 <code>window.location.href。因为 <area> 在现代响应式布局中维护成本高、适配难，且无法响应 hover/focus 状态样式。
真正需要 <area> 的场景极少，仅限于必须保留位图热点且不依赖 JS 的静态导出图（如 PDF 转 HTML 的老系统）。其他情况，优先用 <a></a> 套容器或 SVG。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
