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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node.js服务器静态资源处理

前言&#xff1a;node.js服务器动态资源处理见 http://t.csdnimg.cn/9D8WN 一、什么是node.js服务器静态资源&#xff1f; 静态资源服务器指的是不会被服务器的动态运行所改变或者生成的文件. 它最初在服务器运行之前是什么样子, 到服务器结束运行时, 它还是那个样子. 比如平…

单元测试四大过程

单元测试四大过程&#xff08;蓝桥课学习笔记&#xff09; 单元测试过程 单元测试是软件测试过程中的一个关键环节&#xff0c;它与集成测试、系统测试一样&#xff0c;分为测试策划、测试设计、测试执行和测试总结几个阶段。 单元测试过程中每个阶段需要完成的主要工作如下&…

数据结构排序算法

排序也称排序算法(SortAlgorithm)&#xff0c;排序是将一组数据&#xff0c;依指定的顺序进行排列的过程。 分类 内部排序【使用内存】 指将需要处理的所有数据都加载到内部存储器中进行排序插入排序 直接插入排序希尔排序 选择排序 简单选择排序堆排序 交换排序 冒泡排序快速…

用html写文本变形动画

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>文本变形动画</title><link rel"stylesheet" href"./style.css"> </head> <body> <!-- 两个文本部分…

广东莱斯广告,6.8米UV喷印推动粤东喷绘产业升级

广东莱斯广告作为汕头市大型的广告服务运营商,近日迎来了一件值得庆祝的事情:彩神6.8米UV喷印机运行一周年,销售服务商深圳嘉豪总经理李伟特地前来回访。该设备是深圳润天智数字设备股份有限公司开发的全球首台搭载XTRA6800H柯尼卡喷头的设备,设备特点是:1.色彩艳丽;2.超宽喷印…

记录flume运行时报NullPointerException异常

【背景说明】 我要起一个将kafka上的topic_log主题中的数据上传到hdfs上的flume进程。 这是我的flume配置文件脚本&#xff1a; #定义组件 a1.sourcesr1 a1.channelsc1 a1.sinksk1#配置source1 a1.sources.r1.type org.apache.flume.source.kafka.KafkaSource a1.sources.r…

《Kubernets证书篇:基于Kylin V10+ARM架构CPU修改K8S 1.26.15版本证书时间限制》

一、背景 Kubernetes 默认的证书有效期只有1年&#xff0c;因此需要每年手动更新一次节点上面的证书&#xff0c;特别麻烦而且更新过程中可能会出现问题&#xff0c;因此我们要对 Kubernetes 的 SSL 证书有效期进行修改&#xff0c;这里将证书的时间限制修改为100年。 环境信息…

112 arcpy 发布 mxd地图文件 到 arcgis服务器 为 地图服务

前言 此文档主要是记录一下 最近的一次机遇 arcpy 来发布 地图文件到 arcgis服务器 上面 arcpy 主要是来自于 ArcGIS_Desktop_105_154030.zip 安装之后会在 python 的安装目录 安装另外的一份带 arcgis 的 python 环境, 然后 本文相关类库 也是基于 这个 arcpy 的 python 环境…

web实战项目环境部署(LNMP)

环境搭建准备 1、在本机安装VMware虚拟机&#xff0c;实际工作中&#xff0c;使用的是云服务器 2、在虚拟机上安装并运行Linux系统 3、在本机上安装好远程连接工具&#xff08;xshell/FinalShell&#xff09;&#xff0c;通过远程连接工具连接到虚拟机 4、关闭linux上的防火…

深度学习之PyTorch实现卷积神经网络(CNN)

在深度学习领域&#xff0c;卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNN&#xff09;是一种非常强大的模型&#xff0c;专门用于处理图像数据。CNN通过卷积操作和池化操作来提取图像中的特征&#xff0c;具有较好的特征学习能力&#xff0c;特别适用…

云原生:企业数字化转型的引擎与未来

一&#xff0c;引言 随着信息技术的飞速发展&#xff0c;企业数字化转型已成为时代的必然趋势。在这场深刻的变革中&#xff0c;云原生技术以其独特的优势&#xff0c;逐渐成为推动企业数字化转型的核心动力。本文将详细探讨云原生技术的内涵、发展历程&#xff0c;以及在企业数…

【Java开发指南 | 第八篇】Java变量、构造方法、创建对象

专栏&#xff1a;Java开发指南 CSDN秋说 文章目录 Java变量构造方法创建对象 Java变量 局部变量&#xff1a;在方法、构造方法或者语句块中定义的变量被称为局部变量。变量声明和初始化都是在方法中&#xff0c;方法结束后&#xff0c;变量就会自动销毁。成员变量&#xff08;…

研究生,该学单片机还是plc。?

PLC门槛相对较低&#xff0c;但是在深入学习和应用时&#xff0c;仍然有很高的技术要求。我这里有一套单片机入门教程&#xff0c;不仅包含了详细的视频 讲解&#xff0c;项目实战。如果你渴望学习单片机&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&am…

OpenHarmony实战开发-图片选择和下载保存案例。

介绍 本示例介绍图片相关场景的使用&#xff1a;包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面&#xff0c;下载并保存网络图片到手机相册或到指定用户目录两个场景。 效果图预览 使用说明 从主页通用场景集里选择图片选择和下载保存进入首页。分两个场景点…

Linux UDP通信系统

目录 一、socket编程接口 1、socket 常见API socket()&#xff1a;创建套接字 bind()&#xff1a;将用户设置的ip和port在内核中和我们的当前进程关联 listen() accept() 2、sockaddr结构 3、inet系列函数 二、UDP网络程序—发送消息 1、服务器udp_server.hpp initS…

stm32开发之threadx整合letter-shell 组件记录

前言 使用过rt-thread的shell 命令交互的方式&#xff0c;觉得比较方便,所以在threadx中也移植个shell的组件。这里使用的是letter-shellletter-shell 核心的逻辑在于组件通过链接文件自动初始化或自动添加的两种方式&#xff0c;方便开发源码仓库 实验(核心代码) shell 线程…

rhce day1

一 . 在系统中设定延迟任务要求如下 在系统中建立 easylee 用户&#xff0c;设定其密码为 easylee 延迟任务由 root 用户建立 要求在 5 小时后备份系统中的用户信息文件到 /backup 中 确保延迟任务是使用非交互模式建立 确保系统中只有 root 用户和 easylee 用户可以执行延…

✌粤嵌—2024/3/11—跳跃游戏

代码实现&#xff1a; 方法一&#xff1a;递归记忆化 int path; int used[10000];bool dfs(int *nums, int numsSize) {if (path numsSize - 1) {return true;}for (int i 1; i < nums[path]; i) {if (used[path i]) {continue;}path i;used[path] 1;if (dfs(nums, num…

“华为杯“华南理工大学程序设计竞赛 L-再一道好题

题目 #include<bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second const int maxn 1e6 5; const int inf 1e9 5;using namespace std;int n, m;void solve(){int res 0;int q;string s;int k;cin …

北京市为例的空气质量分析报告分析【免费送】

原始数据&#xff1a; 日期名称类型所属区拥挤指数速度客流指数20240405世界之花假日广场购物;购物中心大兴区2.46621.369.4920240405华润五彩城购物;购物中心海淀区2.01329.7111.1720240405北京市百货大楼购物;购物中心东城区1.85615.938.2320240405apm购物;购物中心东城区1.…