coords属性不能为空或格式错误，否则area元素将彻底失效；需按shape类型严格校验坐标数量、格式及数值有效性，空格、小数、单位均禁止，服务端和JS动态创建时应先验证再赋值。
coords 属性不能为空字符串或省略
直接写 coords="" 或完全不写 coords，浏览器会忽略该 <area>，点击无效、无障碍失效、控制台可能报 warning。这不是“安全兜底”，而是彻底失效。
常见错误场景包括：动态生成 <area> 时条件未满足却仍插入空 coords；后端模板渲染遗漏坐标字段；用 JS 拼接字符串时误传空值。
-
shape="rect"必须配 4 个整数，如coords="10,20,100,80"，coords=""或coords=",,,"都不行 -
shape="circle"必须是 3 个正整数，coords="50,50,0"（半径为 0）会被静默丢弃，等效于无坐标 -
shape="poly"至少要 6 个数字，coords="10,20"（仅一对）直接被跳过，不报错但不可点
如何判断 coords 是否合法再插入
不能只检查字符串非空，得验证格式和数量。浏览器不做校验，出错只会“静默失效”，调试极难定位。
- 对
shape="rect"：用/^\d+,\d+,\d+,\d+$/匹配，且确保x1 < x2 && y1 < y2 - 对
shape="circle"：匹配/^\d+,\d+,\d+$/，再检查第三个数是否 > 0 - 对
shape="poly"：拆分逗号后转数字数组，长度必须 ≥ 6 且为偶数，每项需是有限正整数 - 所有坐标字符串中禁止出现空格、换行、小数点、单位（如
"100, 200"中的空格会导致第二值截断）
服务端/模板层的空值防御建议
后端拼 HTML 时，如果坐标数据缺失，宁可不渲染该 <area>，也不要塞空 coords。
立即学习“前端免费学习笔记（深入）”；
- PHP / Python / Node 模板中，先做完整校验：
if coords and len(coords_list) == 4 and all(is_positive_int(x) for x in coords_list) - 避免 fallback 到
coords="0,0,0,0"—— 这会生成一个不可见的零面积区域，用户点不到，还占 DOM 节点 - 若业务上允许“暂无热区”，建议用 CSS 隐藏整个
<map>或改用其他交互方式（如 SVG），别硬塞空<area>
JS 动态创建时 coords 的安全赋值
用 document.createElement('area') 时，el.coords 是可读写的 DOM 属性，但设空字符串等于没设。
- 正确做法：只在确认坐标有效后才调用
el.setAttribute('coords', validCoordsString) - 错误写法：
el.coords = ''或el.setAttribute('coords', null)—— 浏览器会当不存在该属性处理 - 调试技巧：插入后立即用
el.hasAttribute('coords')和el.getAttribute('coords')双重确认
