target="_self"才是当前页打开的明确写法,空字符串target=""因浏览器行为不一致且受base标签影响不可靠,area必须配合href才能使target生效。

area 标签的 target="_self" 才是当前页打开的明确写法
很多人以为 target=""(空字符串)等同于在当前页打开,但实际不是。HTML 规范中,target 属性为空值时,浏览器行为不一致:部分浏览器会回退到默认 target="_blank" 的降级逻辑,尤其在配合 base 标签时更不可靠。
真正稳定、可预期的方式是显式声明 target="_self"。
-
target="_self"明确指定在当前浏览上下文(即当前<iframe></iframe>或标签页)中加载 -
target=""不是标准 fallback,W3C 未定义其语义,应视为无效值 - 若父页面有
<base target="_blank">,空target会被继承为_blank,导致意外新窗口打开
使用 area 时 target 必须配合 href 才生效
<area> 是 void 元素,不支持子内容,它的导航行为完全依赖 href 和 target 的组合。没有 href,target 就是无意义的摆设。
常见错误是只写 target="_self" 却漏掉 href,结果点击无响应。
- 必须同时存在
href(哪怕只是href="#"或href="javascript:void(0)") - 若用
href="#",记得加onclick="return false;"避免页面跳顶 -
href值需符合 URL 语法,相对路径会相对于当前页面解析,不是相对于<map></map>
area target 在不同浏览器中的兼容性差异很小,但 base 标签影响巨大
现代浏览器对 target="_self" 的支持非常统一,问题几乎全出在 <base> 上。一旦页面声明了 <base target="...">,所有 <area>(以及 <a></a>)的 target 都会被覆盖,除非显式重写。
-
<base target="_blank">+<area target="">→ 实际打开新窗口 -
<base target="_blank">+<area target="_self">→ 正确留在当前页 - 检查是否无意引入了
<base>(比如某些 CMS 或构建工具自动注入)
完整可用的 area 示例(带注释)
@@##@@
<map name="building-map"><area shape="rect" coords="10,10,100,100" href="/room/101" target="_self" alt="101房间">
<area shape="circle" coords="200,200,30" href="javascript:alert('%E5%AE%89%E5%85%A8%E5%87%BA%E5%8F%A3')" target="_self" alt="紧急出口"></map>
注意:target="_self" 写在这里不是可选优化,而是防止被 <base> 干扰或浏览器误判的必要写法。空 target 看似省事,实则埋下跨环境失效的隐患。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











