胖蔡说技术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中打开并替换。
获取代码
如果觉得对你有用的话，记得扫码关注下微信公众号，会有更多有趣的知识分享给大家。
代码点击获取GitHub示例代码
