和标签用于在HTML图片上定义可点击热区，本质是人工设定坐标区域而非OCR识别；的coords必须严格匹配shape类型（如rect为左上+右下坐标），常见错误包括坐标误作宽高、多边形点数不足；需通过开发者工具或在线工具获取坐标，并确保与完全一致，否则热区失效。

什么是<map></map>和<area>标签

HTML里提取图片中的“映射区域”，本质是用<map></map>配合<area>定义可点击的热区，不是OCR识别或图像分析——它不“提取”图像内容，而是人为在图片上画出坐标区域。浏览器只认你写的coords和shape，不会自动识别图中按钮、文字或轮廓。

<area>的coords怎么写才有效

坐标必须严格匹配shape类型，错一位就失效或错位：

• 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组点，首尾不自动闭合）

常见错误：<area shape="rect" coords="10,20,100,80">写成"10,20,90,60"（误把宽高当坐标），结果区域偏移；或者poly少写一对坐标，导致最后一条边消失。

如何快速获取图片上某区域的coords

手动数像素不现实，推荐两种实操方式：

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

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

下载

立即学习“前端免费学习笔记（深入）”；

• 用浏览器开发者工具临时叠加<div>框选，看<code>getBoundingClientRect()返回的left/top/width/height，再换算成rect坐标
• 用在线工具如 image-map.net：上传图片，鼠标拖拽画区域，自动生成带<map></map>的完整HTML
• 注意导出后检查<img usemap="#xxx" alt="HTML怎么提取图片中的映射区域" >里的#xxx是否和<map name="xxx"></map>完全一致（大小写、有无#都要对）

为什么点了<area>没反应

多数问题出在关联断裂或属性缺失：

• <img alt="HTML怎么提取图片中的映射区域" >漏了usemap属性，或值写成usemap="xxx"（缺#）
• <map></map>放在外、或name拼写与usemap不一致
• <area>没写href或onclick，纯定义区域但没交互行为
• 图片加载失败时，<map></map>仍存在，但坐标系失效（浏览器按img的width/height缩放计算coords，原图尺寸变化会错位）

最易被忽略的是响应式场景：图片设了max-width: 100%但没同步更新<area>坐标——此时要用JS监听resize重算，或改用SVG替代。