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

article/2025/8/14 22:52:19

文章目录

  • 一、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 "时

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

在这里插入图片描述

二、感谢观看!


http://www.hkcw.cn/article/YSNmuTarOE.shtml

相关文章

【前端开发】一文带你快速入门JavaScript(下)Web 前端必备程序语言 | 条件语句与循环结构

&#x1f4af; 欢迎光临清流君的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落 &#x1f4af; &#x1f525; 个人主页:【清流君】&#x1f525; &#x1f4da; 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 &#x1f4da; &#x1f31f;始终保持好奇心&…

教你在.Net8.0的WinForm中使用WebView2,实现C#和JavaScript的实时双向互操作

1. 前言 随着 Web 技术的发展&#xff0c;使用网页内容&#xff08;HTML、JavaScript、CSS 等&#xff09;作为桌面应用程序的一部分变得越来越常见。在 C# WinForm 中&#xff0c;Microsoft 提供的 WebView2 控件让我们可以轻松地嵌入 Chromium 浏览器&#xff0c;并实现 C# …

【多线程初阶】synchronized锁

文章目录 &#x1f305;synchronized关键字&#x1f30a; synchronized 的互斥&#x1f30a; synchronized 的变种写法&#x1f3c4;‍♂️synchronized 修饰代码块 :明确指定锁哪个对象&#x1f3c4;‍♂️synchronized 修饰方法 &#x1f30a; synchronized 的可重入性&#…

使用 Cython 编译将.py文件加密成.so文件

文章目录 1. .so文件的核心意义和优势2. 使用 Cython 编译&#xff0c;将.py文件加密成.so文件 最近在学习在服务器上如何部署Python模型&#xff0c;不学不知道&#xff0c;一学吓一跳&#xff0c;要学好多啊&#xff0c;最近看到什么就记录一下什么吧。 1. .so文件的核心意义…

环赛里木湖公路自行车赛开赛 速度与激情点燃丝路热土

5月31日上午10时,中国新疆第十七届环赛里木湖(国际)公路自行车赛在精河县鸣枪开赛。首段比赛全长83.1公里,以速度与激情点燃了“中国枸杞之乡”精河县的丝路热土。骑手们从精河县出发,沿精阿高速疾驰,穿越艾比湖湿地和甘家湖梭梭林国家级自然保护区。开赛后仅10分钟,在顺…

南京大学通报施工方偷窃物品 施工单位被罚2000元

5月29日,南京大学基本建设处发布了一份关于对南京诚善科技有限公司执行合同违约金的通报。通报指出,南京大学三校区公共区域饮水机采购及安装项目的施工单位南京诚善科技有限公司的一名员工于5月13日在学校宿舍楼内偷窃学生物品。根据施工合同相关规定并经处办公会研究确认,…

java 反射 枚举与lambda表达式

目录 一.反射 1.概念&#xff1a;在运⾏时检查、访问和修改类、接⼝、字段和⽅法的机制 2.Class类 3.反射相关的类型 4.各类型对应的方法 ​编辑 5.代码示例 (1).class类方法 (2).Field类方法 (3).Constructor类方法 (4).Method类方法 6.总结 二.枚举 1.概念&#x…

【AI大模型】Ollama部署本地大模型DeepSeek-R1,交互界面Open-WebUI,RagFlow构建私有知识库

文章目录 DeepSeek介绍公司背景核心技术产品与服务应用场景优势与特点访问与体验各个DeepSeek-R系列模型的硬件需求和适用场景 Ollama主要特点优势应用场景安装和使用配置环境变量总结 安装open-webui下载和安装docker desktop配置镜像源安装open-webui运行和使用 RagFlow介绍主…

DeepSeek:全栈开发者视角下的AI革命者

无论是想要学习人工智能当做主业营收&#xff0c;还是像我一样作为开发工程师但依然要了解这个颠覆开发的时代宠儿&#xff0c;都有必要了解、学习一下人工智能。 近期发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;入行门槛低&#x…

什么是贝叶斯优化(Bayesian Optimization)?

贝叶斯最优化&#xff08;Bayesian Optimization&#xff09;是一种用于函数全局最优化的策略&#xff0c;特别适用于那些计算代价昂贵的黑箱函数&#xff08;如机器学习模型的超参数调优&#xff09;。其核心思想是通过构建一个代理模型&#xff08;通常是高斯过程或随机森林&…

Spring AI+DeepSeek快速构建AI智能机器人

引言 在AI技术蓬勃发展的当下&#xff0c;Spring生态推出了Spring AI项目&#xff0c;为Java开发者提供了便捷的AI集成方案。本文将演示如何用Spring AIDeepSeek V3 快速搭建一个具备自然语言处理能力的智能对话机器人。 一、环境准备 JDK 17 Maven/Gradle构建工具 DeepSe…

【大模型科普】大模型:人工智能的前沿(一文读懂大模型)

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈人工智能与大模型应用 ⌋ ⌋ ⌋ 人工智能&#xff08;AI&#xff09;通过算法模拟人类智能&#xff0c;利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络&#xff08;如ChatGPT&…

借用AI工具(cursor/vscode) 调试matlab代码(2025.4最新实测)

本文实测环境&#xff1a;MATLAB 2025a Windows 11 本文亮点&#xff1a;无需重写Python&#xff01;用AI直接优化现有MATLAB工程 一、AI调试MATLAB的紧迫性 因为matlab无法内置ai 工具 &#xff0c;别人都有的不能out了 另外说一声matlba2025a已经很改版很多了&#xff0c;与…

5 分钟用满血 DeepSeek R1 搭建个人 AI 知识库(含本地部署)

最近很多朋友都在问:怎么本地部署 DeepSeek 搭建个人知识库。 老实说,如果你不是为了研究技术,或者确实需要保护涉密数据,我真不建议去折腾本地部署。 为什么呢? 目前 Ollama 从 1.5B 到 70B 都只是把 R1 的推理能力提炼到 Qwen 和 Llama 的蒸馏版本上。 虽说性能是提升…

灰狼优化算法(GWO)(含ai创作)

GWO简介 灰狼优化算法&#xff08;Grey Wolf Optimizer&#xff0c;GWO&#xff09;是一种模仿灰狼狩猎行为的群体智能优化算法&#xff0c;由Seyedali Mirjalili等人在2014年提出。这种算法主要模拟了灰狼的社会等级结构和狩猎策略&#xff0c;用于解决各种优化问题。 在灰狼…

5步掌握MCP HTTP模式部署:从零开始搭建你的AI“邮局”!

&#x1f525;关注墨瑾轩&#xff0c;带你探索编程的奥秘&#xff01;&#x1f680; &#x1f525;超萌技术攻略&#xff0c;轻松晋级编程高手&#x1f680; &#x1f525;技术宝库已备好&#xff0c;就等你来挖掘&#x1f680; &#x1f525;订阅墨瑾轩&#xff0c;智趣学习不…

基于DeepSeek-Coder,实现Microi吾码低代码平台AI代码辅助生成的思路设想【辅助代码生成】

文章目录 引言一、整体架构设计二、实现流程与关键技术1. 构建领域数据集2. 模型训练与微调3. 生成代码的安全控制4. 平台集成与交互设计 三、效果优化与评估1. 效果展示2. 评估指标 四、未来优化方向结语 引言 低代码开发平台&#xff08;Microi吾码&#xff09;通过可视化交…

【DeepSeek+即梦AI:零基础生成专业级AI图片全流程指南(2025实战版)】

第一部分:工具认知篇——认识你的数字画笔 1.1 工具定位与核心价值 (讲师开场白)各位同学好,今天我们要解锁的是AI创作领域最具生产力的组合工具——DeepSeek+即梦AI。就像画家需要画笔与颜料,这对组合就是你的数字创作套装: • DeepSeek:国内顶尖的智能提示词工程师 …

【Ai学习】利用扣子(Coze)简单搭建图像生成工作流(小白初学版)

开始之前我们先了解一下我们准备使用的工具。 什么是扣子&#xff08;Coze&#xff09;&#xff1f; 官网链接&#xff1a;扣子 扣子&#xff08;Coze&#xff09;是一个开源的AI工具开发平台&#xff0c;提供了丰富的API和简单易用的界面&#xff0c;帮助用户快速搭建各种A…

AIGC时代——语义化AI驱动器:提示词的未来图景与技术深潜

文章目录 一、技术范式重构&#xff1a;从指令集到语义认知网络1.1 多模态语义解析器的进化路径1.2 提示词工程的认知分层 二、交互革命&#xff1a;从提示词到意图理解2.1 自然语言交互的认知进化2.2 专业领域的认知增强 三、未来技术图谱&#xff1a;2025-2030演进路线3.1 20…