专业编程基础技术教程

网站首页 > 基础教程 正文

简单说一说a标签的几种跳转方式 a标签 跳转

ccvgpt 2024-10-17 08:56:26 基础教程 9 ℃

a标签在网页中是被用来链接其他页面而使用的，今天我们我简单了解下a标签的几种跳转方式。以便于我们更加深入的了解a标签。

使用

如下提供一个简单的a标签的使用方法

简单说一说a标签的几种跳转方式 a标签 跳转

<a href="https://www.enjoytoday.cn" target="_blank">胖蔡叨叨叨</a>

如上，href属性就是我们控制a标签需要跳转到的目标地址，而target就是我们控制跳转方式的属性。

跳转方式

属性值

target属性值支持的值集如下：

  • _blank：这个就是上面设置的属性值，也是我们比较常用到的，表示跳转到一个新页面打开，会打开一个新的页面窗口
  • _self：这个属性值是指直接在当前页面打开a标签的链接，这也是a标签的默认设置
  • _parent：这个就需要结合框架类型frame一起使用，设置这个属性表示当前frame引用的html代码中的a标签将在它的父框架中打开（替换）。
  • _top：同_parent类似，这个属性值会控制页面在当前框架的最顶部显示。

案例

创建文件

1、常见一个nav.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      width: 100%;
      height: 300px;
      margin: 0;
      background-color: #bbef88;
    }
  </style>
</head>

<body>

  我是nav.html
</body>
</html>

2、创建一个center.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      margin: 0;
      width: 100%;
      height: 500px;
      background-color: #2196F3;
    }
   .btn {
      display:inline-block;
      padding:8px 15px;
      background:green;
      color:white;
      margin: 30px 100px;
  }
  </style>
</head>

<body>
  我是center.html
  <a class="btn" href="https://www.enjoytoday.cn/" target="_self" style="color: #fff;text-decoration: none;">跳转到胖蔡叨叨叨</a>
</body>
</hml>

3、创建一个header.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      width: 100%;
      height: 300px;
      margin: 0;
      background-color: #FF952C;
    }
  </style>
</head>

<body>
  我是header.html
</body>
</html>

4、创建一个content.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      height: 600px;
      background-color: #FFCC00;
      display: flex;
      margin: 0;
    }

    iframe {
      height: 500px;
    }
  </style>
</head>

<body>
  <iframe src="nav.html" frameborder="0" style="width: 200px;"></iframe>
  <iframe src="center.html" frameborder="0" style="width: 1300px"></iframe>
</body>
</html>

5、创建一个index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <title>a标签的4中打开跳转方式</title>
  <style>
    body {
      width: 1500px;
      margin: 10px auto;
      display: flex;
      flex-direction: column;
    }

    iframe {
      width: 100%;
    }
  </style>
</head>

<body>
  <iframe src="header.html" frameborder="0" height="300px"></iframe>
  <iframe src="content.html" frameborder="0" height="600px"></iframe>
</body>
</html>

修改属性值

通过上述的代码我们可以通过改变center.html中a标签的target值看了解下不同跳转方式的区别：

  • target为_self

直接在center.html中打开替换

  • target为_blank

打开一个新的tab页去显示

  • target为_parent

会在center.html上层content.html打开替换

  • target为_top

会在最顶层main.html中打开并替换。

Tags：

猜你喜欢

最近发表
标签列表