登录
首页 >  文章 >  前端

HTML外部链接打开方式设置方法

时间:2025-08-04 14:35:29 172浏览 收藏

golang学习网今天将给大家带来《HTML中可通过target属性设置外部链接的打开方式。常用值有:_blank:在新标签页打开(推荐用于外部链接)_self:在当前标签页打开(默认值)_parent:在父框架中打开_top:在整个窗口中打开,忽略框架示例代码:访问外部网站优化后的SEO标题: HTML如何设置外部链接打开方式》,感兴趣的朋友请继续看下去吧!以下内容将会涉及到等等知识点,如果你是正在学习文章或者已经是大佬级别了,都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家!

控制HTML外部链接打开方式最直接的方法是使用target="_blank",同时需添加rel="noopener noreferrer"以防止安全风险。此外,target属性还支持_self(默认,在当前页打开)、_parent(在父框架打开)和_top(在顶层窗口打开),但除_blank外,其他值在现代网页设计中较少使用。

HTML中如何标记外部链接的打开方式?

控制HTML中外部链接的打开方式,最直接的方法就是利用target属性。通常,我们希望外部链接能在新的浏览器标签页或窗口中打开,以保持用户当前页面的不中断。

HTML中如何标记外部链接的打开方式?

解决方案

核心在于(锚点)标签里的target属性。当你需要一个链接在新标签页或新窗口中打开时,将其设置为target="_blank"。这很简单,比如:访问示例网站。除了_blank,还有一些其他值,如_self(在当前框架或窗口中打开,这是默认行为)、_parent(在父框架中打开)和_top(在整个窗口中打开)。但对于指向站外资源的链接,_blank几乎是唯一的选择。

为什么外部链接常会选择在新标签页打开?

这其实是出于多方面的考量,尤其是在用户体验和网站自身流量管理上。

HTML中如何标记外部链接的打开方式?

从用户体验(UX)的角度看,当用户点击一个指向外部网站的链接时,如果当前页面被直接替换掉,他们可能会感到困惑或不便。想象一下,你正在阅读一篇深度文章,里面引用了一个外部资料,你点击后,文章页面就消失了。这无疑会打断阅读流程,甚至可能让用户忘记回到你的网站。让链接在新标签页打开,意味着用户的主动阅读进程不会被打断,他们可以随时回到你的页面继续浏览。这是一种对用户选择权的尊重,也是一种更流畅的导航体验。

对于网站运营者来说,这直接关系到网站的“留存率”。如果用户因为点击外部链接而离开了你的网站,他们可能就此一去不复返。而新标签页的策略,确保了你的网站始终在后台保持开放,用户可以轻松地切换回来。这就像是给用户留了一条“后路”,让他们在探索外部世界的同时,你的“家”依然亮着灯。虽然看起来只是一个小小的技术细节,但它在无形中帮助你的内容保持了更高的可见度和可访问性。有时候,我甚至会觉得,这是一种微妙的“挽留”策略,但它的出发点确实是提升用户体验。

HTML中如何标记外部链接的打开方式?

使用 target="_blank" 是否存在安全隐患,又该如何规避?

是的,target="_blank"确实存在一个被称为“Tabnabbing”(标签劫持)的安全隐患,如果处理不当的话。这听起来有点像间谍电影里的情节,但它在网络世界中是真实存在的。

具体来说,当你使用target="_blank"打开一个新标签页时,新打开的页面(外部网站)可以通过window.opener这个JavaScript对象,访问并修改原始页面(你的网站)的一些属性。最常见的攻击方式就是,恶意网站会利用window.opener.location来将你的原始页面重定向到一个看起来很像你网站的钓鱼页面。比如,它可能伪装成一个登录失效的提示,诱导用户重新输入账号密码。当用户从新标签页切换回你的网站时,看到的是一个假冒的登录页,如果不加注意,就可能泄露敏感信息。这是一种非常隐蔽的攻击,因为它利用了浏览器标签页之间的信任关系。

幸运的是,解决这个问题的方法非常简单且有效:在你的标签中同时添加rel="noopener noreferrer"属性。

所以,一个安全的外部链接应该像这样:访问外部资源。这几个小小的属性,为你的用户和网站筑起了一道重要的安全防线。我个人觉得,任何用到target="_blank"的地方,都应该把rel="noopener noreferrer"当作标配,这已经成了我写HTML时的一个习惯动作。

除了 _blank,还有哪些 target 值,它们在什么场景下有用?

除了最常见的_blank,HTML的target属性还有几个内置值,以及支持自定义命名。它们在特定的场景下会有用,但坦白说,在现代网页设计中,它们的使用频率远不如_blank

  • _self (默认值): 这是当你没有指定target属性时的默认行为。链接会在当前浏览上下文(也就是当前标签页或窗口)中打开。这非常适合内部链接,比如你的网站导航、文章内部的跳转链接。用户点击后,当前页面会被新内容替换,这符合用户在网站内部进行导航的预期。比如,从首页点击“关于我们”,你肯定希望它在同一个页面里加载出来,而不是弹出一个新窗口。

  • _parent: 这个值专门用于当你的网页被嵌入在