欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值

程序员文章站 2022-04-29 23:33:39
...

本文记录了对HTML中<a>标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值的效果的测试。


 

使用<frame>标签,做一个有框架的网页,为了能看出HTML中<a>标签的target属性的“_self”和“_parent”这2个属性值的不同效果,需要这个网页还有框架的嵌套,框架思路如下图所示:

HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值

该网页由Frame A和Frame B两部分组成,其中Frame B又由Frame B1和Frame B2两部分组成。在Frame B2中设置4个链接,分别用HTML中<a>标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个不同属性值,观察他们的不同效果:

下面先开始写这个网页:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>This is a title</title>
</head>

<frameset cols="25%,75%">

    <frame src="###\Frame_A.html" />
    <frame src="###\Frame_B.html" />

</frameset>

</html>

这只是一个演示,这里用“###”代表具体的路径。

这样网页的效果就是左边25%的部分显示Frame_A.html的网页内容,右边75%的部分显示Frame_B.html的网页内容。

继续做Frame_A.html和Frame_B.html:

Frame_A.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
</head>

<body bgcolor="#8F8FBD">

    <hr />
    <h3>Frame A</h3>
    <hr />

</body>

</html>

Frame_B.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>This is a title</title>
</head>

<frameset rows="25%,75%">

    <frame src="###\Frame_B_1.html" />
    <frame src="###\Frame_B_2.html" />

</frameset>

</html>

同样的,这里只是为了演示,用“###”代表具体的路径。

继续做Frame B1和Frame B2:

Frame_B_1:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
</head>

<body bgcolor="#7FFF00">

    <hr />
    <h3>Frame B1</h3>
    <hr />

</body>

</html>

Frame_B_2:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
</head>

<body bgcolor=#EBC79E">

    <hr />
    <h3>Frame B2</h3>
    <hr />
    <br />

    <hr />
    <p>
        &lt;a href=&quot;###/New_Page.html/&quot; target=&quot;<b>_blank</b>&quot;&gt;This is a
        link...&lt;/a&gt;
    </p>
    <a href="###/New_Page.html" target="_blank">This is a link...</a>
    <hr />
    <br />

    <hr />
    <p>
        &lt;a href=&quot;###/New_Page.html/&quot; target=&quot;<b>_self</b>&quot;&gt;This is a
        link...&lt;/a&gt;
    </p>
    <a href="###/New_Page.html" target="_self">This is a link...</a>
    <hr />
    <br />

    <hr />
    <p>
        &lt;a href=&quot;###/New_Page.html/&quot; target=&quot;<b>_parent</b>&quot;&gt;This is a
        link...&lt;/a&gt;
    </p>
    <a href="###/New_Page.html" target="_parent">This is a link...</a>
    <hr />
    <br />

    <hr />
    <p>
        &lt;a href=&quot;###/New_Page.html/&quot; target=&quot;<b>_top</b>&quot;&gt;This is a
        link...&lt;/a&gt;
    </p>
    <a href="###/New_Page.html" target="_top">This is a link...</a>
    <hr />

</body>

</html>

最后做一下New_Page.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <h1>This is a new page!</h1>
</body>

</html>

在Frame_B_2.html中,有4个连接,都指向同一个网页New_Page.html,他们唯一的不同就是<a>标签中target的属性值不同。

先看一下网页的效果:

HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值

分别点击4个链接,可以发现:

_blank:

HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值

设置target属性值为“_blank”,可以在一个新的窗口中打开链接。

_self:

HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值

设置target属性值为“_self”,会在相同的框架或者窗口中打开链接。

_parent:

HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值

设置target属性值为“_parent”,会在父窗口或者包含来超链接引用的框架的框架集中打开链接。我们可以看到原来的Frame_B_1也被新打开的链接覆盖了。

_top:

HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值

设置target属性值为“_top”,会清除所有被包含的框架,并打开链接。