HTML--超链接

超链接

作用:点击跳转到相应位置

a标签

语法:

<a href="链接地址">文本或图片</a>

范例:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title>跳转到百度</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a><br/>
    <a href="小猫.jpg">看看小猫</a>
</body>
</html>

如上代码,在网页打开可以看到如下效果,点击百度跳转到百度首页,点击看看小猫可以打开··小猫.jpg查看在这里插入图片描述
拓展:
在百度首页,点击百度的图片可以跳转到新页面,所以图片也可以接入超链接。
范例:
如下范例中,网页显示百度图片,点击跳转搜狗首页

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title>跳转到百度</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a><br/>
    <a href="小猫.jpg">看看小猫</a><br/>
    <a href="https://www.sogou.com/"><img src="baidu.png"></a>
</body>
</html>

在这里插入图片描述

target属性

定义打开超链接的方式,默认状况下是在当前页面打开超链接,常用的是在新页面打开超链接
用法:

<a href="链接地址" target="_self">在当前页面打开超链接</a>
<a href="链接地址" target="_blank">在新页面打开超链接</a>
<a href="链接地址" target="_parent">在父页面打开超链接</a>
<a href="链接地址" target="_top">在顶层页面打开超链接</a>

内部链接

顾名思义,跳转到自己的HTML页面上
比如我这个项目下有多个HTML文件,我可以从一个跳转到另一个指定的HTML文件下
效果:点击网页会跳转显示20240111.html的内容
在这里插入图片描述

锚点链接

使用锚点链接跳转到当前网页的指定位置,类似目录,点击目录跳转到目录所在段落
对于有很长页面的网页这个东西才有用,可以帮助使用者快速跳转到相应为止开始浏览网页。
或者很多网页的回到顶层按钮也是基于这个吧?

用法:注意不要漏了锚点名前面的 # 号

<div>
	<a href="#锚点名">锚点描述</a>
</div>
</div id="锚点名">
	...
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/317173.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

程序员如何弯道超车?周末有奇效

作为一名程序员&#xff0c;不断提升自己的技能和知识是至关重要的。然而&#xff0c;在繁忙的工作日常中&#xff0c;很难有足够的时间和精力来学习新技术或深入研究。因此&#xff0c;周末成为了一个理想的时机&#xff0c;可以专注于个人发展和技能提升。所以程序员如何利用…

部署Tomcat及其负载均衡

简介 在前面已经学习了Nginx服务器的安装配置&#xff0c;本章主要采用案例课的形式介绍Tomcat及NginxTomcat负载均衡群集。Tomcat案例首先介绍其应用场景&#xff0c;然后重点介绍Tomcat的安装配置&#xff0c;NginxTomcat负载均衡群集案例是应用于生产环境下的一套可靠的Web站…

006集 正则表达式 re 应用实例—python基础入门实例

正则表达式指预先定义好一个 “ 字符串模板 ” &#xff0c;通过这个 “ 字符串模 板” 可以匹配、查找和替换那些匹配 “ 字符串模板 ” 的字符串。 Python的中 re 模块&#xff0c;主要是用来处理正则表达式&#xff0c;还可以利用 re 模块通过正则表达式来进行网页数据的爬取…

NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态

原文&#xff1a;3 Modularity, Objects, and State 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 变化中安宁 &#xff08;即使它在变化&#xff0c;它仍然保持不变。&#xff09; ——赫拉克利特 变化越大&#xff0c;越是相同。 ——阿方斯卡尔 前面的章节介绍了构…

C++学习笔记——友元、嵌套类、异常

目录 一、友元 一个使用友元的示例代码 输出结果 二、嵌套类 一个使用嵌套类的示例代码 输出结果 三、异常 一个使用异常处理的示例代码 输出结果 四、结论 五、使用它们的注意事项 上一篇文章链接&#xff1a; C中的继承和模板是非常强大和灵活的特性&#xff0c;它…

C++学习笔记——标准模板库

目录 一、简介 二、STL概述 2.1STL是什么&#xff1f; 2.2STL的优势 三、容器&#xff08;Containers&#xff09; 3.1序列式容器&#xff08;Sequence Containers&#xff09; 3.2关联式容器&#xff08;Associative Containers&#xff09; 3.3容器适配器&#xff08;…

轻松批量重命名不同路径文件:从1到N的单独编号指南

在处理大量文件时&#xff0c;有时要批量重命名这些文件。整理、归档或是进行其他类型的处理。但不同的文件可能位于不同的路径下&#xff0c;增加了批量重命名的复杂性。下面来看云炫文件管理器如何批量重命名不同路径下的文件&#xff0c;从1到N单独编号的方法。 不同路径文件…

考研经验总结——目录

文章目录 一、写作顺序二、个人情况说明三、读评论四、一些小牢骚五、一些注意事项&#xff08;持续更新&#xff09; 一、写作顺序 我将准备从三个阶段开始介绍吧 考研前考研中考研后&#xff08;也就是现在我的这种情况&#xff09; 考研前我会分为&#xff1a;数学、专业…

三轴加速度计LIS2DW12开发(3)----检测活动和静止状态

e2studio开发三轴加速度计LIS2DW12.3--检测活动和静止状态 概述视频教学样品申请源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置UART配置UART属性配置设置e2studio堆栈e2studio的重定向printf设置R_SCI_UART_Open()函数原型回调函数user_uart_callback ()…

vue3+vite开发生产环境区分

.env.development VITE_APP_TITLE本地.env.production VITE_APP_TITLE生产-ts文件中应用 console.log(import.meta.env.VITE_APP_TITLE)在html中应用&#xff0c;需要安装 html 模板插件 pnpm add vite-plugin-html -Dvite.config.ts中 import { createHtmlPlugin } from v…

python|切片

切片的语法格式 object[start_index:end_index:step] &#xff08;1&#xff09;step步长&#xff1a;有正负&#xff0c;正表示正着走&#xff0c;负表示负着走&#xff0c;步长的绝对值代表一步走的距离。 &#xff08;其中&#xff0c;在深度学习中卷积也有步长的说法&…

从比特币、以太坊生态,到AI与新公链复兴,谁将接棒2024年的主流叙事?

2023年10月份至今&#xff0c;现货比特币ETF一直都是促使市场反弹的核心叙事之一&#xff0c;如今靴子终于落地&#xff0c;那在ETF预期尘埃落定的大背景下&#xff0c;接下来的加密市场有哪些赛道值得关注&#xff1f; 泛比特币生态 2023年比特币生态浪潮中&#xff0c;OKX等赢…

什么是数通技术?以太网交换机在数通技术中的精要

什么是数通技术&#xff1f; 数通技术是指数字通信技术&#xff0c;它涵盖了数字信号处理、数据传输、网络通信等领域。通信工程师在数通技术中负责设计、建设和维护数字通信系统&#xff0c;以实现可靠、高效的信息传输。这涉及到数字信号的编解码、调制解调、数据压缩、网络…

【论文解读】SiamMAE:用于从视频中学习视觉对应关系的 MAE 简单扩展

来源&#xff1a;投稿 作者&#xff1a;橡皮 编辑&#xff1a;学姐 论文链接&#xff1a;https://siam-mae-video.github.io/resources/paper.pdf 项目主页&#xff1a;https://siam-mae-video.github.io/ 1.背景 时间是视觉学习背景下的一个特殊维度&#xff0c;它提供了一…

QT上位机开发(加密和解密)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 加密和解密是我们在软件开发中经常遇到的一种情形。最早的时候&#xff0c;加密是用在军事上面。现在由于各个行业、各个公司之间的竞争也非常激烈…

Kafka的安装、管理和配置

Kafka的安装、管理和配置 1.Kafka安装 官网: https://kafka.apache.org/downloads 下载安装包,我这里下载的是https://archive.apache.org/dist/kafka/3.3.1/kafka_2.13-3.3.1.tgz Kafka是Java生态圈下的一员&#xff0c;用Scala编写&#xff0c;运行在Java虚拟机上&#xf…

不会 python 语言没关系,GPT 会呀

在日常办公或者是编程过程中&#xff0c;经常要处理一些琐碎的任务。就拿编程来说&#xff0c;假如你现在收到一个任务&#xff0c;要提取源代码中所有的字符串&#xff0c;进行国际化。 一般来说&#xff0c;很多软件开发工具提供了国际化方案&#xff0c;比如 QT&#xff0c;…

x-cmd pkg | fx - Warp 支持的 JSON 查看和处理工具

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 fx 是一款由专为 JSON 定制的双用途命令行工具&#xff0c;提供基于终端的 JSON 查看器和 JSON 处理实用程序。虽然 JSON 查看器是用 Go 编写的&#xff0c;并且无需外部依赖即可运行&#xff0c;但 JSON 处理工具是用…

openGauss学习笔记-196 openGauss 数据库运维-常见故障定位案例-强制结束指定的问题会话

文章目录 openGauss学习笔记-196 openGauss 数据库运维-常见故障定位案例-强制结束指定的问题会话196.1 强制结束指定的问题会话196.1.1 问题现象196.1.2 处理办法 openGauss学习笔记-196 openGauss 数据库运维-常见故障定位案例-强制结束指定的问题会话 196.1 强制结束指定的…

实验室服务器升级

cuda、python、pytorch 版本兼容查看顺序及网站 任务&#xff1a; 在一个有GPU的电脑上安装pytorch时选择合适版本。 简述&#xff1a; 安装 pytorch 时&#xff0c;若要使用 GPU&#xff0c;需要考虑与 CUDA&#xff0c;python 的版本兼容情况。推荐考虑顺序&#xff1a;CUD…