HTML如何设置外部链接？a标签的target属性怎么用？-html教程-PHP中文网

HTML如何设置外部链接？a标签的target属性怎么用？

幻夢星雲

发布： 2025-08-19 17:17:01

原创

687人浏览过

使用<a>标签的href属性设置外部链接，通过target属性控制打开方式，如_blank在新窗口打开，并结合rel="noopener noreferrer"提升安全性，防止恶意脚本和隐私泄露，同时可用rel的nofollow、sponsored、ugc等值优化SEO和标注链接类型，还可通过JavaScript动态调整target和rel属性适配不同设备。

html如何设置外部链接？a标签的target属性怎么用？

HTML设置外部链接，主要就是用

<a>

登录后复制

标签，然后

href

登录后复制

属性指向你想链接的网址。

target

登录后复制

属性就有点意思了，它决定了链接是在当前窗口打开，还是新窗口打开，或者在父框架里打开。

解决方案：

要创建外部链接，你只需要一个

<a>

登录后复制

标签，然后把

href

登录后复制

属性设置为目标网址。比如，你要链接到Google，代码就这么写：

<a href="https://www.google.com">访问Google</a>

登录后复制

这会在页面上显示一个“访问Google”的链接，点击它就会跳转到Google的首页。

立即学习“前端免费学习笔记（深入）”；

target

登录后复制

属性可以控制链接的打开方式。常用的值有：

```
_self
```
登录后复制
: 这是默认值，在当前窗口/标签页打开链接。
```
_blank
```
登录后复制
: 在新的窗口/标签页打开链接。
```
_parent
```
登录后复制
: 在父框架中打开链接（如果当前页面在一个框架中）。
```
_top
```
登录后复制
: 在整个窗口中打开链接，覆盖所有框架。

举个例子，如果你想让Google链接在新窗口打开，可以这样写：

标小兔AI写标书

一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

查看详情

<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);
}

登录后复制

这段代码首先获取一个