HTML的超链接

前言:

如图,我们在浏览网页时经常可以看到这样的字体(点击便跳转到了别的地方了),今日就和各位一起学习一下超链接的相关知识。

相关知识1:

超链接的标签为:a

~使用格式为:  <a href="路径">显示名称</a>     【如果不添加路径,则点击无效果】

          ~href为a标签的属性,是指定转到位置的意思,其参数为一个路径

             属性

                ~taget 指定页面打开位置

                        属性值

                            ~_self  在当前位置打开

                            ~_blank 在新的页面打开

本地跳转:

~路径为相对路径【如本地的其他HTML文件】

其他位置跳转:

~路径为绝对路径【如百度网址等】

例子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <a href="../img/跳转.html">点击此处跳转至本地</a>
    <br>
    <br>
    <a href="https://www.baidu.com/">跳转至百度</a>
</body>

</html>

点击后效果:

petal_20240415_232941

相关知识点2:

当我们想要回到顶部时,也可以使用超链接的形式,只要将其路径改为#即可

例子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    善读书者,须视书如水,而视此心如花、如稻、如鱼、如濯足……尔读书易于解说文义,却不甚能深入,可就朱子“涵泳”体察”二语悉心求之。
    <br>
    <br>
    书是灯,读书照亮了前面的路;书是桥,读书接通了彼此的岸;书是帆,读书推动了人生的船。读书是一门人生的艺术,因为读书,人生才更精彩!
    <br>
    <br>
    读书足以怡情,足以长才。作者:培根
    <br>
    <br>
    读书是至乐的事,杜威说,读书是一种探险,如探新大陆,如征新土壤;法郎士也已说过,读书是“灵魂的壮游”。随时可发见名山巨川古迹名胜深林幽谷奇花异卉。——杜威《读书的艺术》
    <br>
    <br>
    读书,始读,未知有疑;其次,则渐渐有疑;中则节节是疑。过了这一番,疑渐渐释,以至融会贯通,都无所疑,方始是学。——朱熹励志 名言 读书相关文章:
    <br>
    <br>
    书读得越多,眼界越宽,而所得也越多。我读书很杂,经史子集、诸子百家、诗词歌赋都喜欢翻翻读读。读书,以我为主,学习古文,但不迷信古人。读,是吸取营养往肚子里添东西,含英咀华,其乐无穷。——臧克家
    <br>
    <br>
    索取,只有在一个场合才能越多越好,那就是读书。——佚名
    <br>
    <br>
    读书忌死读,死读钻牛角,复孜孜,书我不相属。活读运心智,不为书奴仆,泥沙悉淘汰,所取惟珠玉。读书务在循序渐进;一书已熟,方读一书,勿得卤莽躐等,虽多无益。——胡居仁读书本意在元元。陆游《读书》
    <br>
    <br>    
    书读的越多而不加思索,你就会觉得你知道得很多;但当你读书而思考越多的时候,你就会清楚地看到你知道得很少。——伏尔泰
    <br>
    <br>    
    书中缓急轻重处,悉凭读者之意而定。读者于书,随心施为。所谓公认标准确立读法,实无其事。读者乃自由操业。无人能命我当如何所读或如何读也。——诺瓦利斯
    <br>
    <br>
    少年读书,如隙中窥月;中年读书,如庭中望月;老年读书,如台上观月。
    <br>
    <br>
    <br>
    <br>
    我们自动的念书,即嗜好的念书,请教别人是简陋无用,只好先行泛览,然后决议而入于本身所爱的较专门一门或几门;但专念书也有弊病,所以必需和现实社会打仗,使所读的书活起来。用心不杂,乃是入神要路。
    <br>
    <br>
    <br>
    <br>
    我们自动的读书,即嗜好的读书,请教别人是大抵无用,只好先行泛览,然后决择而入于自己所爱的较专的一门或几门;但专读书也有弊病,所以必须和现实社会接触,使所读的书活起来。——鲁迅《读书杂谈》
    书,是人类共同的精神财富,是人类进步的阶梯。书,以是哺育心灵的母乳,启迪智慧的钥匙。阅读一切好书如同和过去最杰出的人谈话。——笛卡儿
    <br>
    <br>
    <a href="#">返回顶部</a>

</body>

</html>

相关知识点3:

当我们想要跳转值某个指定位置时,需要在此位置的标签处添加id属性

id属性(放置标签内)

   ~在网页中可以为元素设置id属性,作为文章的唯一标识【区分大小写】

      形式为:id=“标识名称”

跳转时在超链接内的属性值改为 #表示名称

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    善读书者,须视书如水,而视此心如花、如稻、如鱼、如濯足……尔读书易于解说文义,却不甚能深入,可就朱子“涵泳”体察”二语悉心求之。
    <br>
    <br>
    书是灯,读书照亮了前面的路;书是桥,读书接通了彼此的岸;书是帆,读书推动了人生的船。读书是一门人生的艺术,因为读书,人生才更精彩!
    <br>
    <br>
    读书足以怡情,足以长才。作者:培根
    <br>
    <br>
    读书是至乐的事,杜威说,读书是一种探险,如探新大陆,如征新土壤;法郎士也已说过,读书是“灵魂的壮游”。随时可发见名山巨川古迹名胜深林幽谷奇花异卉。——杜威《读书的艺术》
    <br>
    <br>
    <p id="p1">
     <h2>跳转至此处了</h2>

    </p>
    读书,始读,未知有疑;其次,则渐渐有疑;中则节节是疑。过了这一番,疑渐渐释,以至融会贯通,都无所疑,方始是学。——朱熹励志 名言 读书相关文章:
    <br>
    <br>
    书读得越多,眼界越宽,而所得也越多。我读书很杂,经史子集、诸子百家、诗词歌赋都喜欢翻翻读读。读书,以我为主,学习古文,但不迷信古人。读,是吸取营养往肚子里添东西,含英咀华,其乐无穷。——臧克家
    <br>
    <br>
    索取,只有在一个场合才能越多越好,那就是读书。——佚名
    <br>
    <br>
    读书忌死读,死读钻牛角,复孜孜,书我不相属。活读运心智,不为书奴仆,泥沙悉淘汰,所取惟珠玉。读书务在循序渐进;一书已熟,方读一书,勿得卤莽躐等,虽多无益。——胡居仁读书本意在元元。陆游《读书》
    <br>
    <br>    
    书读的越多而不加思索,你就会觉得你知道得很多;但当你读书而思考越多的时候,你就会清楚地看到你知道得很少。——伏尔泰
    <br>
    <br>    
    书中缓急轻重处,悉凭读者之意而定。读者于书,随心施为。所谓公认标准确立读法,实无其事。读者乃自由操业。无人能命我当如何所读或如何读也。——诺瓦利斯
    <br>
    <br>
    少年读书,如隙中窥月;中年读书,如庭中望月;老年读书,如台上观月。
    <br>
    <br>
    <br>
    <br>
    我们自动的念书,即嗜好的念书,请教别人是简陋无用,只好先行泛览,然后决议而入于本身所爱的较专门一门或几门;但专念书也有弊病,所以必需和现实社会打仗,使所读的书活起来。用心不杂,乃是入神要路。
    <br>
    <br>
    <br>
    <br>
    我们自动的读书,即嗜好的读书,请教别人是大抵无用,只好先行泛览,然后决择而入于自己所爱的较专的一门或几门;但专读书也有弊病,所以必须和现实社会接触,使所读的书活起来。——鲁迅《读书杂谈》
    书,是人类共同的精神财富,是人类进步的阶梯。书,以是哺育心灵的母乳,启迪智慧的钥匙。阅读一切好书如同和过去最杰出的人谈话。——笛卡儿
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <a href="#">返回顶部</a> <a href="#p1">跳转至p1处</a>
    <br>
    <br>

</body>

</html>

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

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

相关文章

SS3D翻译

SS3D AbstractIntroductionRelated WorkFully-Supervised 3D Object DetectionWeakly/Semi-Supervised 3D Object DetectionSparsely-Supervised 2D Object Detection MethodOverall FrameworkArchitecture of DetectorMissing-Annotated Instance Mining Module 缺失注释实例挖…

Kubernetes(k8s)集群搭建部署,master节点配置

目录 1.切换为root用户 2.关闭防火墙&#xff0c;关闭swap分区和禁用SElinux 3.安装docker 4.更改daemon.json文件&#xff0c;指定 Docker 守护进程使用的 cgroup 驱动程序 5.重启docker服务 6.配置kubernetes.repo 7.安装Kubelet、Kubeadm、Kubectl 8.设置开机自启 …

流量卡推广怎么申请一级代理

一、号卡推广的重要性 号卡推广对于通信运营商来说具有重要意义。首先&#xff0c;号卡推广是运营商获取新用户、扩大市场份额的重要手段。通过有效的推广策略&#xff0c;运营商可以吸引更多潜在用户&#xff0c;提高品牌知名度和用户黏性。其次&#xff0c;号卡推广有助于运…

java 读取xml文件

1、基本概念 &#xff08;1&#xff09;XML是EXtensible Markup Language 的缩写&#xff0c;翻译过来就是可扩展标记语言。所以很明显&#xff0c;XML和HTML一样都是标记语言&#xff0c;也就是说它们的基本语法都是标签。 &#xff08;2&#xff09;可扩展&#xff1a;XML允…

了解 RISC-V IOMMU

了解 RISC-V IOMMU 个人作为 IOMMU 初学者&#xff0c;从初学者的角度介绍我眼中 RISCV 的 IOMMU 如果有些描述不够专业&#xff0c;还请谅解&#xff0c;也欢迎讨论 部分内容来自 https://zhuanlan.zhihu.com/p/679957276&#xff08;对于 RISCV IOMMU 规范手册的翻译&#xf…

深入理解go语言中的切片

写在文章开头 从一个Java的开发角度来看&#xff0c;切片我们可以理解为Java中的ArrayList即一种动态数组的实现&#xff0c;本文会从源码的角度对切片进行深入剖析&#xff0c;希望对你有帮助。 Hi&#xff0c;我是 sharkChili &#xff0c;是个不断在硬核技术上作死的 java …

前端框架模板

前端框架模板 1、vue-element-admin vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 **功能&#xff1a;**https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能 **GitHub地址&#xff1a;**GitHub - PanJiaChen/vue-element-admin: :t…

Win 运维 | Windows Server 系统事件日志浅析与日志审计实践

[ 重剑无锋&#xff0c;大巧不工。] 大家好&#xff0c;我是【WeiyiGeek/唯一极客】一个正在向全栈工程师(SecDevOps)前进的技术爱好者 作者微信&#xff1a;WeiyiGeeker 公众号/知识星球&#xff1a;全栈工程师修炼指南 主页博客: 【 https://weiyigeek.top 】- 为者常成&…

【Mamba】医学图像分割的Mamba评估指标参考(更新中...)

医学图像分割的Mamba评估指标参考 VM-UNet&VM-UNetV2LightM-UNetUltraLight-VM-UNetH-vmunetU-MambaLMa-UNetMamba-UNetVM-UNet&VM-UNetV2 DatasetModelmIoU(%)↑DSC(%)↑Acc(%)↑Spe(%)↑Sen(%)↑ISIC17UNet76.9886.9995.6597.4386.82ISIC17UTNetV277.3587.2395.8498.…

Java开发从入门到精通(十):Java常用的API编程接口:String

Java大数据开发和安全开发 (一)Java常用的API1.1 什么是API1.2 什么叫做包1.2.1 如何调用其他包的程序 1.3 JAVA的API&#xff1a;String1.3.1 创建String对象1.3.2 String提供的操作字符串数据的常用方法1.3.3 String练习案例 (一)Java常用的API 1.1 什么是API API(全称 App…

Ubuntu安装VMVare Workstation pro 17.5.1

由于需要装Kali&#xff0c;我电脑是Ubuntu单系统&#xff0c;所以只能使用linux版本的虚拟机&#xff0c;通过这种方式来安装虚拟机和Kali镜像。 参考CSDN博客资料&#xff1a;https://blog.csdn.net/xiaochong0302/article/details/127420124 github代码资料&#xff1a;vm…

2024 CKA 基础操作教程(十二)

题目内容 考点相关内容分析 Pods Pod 是可以在 Kubernetes 中创建和管理的、最小的可部署的计算单元。 Pod 是 Kubernetes 中的原子单元&#xff0c;用于封装应用程序的一个或多个容器、存储资源、唯一的网络 IP&#xff0c;以及有关如何运行容器的选项。Pod 提供了一个共享的…

如何实现超大场景三维模型数据立体裁剪

如何实现超大场景三维模型数据立体裁剪 实现超大场景三维模型数据的立体裁剪可以采用如下方法&#xff1a; 数据预处理&#xff1a;将超大场景三维模型数据进行划分和分割&#xff0c;将其拆分成多个小块或网格。这样可以方便进行后续的裁剪操作。 裁剪算法选择&#xff1a;根据…

场景文本检测识别学习 day04(目标检测的基础概念)

经典的目标检测方法 one-stage 单阶段法&#xff1a;YOLO系列、SSD系列 one-stage方法&#xff1a;仅预测一次&#xff0c;直接在特征图上预测每个物体的类别和边界框输入图像之后&#xff0c;使用CNN网络提取特征图&#xff0c;不加入任何补充&#xff08;锚点、锚框&#x…

OpenHarmony轻量系统开发【2】源码下载和开发环境

2.1源码下载 关于源码下载的&#xff0c;读者可以直接查看官网&#xff1a; https://gitee.com/openharmony/docs/tree/master/zh-cn/release-notes 本文这里做下总结&#xff1a; &#xff08;1&#xff09;注册码云gitee账号。 &#xff08;2&#xff09;注册码云SSH公钥…

如何采集opc服务器数据上传云端

为了进一步提高生产效率&#xff0c;生产制造的不断朝着智能化发展和升级&#xff0c;传统的自动化生产系统已经不能满足需求。传统的SCADA系统一般是用于现场的数据采集与控制&#xff0c;但是本地控制已经无法满足整个工厂系统智能化数字化的需求&#xff0c;智能化数字化是需…

【Altium Designer 20 笔记】PCB线宽与过孔尺寸

电源线&#xff1a;40mil1A&#xff08;一般翻倍给&#xff09;,地线比电源线粗一点即可&#xff1b;信号线&#xff1a;10-15mil 一、线宽 市电的火线和零线&#xff1a;80-100mil12V /24V 20mil~60mil 5V 20-30mil 3V 20-30mil GND 越宽越好20-30mil普通信号线 10mil-15mil…

Qt 3 QVariant类的使用和实例

QVariant, 类本质为 C联合(Union)数据类型&#xff0c;它可以保存很多Qt 类型的值&#xff0c;包括 QBrush、QColor、QString 等等。也能够存放Qt的容器类型的值。QVariant::StringList 是 Qt定义的一个 QVariant::type 枚举类型的变量&#xff0c;其他常用的枚举类型变量如下表…

LabVIEW变速箱自动测试系统

LabVIEW变速箱自动测试系统 在农业生产中&#xff0c;采棉机作为重要的农用机械&#xff0c;其高效稳定的运行对提高采棉效率具有重要意义。然而&#xff0c;传统的采棉机变速箱测试方法存在测试效率低、成本高、对设备可能产生损害等问题。为了解决这些问题&#xff0c;开发了…

网站添加PWA支持,仅需三步,无视框架的类型

总结起来&#xff0c;网站配置PWA简单步骤为&#xff1a; 编写 manifest.json&#xff1b;编写 serviceWorker.js&#xff1b;在 index.html 引入上述两个文件&#xff1b;把上述三个文件放在网站根目录(或者同一目录下)&#xff1b;网站需要部署在https环境才能触发&#xff…