和 是 HTML 中用于定义图像映射的元素， 声明可点击区域集合， 定义具体形状与坐标，需通过 usemap 属性与 关联，支持 rect/circle/poly 三种形状及像素级定位。

什么是 和 ？

HTML 区域映射（image map）本质是让一张图片的不同区域响应不同的点击行为，比如海报上「立即抢购」按钮、「查看详情」文字、「品牌 logo」都指向不同链接。它不依赖 JS，纯 HTML 就能实现，但必须配合 的 usemap 属性和 元素使用。

关键点：图片本身不能带 src 就直接套 —— 是独立块级元素，必须通过 name 被 显式引用，且名字要完全一致（包括 # 号）。

shape 和 coords 怎么配对写？

每个可点击区域由 定义，核心是 shape（形状）和 coords（坐标）。常见组合有：

• shape="rect" → coords="x1,y1,x2,y2"（左上角 + 右下角像素值，注意不是宽高）
• shape="circle" → coords="cx,cy,r"（圆心 x、y + 半径）
• shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."（顺时针列出多边形顶点，至少 3 组）

坐标系原点在图片左上角（0,0），单位是像素。务必用设计稿或浏览器开发者工具量取真实位置——切图后缩放会导致坐标失效，所以建议先固定图片尺寸：，再按这个尺寸标 coords。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

为什么点了没反应？常见硬伤检查项

区域映射失效，90% 出在以下几点：

• 的 name 和 的 usemap 值不一致（比如漏了 #，或大小写错）
• 图片加载失败（404 或路径错误），此时 完全不生效
• 缺少 href 或 href="#" 但没加 onclick，导致无跳转也无反馈
• CSS 设置了 pointer-events: none 在图片或父容器上（尤其用 flex/grid 布局时容易误加）
• 使用了 shape="default" 却没放在最后，导致覆盖其他区域

响应式下怎么保坐标有效？

原生 不支持响应式缩放——coords 是绝对像素值，图片变小后区域就错位。真要适配多尺寸，有两个务实选择：

• 放弃 ，改用 CSS 定位 + position: absolute 的透明按钮层（需保持海报图片 position: relative）
• 保留 ，但用 JS 动态重算 coords：监听 resize，按当前图片 offsetWidth / naturalWidth 比例缩放所有 coords 值（注意只在图片加载完成后读 naturalWidth）

如果海报只在 PC 端展示，或者尺寸固定（如小程序、邮件模板），原生 最轻量；一旦涉及移动端或 fluid layout，坐标维护成本会陡增。

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