html a标签

最新推荐文章于 2024-05-14 20:08:50 发布

芊嵛

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量982

点赞数 25

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_55410341/article/details/135155777

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

a标签

文章目录

a标签

一、框架

<a href=""></a>

二、去除下划线

a {
    /* 去处下划线 */
    text-decoration: none;
}

三、属性

1.`target`

值	描述
_blank	在新窗口或选项卡中打开链接文档。
_self	在与点击相同的框架中打开链接的文档（默认）。
_parent	在父框架中打开链接文档。
_top	在窗口的整个主体中打开链接的文档。
framename	在指定的 iframe 中打开链接文档。

最常用的：_blank与_self

下面我说一下我对_self、_parent、_top的看法，需要借助iframe

在这里插入图片描述

第一层GrFa.html

里面分为两块Fa.html与mo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        body {
            background-color: orange;
        }
    </style>
    <iframe src="Fa.html">框架A1</iframe>
    <iframe src="mo.html">框架A2</iframe>
</body>

</html>

mo.html模块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>mo</p>
</body>

</html>

Fa.html模块

分为两块A1.html和A2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        body {
            background-color: aquamarine;
        }
    </style>
    <iframe src="A1.html">框架A11</iframe>
    <iframe src="A2.html">框架A21</iframe>
</body>

</html>

A1.html

A1中有三个跳转parent.html、self.html、top.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        body {
            background-color: rgb(209, 51, 209);
        }
    </style>
    <a href="parent.html" target="_parent">parent</a>
    <a href="self.html" target="_self">self</a>
    <a href="top.html" target="_top">top</a>

</body>

</html>

A2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        body {
            background-color: blanchedalmond;
        }
    </style>
    <p>A2</p>
</body>

</html>

parent.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>parent</p>
</body>

</html>

self.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>self</p>
</body>

</html>

top.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>top</p>
</body>

</html>