HTML的超链接

news2024/11/26 12:18:01

前言:

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

相关知识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.coloradmin.cn/o/1606878.html

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

相关文章

智慧城市可视化,山海鲸引领未来

随着信息技术的迅猛发展&#xff0c;智慧城市已成为城市发展的必然趋势。在这一背景下&#xff0c;山海鲸智慧城市可视化解决方案应运而生&#xff0c;以其独特的可视化技术和智能化管理功能&#xff0c;为城市管理者提供了全新的决策支持手段。 山海鲸智慧城市可视化解决方案…

docker的安装以及docker中nginx配置

机器 test3 192.168.23.103 1机器初始化配置 1.1关闭防火墙&#xff0c;清空防火墙规则 systemctl stop firewalld iptables -F setenforce 01.2部署时间同步 yum install ntp ntpdate -y1.3安装基础软件包 yum install -y wget net-tools nfs-utils lrzsz gcc gcc-c make…

如何访问内网?

在互联网万维网上&#xff0c;我们可以轻松访问各种网站和资源。但是&#xff0c;有时我们需要访问局域网内的资源&#xff0c;例如公司内部的文件共享、打印机等。本文将介绍几种方法&#xff0c;帮助您实现访问内网的需求。 内网穿透技术 内网穿透技术是一种通过互联网将局域…

人工智能论文GPT-3(1):2020.5 Language Models are Few-Shot Learners;摘要;引言;scaling-law

摘要 近期的工作表明&#xff0c;在大量文本语料库上进行预训练&#xff0c;然后针对特定任务进行微调&#xff0c;可以在许多NLP任务和基准测试中取得实质性进展。虽然这种方法在架构上通常是与任务无关的&#xff0c;但仍然需要包含数千或数万示例的针对特定任务的微调数据集…

STM32G431RBT6移植FreeRTOS

引言&#xff1a; 本文专门为参加了蓝桥杯嵌入式赛道的同学准备&#xff0c; 大家可能会有这样一个问题&#xff0c; 比完赛之后&#xff0c; 对于像继续使用STM32G431RBT6学习FreeRTOS的&#xff0c; 发现网上的教程使用的板子基本上都是F1和F4的&#xff0c; 其实呢&#xff…

多系统源代码暴露在互联网,超四百万公民个人信息存在泄露的风险

#哈尔滨等保# 一 安全事件阐述 截至2024年3月&#xff0c;绿盟科技创新研究院监测到上万个互联网中暴露的DevOps资产存在未授权访问情况。其中&#xff0c;源代码仓库成为未授权访问的“重灾区”。这些允许未授权访问的源代码仓库暴露了境内多家机构的重要系统源代码&#x…

html公众号页面实现点击按钮跳转到导航

实现效果&#xff1a; 点击导航自动跳转到&#xff1a; html页面代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>跳转导航</title><meta name"keywords" conten…

【AR开发示例】实现AR管线巡检

写在前面的话 这是一篇旧文档&#xff0c;代码仓库见 https://gitee.com/tanyunxiu/AR-pipe 本文档是基于超图移动端SDK的AR模块开发的示例&#xff0c;仅供参考&#xff0c;SDK在持续迭代中&#xff0c;相关描述可能有变化。 示例介绍 这是一个使用AR查看墙内管线的基础示…

uniapp 如何区分目前运行环境(app、web、mp-weixin)

platform 区分 iOS、Android uniplatform 区分 app、web、mp-weixin ....

fatal error LNK1120: xxxx unresolved externals

场景&#xff1a; A项目Library&#xff0c;编译环境VS2008DDKWarizd, 编译平台WIN7XP; B项目驱动, 编译环境VS2008&#xff0c;编译平台Rlease32位&#xff0c;DDK版本相同,都是7.0 在B项目集成A项目的32位LIB库时&#xff0c;出现此错误&#xff0c;看错误很常见的找不到符号…

Linux【实战】—— LAMP环境搭建 部署网站

目录 一、介绍 1.1什么是LAMP&#xff1f; 1.2LAMP的作用 二、部署静态网站 2.1 虚拟主机&#xff1a;一台服务器上部署多个网站 2.1.1 安装Apache服务 2.1.2 防火墙配置 2.1.3 准备网站目录 2.1.4 创建网站的配置文件 2.1.5 检查配置文件是否正确 2.1.6 Linux客户端…

润石科技(RUNIC)汽车电子应用方案和物料选型

一、润石科技&#xff08;RUNIC&#xff09;简介 江苏润石科技有限公司是一家专注于高性能、高品质模拟/混合信号集成电路研发和销售的高科技半导体设计公司。公司主要产品线分为两类&#xff1a;信号链和电源管理&#xff0c;其中信号链包含运算放大器、比较器、模拟开关、数…

Mac 部署 GPT-2 预训练模型 gpt2-chinese-cluecorpussmall

文章目录 下载 GPT-2 模型快速开始 GPT-2 下载 GPT-2 模型 https://huggingface.co/uer/gpt2-chinese-cluecorpussmall git clone https://huggingface.co/uer/gpt2-chinese-cluecorpussmall # 或单独下载 LFS GIT_LFS_SKIP_SMUDGE1 git clone https://huggingface.co/uer/gpt…

基于Spring Boot+Vue的校园网上店铺,开启便捷购物新模式

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

递归 python

↵一、简单理解 解决问题的一种方法&#xff0c;它将问题不断的分成更小的子问题&#xff0c;直到子问题可以用普通的方法解决。通常情况下&#xff0c;递归会使用一个不停调用自己的函数。 【注】&#xff1a;每一次递归调用都是在解决一个更小的问题&#xff0c;如此进行下…

Leetcode - 128双周赛

目录 一&#xff0c;3110. 字符串的分数 二&#xff0c;3111. 覆盖所有点的最少矩形数目 三&#xff0c;3112. 访问消失节点的最少时间​编辑 写法一&#xff1a;朴素 Dijkstra&#xff08;适用于稠密图&#xff0c;即边比较多的图&#xff09; 写法二&#xff1a;堆优化 …

⑤【Shiro】SpringBoot整合Shiro,实现登录认证

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ ⑤【Shiro】SpringBoot整合Shiro&#xff0c;实…

作为Boss,还在写代码。what?赶紧改掉这个坏毛病

有些创业中的老板&#xff0c;经常或者偶尔也要写代码&#xff0c;我听了很震惊呀&#xff0c;这叫创业吗&#xff1f;这不是给员工打工吗&#xff1f;其他重要的事情谁来干&#xff0c;这个毛病一定要改。 一、比起写代码&#xff0c;你还有更重要的事情要做 作为BOSS和创业…

.NET 爬虫从入门到入狱

目录 前言 1.&#x1f4a1;使用HttpClient爬取数据 2.&#x1f680;模拟User-Agent 3.&#x1f935;使用HTML解析库 3.&#x1f44c;前端Price显示 4.&#x1f331;运行实例 获取金价Au 5.&#x1f9fe;使用正则表达式解析 6.&#x1f4ab;获取BTC价格 7.✨获取CSDN热点…

【网站项目】书籍销售系统小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…