关于HTML中-<a>-双标签-元素-及-target属性-的使用与说明

Posted on 2026-01-26 10:34 520_1351 阅读(2) 评论(0) 收藏举报

<a> 标签的 target 属性用于指定链接内容在何处显示，即点击链接后，目标页面是在当前窗口、新窗口、还是某个特定的 <iframe> 或 <frame> 中打开。

关于<a>标签，最简单的写法如下（如果没有指定target、默认是会在新的标签中的打开的）：

<a href="https://www.cnblogs.com/5201351">在当前标签页中打开</a>

常见 target 值，如下：

_self 默认值。在当前窗口或标签页中加载链接内容。

_blank 在新窗口或新标签页中打开链接（取决于浏览器设置）。

_parent 在父级浏览上下文中打开（用于嵌套框架，如 iframe 嵌套）。

_top 在最顶层的窗口中打开，取消所有框架嵌套（常用于跳出 iframe）。

<framename> 在指定名称的 <iframe> 或 <frame> 中打开（需与 name 属性匹配）。

++++++++ 如下通过代码很明显的看出来， _self 、_blank、_parent 、_top 的区别

1、创建 main.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>顶层页面 - main.html</title>
  <style>body { background: #e3f2fd; padding: 20px; font-family: sans-serif; }</style>
</head>
<body>
  <h2 style="color: #0d47a1;">🔷 这是最顶层页面（main.html）</h2>
  <p>它嵌入了 <code>iframe-A.html</code>：</p>
  <iframe src="iframe-A.html" width="100%" height="400" style="border: 2px solid #1976d2;"></iframe>
</body>
</html>

2、创建 iframe-A.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>第一层 iframe - iframe-A.html</title>
  <style>body { background: #fff8e1; padding: 15px; font-family: sans-serif; }</style>
</head>
<body>
  <h3 style="color: #ff8f00;">🟠 这是第一层 iframe（iframe-A.html）</h3>
  <p>它又嵌入了 <code>iframe-B.html</code>：</p>
  <iframe src="iframe-B.html" width="100%" height="250" style="border: 2px solid #ffa000;"></iframe>
</body>
</html>

3、创建 iframe-B.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>第二层 iframe - iframe-B.html</title>
  <style>
    body { background: #f1f8e9; padding: 15px; font-family: sans-serif; }
    a {
      display: block;
      margin: 12px 0;
      padding: 10px;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      font-weight: bold;
    }
    .self    { background: #4caf50; }
    .parent  { background: #ff9800; }
    .top     { background: #2196f3; }
    .blank   { background: #9c27b0; }
    h3 { color: #33691e; margin-top: 0; }
  </style>
</head>
<body>
  <h3>🟢 这是第二层 iframe（iframe-B.html）</h3>
  <p>点击下方链接，观察跳转位置：</p>

  <a href="target-page.html" class="self"    target="_self">1. _self → 在当前 iframe（B）中打开</a>
  <a href="target-page.html" class="parent"  target="_parent">2. _parent → 在父 iframe（A）中打开</a>
  <a href="target-page.html" class="top"     target="_top">3. _top → 在最顶层页面（main.html）中打开</a>
  <a href="target-page.html" class="blank"   target="_blank" rel="noopener noreferrer">4. _blank → 新标签页打开</a>
</body>
</html>

4、创建target-page.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>目标页面</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 30px;
      text-align: center;
      background: #fce4ec;
    }
    h1 { color: #d81b60; }
  </style>
</head>
<body>
  <h1>🎯 你成功跳转到了 target-page.html！</h1>
  <p>注意：这个页面现在出现在哪个层级？</p>
  <button onclick="history.back()">返回</button>
</body>
</html>

最后分别点击4个代表不同的target位置的超链接，就可以看到会在不同的位置打开了

尊重别人的劳动成果转载请务必注明出处：https://www.cnblogs.com/5201351/p/19531927

刷新页面返回顶部

公告

关于HTML中-<a>-双标签-元素-及-target属性-的使用与说明