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

文章目录

一、a标签

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

属性:

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

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

1、href属性

用法:

html 复制代码
<a href="链接">跳转信息说明</a>

(1)跳转至网络链接页面

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

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

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

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

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

html 复制代码
<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 复制代码
<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 复制代码
<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)跳转至本界面

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

需要"#"进行占位:

html 复制代码
<a href="#">刷新页面</a>
html 复制代码
<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 复制代码
<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 "时

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

二、感谢观看!

相关推荐
kite01211 小时前
浏览器工作原理06 [#]渲染流程(下):HTML、CSS和JavaScript是如何变成页面的
javascript·css·html
крон1 小时前
【Auto.js例程】华为备忘录导出到其他手机
开发语言·javascript·智能手机
zh_xuan2 小时前
c++ 单例模式
开发语言·c++·单例模式
老胖闲聊2 小时前
Python Copilot【代码辅助工具】 简介
开发语言·python·copilot
Blossom.1183 小时前
使用Python和Scikit-Learn实现机器学习模型调优
开发语言·人工智能·python·深度学习·目标检测·机器学习·scikit-learn
曹勖之3 小时前
基于ROS2,撰写python脚本,根据给定的舵-桨动力学模型实现动力学更新
开发语言·python·机器人·ros2
豆沙沙包?3 小时前
2025年- H77-Lc185--45.跳跃游戏II(贪心)--Java版
java·开发语言·游戏
scdifsn4 小时前
动手学深度学习12.7. 参数服务器-笔记&练习(PyTorch)
pytorch·笔记·深度学习·分布式计算·数据并行·参数服务器
军训猫猫头4 小时前
96.如何使用C#实现串口发送? C#例子
开发语言·c#
coding随想4 小时前
JavaScript ES6 解构:优雅提取数据的艺术
前端·javascript·es6