使用标签的href属性设置外部链接，通过target属性控制打开方式，如_blank在新窗口打开，并结合rel=”noopener noreferrer”提升安全性，防止恶意脚本和隐私泄露，同时可用rel的nofollow、sponsored、ugc等值优化SEO和标注链接类型，还可通过JavaScript动态调整target和rel属性适配不同设备。
html设置外部链接，主要就是用
<a>
标签，然后
href
属性指向你想链接的网址。
target
属性就有点意思了，它决定了链接是在当前窗口打开，还是新窗口打开，或者在父框架里打开。
解决方案：
要创建外部链接，你只需要一个
<a>
标签，然后把
href
属性设置为目标网址。比如，你要链接到Google，代码就这么写：
<a href="https://www.google.com">访问Google</a>
这会在页面上显示一个“访问Google”的链接，点击它就会跳转到Google的首页。
立即学习“前端免费学习笔记（深入）”；
target
属性可以控制链接的打开方式。常用的值有：
-
_self
: 这是默认值，在当前窗口/标签页打开链接。
-
_blank
: 在新的窗口/标签页打开链接。
-
_parent
: 在父框架中打开链接（如果当前页面在一个框架中）。
-
_top
: 在整个窗口中打开链接，覆盖所有框架。
举个例子，如果你想让Google链接在新窗口打开，可以这样写：
<a href="https://www.google.com" target="_blank">在新窗口打开Google</a>
这样，点击链接后，Google会在一个新的标签页中打开。
如何避免用户点击外部链接后离开我的网站？
使用
target="_blank"
虽然方便，但有个小问题，用户点击后会离开你的网站。更好的做法是，结合
rel="noopener"
或
rel="noreferrer"
。
noopener
阻止新页面访问你的
window.opener
对象，防止恶意脚本利用这个对象进行钓鱼或其他攻击。
noreferrer
更狠，直接不发送
Referer
头，保护用户隐私。
rel
rel
属性还有哪些其他有用的值？
除了
noopener
和
noreferrer
，
rel
属性还有很多其他有用的值。比如：
-
nofollow
: 告诉搜索引擎不要追踪这个链接，可以用来避免链接到质量不高的网站而影响你的SEO。
-
sponsored
: 标记赞助链接或广告链接。
-
ugc
: 标记用户生成内容链接，比如评论区的链接。
<a href="https://www.example.com/bad-site" rel="nofollow">不要追踪这个链接</a> <a href="https://www.example.com/sponsored-content" rel="sponsored">这是一个赞助链接</a> <a href="https://www.example.com/user-generated-content" rel="ugc">用户生成内容链接</a>
如何使用JavaScript动态设置或修改
target
target
属性？
有时候，你可能需要用JavaScript来动态控制链接的打开方式。比如，根据用户的设备类型，决定是在当前窗口打开，还是在新窗口打开。
const link = document.getElementById('myLink'); if (isMobileDevice()) { link.target = '_self'; // 移动设备上在当前窗口打开 } else { link.target = '_blank'; // PC上在新窗口打开 link.rel = 'noopener noreferrer'; // 加上安全属性 } function isMobileDevice() { return /Android|webOS|iphone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); }
这段代码首先获取一个
id
为
myLink
的
<a>
标签，然后根据
isMobileDevice()
函数的返回值，动态设置
target
属性。如果是移动设备，就在当前窗口打开；如果是PC，就在新窗口打开，并且加上
noopener noreferrer
属性。
其实
target
属性的使用并不复杂，但理解它的各种取值和应用场景，可以让你更好地控制链接的行为，提升用户体验和安全性。
