HTML area标签target设置_blank使用教程-html教程-PHP中文网

area标签的target属性能用，但必须嵌套在map中且img通过usemap正确关联，否则不生效；target="_blank"需配合rel="noopener noreferrer"防安全风险，而area本身不支持rel属性，须用js或包裹标签实现。

html area标签target设置_blank使用教程

area 标签的 target 属性能用 _blank，但必须嵌套在 map 中，且对应 img 必须通过 usemap 正确绑定 —— 单独写 <area> 不会生效。

这不是代码写错了，而是结构缺失导致浏览器根本没解析热区行为。area 本身不渲染、不触发导航，它只是 map 定义的一部分，只有当它被 img + usemap 关联后，浏览器才把它当作可点击区域处理。

常见错误：直接写 <area shape="rect" coords="0,0,100,100" href="page.html" target="_blank">，但没包在 <map></map> 里，也没配 <img usemap="#mymap">
验证是否生效：右键图片 → “检查元素”，看是否能定位到 <area> 节点，并确认其父节点是 <map name="mymap"></map>
如果用了 target="_blank" 却没开新页，先检查控制台有没有 Unsafe usage of target="_blank" 警告 —— 缺少 rel="noopener noreferrer" 会导致 Chrome/Firefox 主动降级为当前页跳转

area 标签本身不支持 rel 属性，这是关键限制。你不能给 <area> 写 rel="noopener"，浏览器会忽略它。所以安全方案只能靠间接补救：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

把 target="_blank" 的逻辑转移到包裹它的 <a></a> 上：比如用 CSS 隐藏 <a></a>，再用 position: absolute 覆盖热区位置，实际点击的是 <a href="..." target="_blank" rel="noopener noreferrer"></a>
或者用 JS 拦截 area 点击：document.querySelector('area[href]').addEventListener('click', e => { e.preventDefault(); window.open(e.target.href, '_blank', 'noopener'); });
注意：window.open(..., '_blank', 'noopener') 中的 noopener 是 features 字符串参数，不是 HTML 属性，它在 Safari 12.1+ 和 Chrome 65+ 有效，IE 不支持

如果图像热区嵌在 iframe 里，而你想让链接在顶层窗口打开，只写 target="_top" 或 target="_blank" 很可能失败 —— 尤其当 iframe 带 sandbox 属性时。

sandbox 默认禁用弹窗和跨上下文导航，必须显式加 allow-popups 和 allow-top-navigation 才能让 target="_top" 生效
target="_blank" 在 sandboxed iframe 中会被静默忽略，不会报错，但也不会开新页
目标 iframe 必须有 name 属性（不是 id），例如 <iframe name="detail"></iframe>，area 才能通过 target="detail" 把内容载入其中
如果热区在子 iframe，目标是父页面的某个命名 iframe，area 的 target 无法跨域或跨 sandbox 边界工作，此时只能用 parent.postMessage() + 父页监听来中转跳转

area 的 target 只决定“去哪打开”，不控制“怎么打开”。它没法指定新标签页宽高、是否显示工具栏、是否允许缩放 —— 这些都得靠 window.open()。

target="_blank" 的实际打开方式（新标签页 or 新窗口）由用户浏览器设置决定，开发者无法强制
想确保弹出独立窗口（比如 800×600 的帮助面板），必须放弃 <area> 的声明式跳转，改用 JS：window.open(url, 'help-win', 'width=800,height=600,noopener')
自定义 target="mywin" 名称复用行为在移动端 WebView 中极不可靠，部分 Android WebView 默认禁用多窗口，即使写了也静默退化为 _self

真正容易被忽略的点是：area 的 target 不是“功能开关”，而是“上下文路由指令”；它依赖完整、静态、可预测的 DOM 结构 —— 任何动态插入 map、JS 修改 usemap、或 CSP 策略限制 navigate-to，都会让这个属性彻底失效。