【前端】超链接标签（a标签）之href属性、target属性

文章目录

• 一、a标签
• • 1、href属性
  • • （1）跳转至网络链接页面
    • （2）跳转至其它工程页面
    • （3）跳转至本界面
  • 2、target属性
• 二、感谢观看！

一、a标签

a标签即超链接标签，根据名字我们就能知道它是用来链接的。

属性：

href：必须具备，表示点击后会跳转到哪个页面

target：打开方式，默认是_self，如果是_blank则用新的标签页打开。

1、href属性

用法：

<a href="链接">跳转信息说明</a>

（1）跳转至网络链接页面

注：当只给链接，没给跳转信息说明时，页面会无法显示超链接：

<html>
    <head>
        <title> 这是页面标题 </title>
    </head>
    <body>
        前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为"客户端"。<br/>
        它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
        简单来说，前端就是用户眼前的一切。
        <a href="https://www.baidu.com/"></a>
    </body>
</html>

进入页面后，如图所示，未成功显示超链接：

原因：当bref的宽度或高度中任一个为0时，无法显示。点击f12，查看代码：

我们这时只需加入跳转信息说明即可：

<html>
    <head>
        <title> 这是页面标题 </title>
    </head>
    <body>
        前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为"客户端"。<br/>
        它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
        简单来说，前端就是用户眼前的一切。
        <a href="https://www.baidu.com/">跳转到百度</a>
    </body>
</html>

（2）跳转至其它工程页面

只需将链接改为对应工程名即可。

如图，目前的页面有三个：demo01.html、demo02.html、html01.html

现在，我要通过超链接，直接从html01.html中跳转访问demo01.html的页面：

<html>
	 <!-- 这是html01.html程序 -->
    <head>
        <title> 这是页面标题 </title>
    </head>
    <body>
        前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为"客户端"。<br/>
        它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
        简单来说，前端就是用户眼前的一切。
        <br/>
        <a href="https://www.baidu.com/">跳转到百度</a>
        <a href="demo01.html">跳转至demo01页面</a>
    </body>
</html>

<html>
    <!-- 这是demo01.html程序 -->
    <head>
        <title> 这是页面标题 </title>
    </head>
    <body>
        前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为"客户端"。<br/>
        它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。<br/>
        简单来说，前端就是用户眼前的一切。<br/>
        <img src="https://b0.bdstatic.com/be03cd442c30a8d4e9bbe06adc3197bf.jpg@h_1280" alt="图片加载失败，请检查链接是否正确！"
             title="这张图片很棒！"
             width="200px"
             height="200px"
             border="5px" >

    </body>
</html>

html01.html的页面：

跳转后的demo01.html所对应的页面：

（3）跳转至本界面

相当于一个刷新按钮，点击一下，进行页面刷新！

需要"#"进行占位：

<a href="#">刷新页面</a>

<html>
    <!-- 这是html01.html程序 -->
    <head>
        <title> 这是页面标题 </title>
    </head>
    <body>
        前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为"客户端"。<br/>
        它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
        简单来说，前端就是用户眼前的一切。
        <br/>
        <a href="https://www.baidu.com/">跳转到百度</a>
        <a href="demo01.html">跳转至demo01页面</a>
        
        <a href="#">刷新页面</a>
    </body>
</html>

2、target属性

target属性有两个属性值：_self、_blank，决定页面的打开方式。_self为默认打开方式，即我们正常打开时所看到的，而_blank则是用新的标签页打开。

用法：

<html>
    <!-- 这是html01.html程序 -->
    <head>
        <title> 这是页面标题 </title>
    </head>
    <body>
        前端指的是用户在使用网站或应用程序时直接看到和与之交互的部分，也称为"客户端"。<br/>
        它负责将数据以视觉化、交互化的方式呈现给用户，并处理用户的输入行为（如点击、滑动、输入等）。
        简单来说，前端就是用户眼前的一切。
        <br/>
        <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
        <a href="demo01.html">跳转至demo01页面</a>
        <a href="#">刷新页面</a>
    </body>
</html>

• target="_self "时

点击"跳转到百度"后，标签栏仍然只有一个，原页面被覆盖了：

• target="_blank "时

点击"跳转到百度"后，标签栏增加一个，原页面仍被保存：

二、感谢观看！