area是空元素，不可包裹文字或任何子内容；alt仅作替代文本，非可见文案；实现热区文字需改用svg或css绝对定位方案。
area 标签根本不能包裹文字
<area> 是一个空元素（void element），没有结束标签，也不允许包含任何子内容——包括文字、<span></span>、甚至空格。写成 <area>点击这里 会被浏览器直接忽略中间文本，解析为无效结构，控制台虽不报错，但文字不会渲染，alt 也不会自动变成可见文案。
它的唯一交互出口是 href + alt，而 alt 只在图片不可见时作为替代文本读出或显示，**不是 UI 上的按钮文案**。想让热区带可读文字，必须换思路。
用 SVG 的 <text></text> + <rect></rect> 替代 area
SVG 是目前最干净、可缩放、可访问的替代方案：热区和文字能真正共存于同一坐标系，且天然支持响应式。
- 用
<svg viewbox="0 0 800 600"></svg>声明原始图像尺寸（必须与原图 naturalWidth/naturalHeight 一致） -
<image href="map.png" width="100%" height="100%"></image>铺底图 - 热区用
<rect x="120" y="80" width="100" height="40" fill="none" stroke="#000" stroke-width="0.5"></rect> - 文字叠加在热区上：
<text x="170" y="106" font-size="14" text-anchor="middle" dominant-baseline="middle">北京</text> - 加
tabindex="0"和role="link"支持键盘聚焦，aria-label="前往北京市页面"补充无障碍语义
用 CSS 定位 + <div> 模拟热区文字
<p>如果无法改用 SVG（比如 CMS 锁死 HTML 输出），可用绝对定位把文字层叠在图片上，再用 <code>pointer-events: none 让文字“透点”到下层 <area>，但需绕过几个坑：
- 父容器必须设
position: relative，图片和文字 <div> 都用 <code>position: absolute
- 文字
<div> 加 <code>pointer-events: none，否则会拦截点击，<area> 失效
- 文字位置必须按原始像素手动对齐，CSS 缩放后需同步 JS 重算偏移（监听
img.onload 和 window.resize）
- 移动端触控区域至少 44×44px，文字容器要撑开足够尺寸，不能只靠字体大小
- 别用
<button></button> 或 <a></a> 直接覆盖——它们会破坏 <map></map> 关联，且无法继承 <area> 的 href
为什么不要强行 hack <area> 加文字
所有试图用伪元素、JS 插入 DOM、或依赖 title 属性显示提示的方案，都逃不开三个硬伤：
-
<area> 不生成渲染盒（rendering box），::before/::after 完全无效
-
title 只触发 tooltip，无样式控制、延迟高、移动端基本不触发
- 用 JS 动态插入
<span></span> 到图片旁，坐标维护成本爆炸——每次图片尺寸变、视口变、DPR 变，都要重算
真正省事的分界点很清晰：只要需求里出现「热区上要有可见文字」，就该放弃 <map></map>/<area>，直接切到 SVG 方案。它不是“高级技巧”，而是现代响应式交互的基线做法。
position: relative，图片和文字 <div> 都用 <code>position: absolute
<div> 加 <code>pointer-events: none，否则会拦截点击，<area> 失效
img.onload 和 window.resize）<button></button> 或 <a></a> 直接覆盖——它们会破坏 <map></map> 关联，且无法继承 <area> 的 href
为什么不要强行 hack <area> 加文字
所有试图用伪元素、JS 插入 DOM、或依赖 title 属性显示提示的方案，都逃不开三个硬伤：
-
<area>不生成渲染盒（rendering box），::before/::after完全无效 -
title只触发 tooltip，无样式控制、延迟高、移动端基本不触发 - 用 JS 动态插入
<span></span>到图片旁，坐标维护成本爆炸——每次图片尺寸变、视口变、DPR 变，都要重算
真正省事的分界点很清晰：只要需求里出现「热区上要有可见文字」，就该放弃 <map></map>/<area>，直接切到 SVG 方案。它不是“高级技巧”，而是现代响应式交互的基线做法。
