HTML代码中area标签shape属性设置矩形与圆形的语法-html教程-PHP中文网

shape属性必须小写，rect和circle严格区分大小写；coords坐标基于原始图片像素，响应式下需js重算或改用svg。

html代码中area标签shape属性设置矩形与圆形的语法

shape="rect" 必须用小写，coords 是左上 + 右下坐标对

浏览器对 shape 值大小写敏感，Rect、RECT、rectangle 全部无效，热点不响应点击。正确写法只有 rect，且必须配合 4 个数字的 coords：coords="x1,y1,x2,y2"，其中 x1,y1 是左上角，x2,y2 是右下角（不是宽高）。坐标以图片左上为原点，单位是像素。

常见错误包括：

coords="10,20,90,70" 写成 "10,20,80,50"（y2 小于 y1）→ 浏览器可能忽略或行为未定义
在响应式图片中直接写死 coords → 图片缩放后热点错位，无自动适配
漏掉逗号或混入空格，如 "10, 20, 90, 70" → 多数浏览器会截断或偏移，不报错但不可靠

shape="circle" 的 coords 格式是圆心加半径，不是直径

shape="circle" 同样严格区分大小写，Circle 或 circular 都不会生效。对应的 coords 必须是三个数字：coords="cx,cy,r"，即圆心横纵坐标 + 半径长度（像素）。注意不是直径，也不是边界框坐标。

容易踩的坑：

把 coords="50,60,25" 误写为 "50,60,50"（当成直径）→ 圆实际半径 50，远超预期
圆心坐标超出图片尺寸（如图片宽 200px，却设 cx="250"）→ 热区部分或全部不可点，但浏览器不提示
和 rect 混用时未注意坐标系一致性 → 所有 coords 都基于同一张原始图的像素尺寸，不随 img 的 width/height 属性缩放

poly 和 default 不适用于矩形/圆形场景，但常被误用

有人试图用 shape="poly" 模拟矩形（四个点）或圆形（多个点逼近），这完全没必要，且增加出错概率：poly 至少要 6 个数字（3 个点），坐标顺序错一位就整个形状歪斜；而 default 不接受 coords，且必须放在 <map></map> 最后一个 <area> 中，否则会遮盖前面所有热区。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

真实项目里，只要需求是标准矩形或圆形，就只用 rect 或 circle，别绕路。多边形适合不规则轮廓，比如地图上的省份、UI 中的按钮剪影等。