使用标签的href属性设置外部链接，通过target属性控制打开方式，如_blank在新窗口打开，并结合rel=”noopener noreferrer”提升安全性，防止恶意脚本和隐私泄露，同时可用rel的nofollow、sponsored、ugc等值优化SEO和标注链接类型，还可通过JavaScript动态调整target和rel属性适配不同设备。
HTML设置外部链接，主要就是用
标签，然后
href
属性指向你想链接的网址。
target
属性就有点意思了，它决定了链接是在当前窗口打开，还是新窗口打开，或者在父框架里打开。
解决方案：
要创建外部链接，你只需要一个
标签，然后把
href
属性设置为目标网址。比如，你要链接到Google，代码就这么写：
这会在页面上显示一个“访问Google”的链接，点击它就会跳转到Google的首页。
立即学习“前端免费学习笔记（深入）”；
target
属性可以控制链接的打开方式。常用的值有：
_self
: 这是默认值，在当前窗口/标签页打开链接。
_blank
: 在新的窗口/标签页打开链接。
_parent
: 在父框架中打开链接（如果当前页面在一个框架中）。
_top
: 在整个窗口中打开链接，覆盖所有框架。
举个例子，如果你想让Google链接在新窗口打开，可以这样写：
这样，点击链接后，Google会在一个新的标签页中打开。
如何避免用户点击外部链接后离开我的网站？
使用
target="_blank"
虽然方便，但有个小问题，用户点击后会离开你的网站。更好的做法是，结合
rel="noopener"
或
rel="noreferrer"
。
noopener
阻止新页面访问你的
window.opener
对象，防止恶意脚本利用这个对象进行钓鱼或其他攻击。
noreferrer
更狠，直接不发送
Referer
头，保护用户隐私。
在新窗口安全地打开Google
rel
rel
属性还有哪些其他有用的值？
除了
noopener
和
noreferrer
，
rel
属性还有很多其他有用的值。比如：
nofollow
: 告诉搜索引擎不要追踪这个链接，可以用来避免链接到质量不高的网站而影响你的SEO。
sponsored
: 标记赞助链接或广告链接。
ugc
: 标记用户生成内容链接，比如评论区的链接。
如何使用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
的
标签，然后根据
isMobileDevice()
函数的返回值，动态设置
target
属性。如果是移动设备，就在当前窗口打开；如果是PC，就在新窗口打开，并且加上
noopener noreferrer
属性。
其实
target
属性的使用并不复杂，但理解它的各种取值和应用场景，可以让你更好地控制链接的行为，提升用户体验和安全性。
以上就是HTML如何设置外部链接？a标签的target属性怎么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572834.html
微信扫一扫 
支付宝扫一扫 
