area标签必须配合img和map使用，仅定义图像坐标映射，不渲染也不响应点击；usemap值须带#且与map的name属性严格一致（区分大小写），map需在DOM中可查；alt属性为无障碍强制要求，coords须为无空格整数序列，不支持响应式缩放。
area标签必须配合img和map才能生效
area 标签本身不渲染、不响应点击，它只是为 <img> 提供坐标映射信息。真正触发跳转的，是 <img usemap="#xxx"> 与 <map name="xxx"> 的配对关系——usemap 值必须带 #，而 <map> 的 name 属性值必须完全一致（区分大小写），且 <map> 必须在 DOM 中可查（不能放在 <template> 或 <head> 外）。
常见错误现象：
-
usemap="#worldmap"写成usemap="worldmap"（漏掉#）→ 热点失效 -
<map id="worldmap">→ Chrome 不识别，只认name，不是id -
<map>放在<body>之外或 JS 动态插入但晚于<img>渲染 → 部分旧版 Safari 完全忽略
a标签天然支持嵌套内容，area只能靠坐标定位
<a> 可以包裹文字、图片、<div> 甚至表单控件，语义清晰、无障碍友好、键盘导航自然；<area> 则只能定义图像上某块“不可见区域”，没有视觉容器，所有交互依赖 coords 和图片像素位置。
使用场景差异：
立即学习“前端免费学习笔记（深入）”；
- 需要给一张固定尺寸的地图图片划分国家区域 → 用
<area>合理 - 想让一段文字+图标一起变成链接 → 必须用
<a>，<area>无法实现 - 要支持键盘 Tab 导航并高亮焦点轮廓 →
<a>原生支持，<area>需额外加tabIndex且部分浏览器表现不一致
coords坐标写错是area最常踩的坑
coords 是纯整数、逗号分隔、无空格、按顶点顺序排列的像素值。它不接受小数、百分比、单位（如 px），也不支持 SVG 坐标系（Y 轴方向相反）。
容易出错的点：
- 用截图工具量坐标时，图片被 CSS 缩放（比如
max-width: 100%）→ 实际像素坐标已偏移，必须按缩放比例重算 - 导出 coords 时带空格：
"100, 200, 150, 180"→ 浏览器只读到"100"，后面全截断 -
shape="poly"至少要 6 个数字（3 个点），少于则整个<area>被忽略 - 多边形自动闭合，无需重复首尾点；写成
"x1,y1,x2,y2,x3,y3,x1,y1"反而多余
alt属性不是可选的，而是无障碍强制要求
<area> 的 alt 属性在 WCAG 2.1 中是必需的：屏幕阅读器完全依赖它描述区域功能。写 alt="" 或 alt="点击这里" 等同于剥夺视障用户操作权。
对比 <a>：
-
<a href="france.html">法国</a>的链接文本本身就是可访问的说明 -
<area shape="poly" coords="..." href="france.html" alt="法国区域，点击查看法国旅游指南">才算合规 -
title只是悬停提示，不能替代alt；没alt就等于该区域对语音导航“不存在”
响应式图片下 <area> 几乎必然失效，因为 coords 无法随缩放自适应——这不是 bug，是规范限制。真要适配，得用 JS 监听 resize 并动态重设 area.coords，或者直接换用 <svg>。
