使用<a>标签的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头，保护用户隐私。
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">在新窗口安全地打开Google</a>
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
属性？
有时候，你可能需要用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属性的使用并不复杂，但理解它的各种取值和应用场景，可以让你更好地控制链接的行为，提升用户体验和安全性。
