area标签必须嵌套在map中并配合img的usemap属性使用，usemap与map的name值须严格一致（含#号和大小写），coords基于图片原始尺寸，href和alt为必填项以确保功能与可访问性。
area 标签不是独立可用的标签，它必须嵌套在 <map></map> 里，并配合 <img> 的 usemap 属性才能生效；漏掉任一环节，点击区域就完全不响应。
usemap 和 map name 必须严格匹配，包括 # 和大小写
浏览器只认 usemap="#worldmap" 这种写法，usemap="worldmap" 或 usemap="#WorldMap" 都会断连。常见错误是复制粘贴时多空格、少#，或命名用了下划线但 <map name="nav_map"></map> 实际写成 usemap="#nav-map"。
-
<img src="map.jpg" usemap="#europe-map">→ 对应的<map name="europe-map"></map>必须一字不差 - 推荐统一用小写 + 连字符，比如
name="product-section"+usemap="#product-section" - 为兼容旧标准，可同时写
<map id="product-section" name="product-section"></map> - Chrome 中右键图片 → “检查”，若不能高亮对应
<map></map>，说明关联失败
shape 和 coords 必须配对，且坐标基于原始图尺寸
coords 的数值单位是像素，且永远按图片原始分辨率计算，和 CSS 缩放、width/height 属性无关。一张 1200×800 的图缩成 600×400 显示，coords="0,0,100,100" 仍指向原图左上角 100×100 区域——现在它只占屏幕 50×50 像素，点起来必然偏移。
-
shape="rect"→coords="x1,y1,x2,y2"（左上 + 右下） -
shape="circle"→coords="cx,cy,r"（圆心 x、y、半径） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3"（至少三组点，自动闭合） -
shape="default"→ 不需要coords，覆盖所有未被其他<area>覆盖的区域
href 和 alt 是必填项，否则功能或无障碍失效
href 缺失，点击无跳转；alt 缺失，Chrome 控制台报 warning，屏幕阅读器跳过该区域，违反 WCAG 基础可访问性要求。HTML5 规范明确要求：只要用了 href，alt 就不可省略。
-
<area shape="circle" coords="100,80,20" href="france.html" alt="法国">✅ -
<area shape="rect" coords="0,0,200,100" href="home.html">❌（缺alt） -
<area shape="poly" coords="50,50,150,50,100,150" alt="三角形区域">❌（缺href，也不支持纯 JS 绑定 click） - 如需 JS 交互，建议改用 SVG 或 Canvas，
<area>本质是为链接设计的
rel、target、hreflang 等属性要按需使用，别硬加
rel="nofollow" 适合用户生成内容里的外链；target="_blank" 必须配 rel="noopener" 防安全漏洞；hreflang 只在多语言站点中真正有用。乱加不仅没效果，还可能干扰 SEO 或触发浏览器警告。
-
<area href="blog.html" rel="nofollow" target="_blank">✅（注意：两个rel会冲突，应合并为rel="nofollow noopener"） -
<area href="about.html" rel="author">❌（除非该页确实是作者介绍页） -
<area href="print.html" rel="alternate" media="print">✅（打印专用页面） -
media属性值是媒体查询，不是字符串"print"，正确写法是media="print"或media="(max-width: 768px)"
最易被忽略的一点：area 坐标系统永远以图片原始左上角为 (0,0)，哪怕你用 JS 动态插入 <area>，也得先读取 <img> 的 naturalWidth/naturalHeight，再按比例换算 coords —— 直接读 offsetWidth 会出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
