前端-基础 常用标签-超链接标签( 锚点链接 )

锚点链接 :  点击链接,可以快速定位到 页面中的某个位置 

如果不好理解,讲一个例子,您就马上明白了 

===>>>

                        

                        这个是 刘德华的百度百科 ,可以看到,页面里面有很多内容,那就得有个目录了

                        而这个目录里显示的,就是锚点链接,就是当你点击这个链接,就会直接跳转至相

                        应的链接页面~!! (就不用 自己一直往下滑,滑好久才能滑到的内容了 )

                        这就是 锚点链接 ~!!! 

实现 锚点链接 

        #  第一步 :  在链接文本的 href 属性中,设置属性值为 #名字 的形式,

                              如   <a href="#two"> 第二集</a> 

                             

                              (这一步就是,你要点击链接,那你就得先有这个链接呀; 而点击这个链接会去

                              往相应的位置,那就是说这个链接肯定也要有相应的属性,就是 href 后面会有

                              #名字  ,这个 名字 可以随意起,是用来做标识的,但前面的 # 必须有 )

                              所以,上示的例子中, two 就是那个名字,就是那个标识 ~~!! 

                                 

        #  第二步 :  找到目标位置标签,里面添加一个  id 属性 = 刚才的名字

                              如 <h3 id="two">第二集介绍</h3>    

                              然后,就是找到要跳转相应位置的那里,

                              给它的标签添加一个 id="第一步的名字 即可~!! 

示例 : 

              

              我们先做个 小示例,先做个小网页 

             

              它是上示这样子的~! 

              然后,我们再做 锚点链接 的两步 ;我们以 人物评价为例来做 锚点链接

              根据实现 锚点链接的两步来做 

              

              上示即为 锚点链接的第一步,注意 属性里的代码是如何表示 锚点链接的第一步的~!

              ===>>>

              

              然后,我们进行锚点链接的第二步, 找到要直接跳转到位的那个地方

              也即 我们示例中的 人物评价 ( 它原本仅是一个 h3 标题 ) 

              现在给它的 h3 标签上    添加属性  id 即 第一步里的 名字 ;  如上示 

              ===>>>

            

             

              就可以看到, 人物评价明显有了链接的样式,点击,便直接跳转到相应位置~! 

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

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

相关文章

RabbitMQ高级

文章目录 一.消息可靠性1.生产者消息确认2.消息持久化3.消费者确认4.消费者失败重试 MQ的一些常见问题 1.消息可靠性问题:如何确保发送的消息至少被消费一次 2.延迟消息问题:如何实现消息的延迟投递 3.高可用问题:如何避免单点的MQ故障而导致的不可用问题 4.消息堆积问题:如…

狂肝100小时,各大厂20W字面试真题分享

有很多童靴问我&#xff0c;有没有大厂的面试集合&#xff0c;可以针对性备考一下&#xff0c;我说面试题网络上有很多&#xff0c;随便搜索一下&#xff0c;就一大把吧。他们回复说&#xff0c;都是针对各个知识点的题目&#xff0c;想要吃透&#xff0c;至少要1-3个月的时间&…

NCC基础开发技能培训

YonBuilder for NCC 是一个带插件的eclipse工具&#xff0c;跟eclipse没什么区别 NC Cloud2021.11版本开发环境搭建改动 https://nccdev.yonyou.com/article/detail/495 不管是NC Cloud 新手还是老NC开发&#xff0c;在开发NC Cloud时开发环境搭建必看&#xff01;&#xff…

命令行模式的rancher如何安装?

在学习kubectl操作的时候&#xff0c;发现rancher也有命令行模式&#xff0c;学习整理记录此文。 说明 rancher 命令是 Rancher 平台提供的命令行工具&#xff0c;用于管理 Rancher 平台及其服务。 前提 已经参照前文安装过了rancher环境了&#xff0c;拥有了自己的k8s集群…

腾讯云代金券介绍及领取教程分享

腾讯云为了吸引用户经常推出各种优惠活动&#xff0c;其中就包括腾讯云代金券&#xff0c;领取之后可用于抵扣腾讯云平台上购买的部分产品或服务的费用。以下是腾讯云代金券的详细介绍及领取教程。 一、腾讯云代金券介绍 腾讯云代金券是腾讯云优惠券的一种&#xff0c;代金券是…

IMU用于无人机故障诊断

最近&#xff0c;来自韩国的研究团队通过开发以IMU为中心的数据驱动诊断方法&#xff0c;旨在多旋翼飞行器可以自我评估其性能&#xff0c;即时识别和解决推进故障。该方法从单纯的常规目视检查跃升为复杂的诊断细微差别&#xff0c;标志着无人机维护的范式转变。 与依赖额外传…

深入理解并解析Flutter Widget

文章目录 完整代码程序入口构建 Widget 结构定义 widget 状态定义 widget UI获取上下文关于build()build() 常用使用 完整代码 import package:english_words/english_words.dart; import package:flutter/material.dart; import package:provider/provider.dart;void main() …

软件工程专业毕业设计题目怎么选?

文章目录 0 简介1 如何选题2 最新软件工程毕设选题3 最后 0 简介 学长搜集分享最新的软件工程业专业毕设选题&#xff0c;难度适中&#xff0c;适合作为毕业设计&#xff0c;大家参考。 学长整理的题目标准&#xff1a; 相对容易工作量达标题目新颖 1 如何选题 最近非常多的…

单电阻落地扇电机驱动 DEMO 方案

SYNWIT DEMO方案 低压 PMSM 电机&#xff0c;软件上采用SVPWM空间电压矢量调制技术&#xff0c;直接闭环启动&#xff0c;相比传统方波效率提高15%&#xff0c;具有更小的谐波分量及转矩脉动&#xff0c;同时采用32位MCU芯片SWM201G6S7 SSOP28 封装为主控&#xff0c;为驱动算…

Long类型转换精度丢失问题解决

问题: 启动前端项目 页面传递的ID 和数据库保存的ID不一致 原因&#xff1a;给前端返回的id为long类型&#xff0c;在转换json传递到前端以后精度丢失&#xff0c;所以前端给我们的id也是丢失精度的id,不能查询数据。 因为js数字类型最大长度为16位&#xff0c;而java的long类…

好物周刊#35:图标资源获取

https://github.com/cunyu1943/JavaPark https://yuque.com/cunyu1943 村雨遥的好物周刊&#xff0c;记录每周看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;每周五发布。 一、项目 1. 正则大全 常用正则大全&#xff0c;支持 web/vscode/idea/Alfred Work…

红日靶场-3

目录 前言 外网渗透 外网渗透打点 1、arp 2、nmap 3、nikto 4、whatweb 5、gobuster 6、dirsearch CMS 1、主页内容 2、/configuration.php~ 目录 3、/administrator 目录 4、Joomla!_version探测 5、joomlascan python脚本 6、joomscan perl脚本 MySQL 1、远…

Java学习——设计模式——行为型模式2

文章目录 行为型模式状态模式观察者模式中介者模式迭代器模式访问者模式备忘录模式解释器模式 行为型模式 行为型模式用于描述程序在运行时复杂的流程控制&#xff0c;即描述多个类或对象之间怎样相互协作共同完成单个对象无法单独完成的任务&#xff0c;涉及算法与对象间职责的…

(leetcode)Z字形变换 -- 模拟算法

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 题目链接 . - 力扣&#xff08;LeetCode&#xff09; 输入描述 string convert(string s, int numRows)&#xff0c;输入一个字符串s&#xff0c;以及一个行数numRows&#xff0c;将字符串按照这个行数进行Z字形排列&…

三菱plc学习入门(二,三菱plc指令,触点比较,计数器,交替,四则运算,转换数据类型)

今天&#xff0c;进行总结对plc的学习&#xff0c;下面是对plc基础的学习&#xff0c;希望对读者有帮助&#xff0c;欢迎点赞&#xff0c;评论&#xff0c;收藏&#xff01;&#xff01;&#xff01; 目录 触点比较 当数据太大了的时候&#xff08;LDD32位&#xff09; CMP比…

文献阅读:Sparse Low-rank Adaptation of Pre-trained Language Models

文献阅读&#xff1a;Sparse Low-rank Adaptation of Pre-trained Language Models 1. 文章简介2. 具体方法介绍 1. SoRA具体结构2. 阈值选取考察 3. 实验 & 结论 1. 基础实验 1. 实验设置2. 结果分析 2. 细节讨论 1. 稀疏度分析2. rank分析3. 参数位置分析4. 效率考察 4.…

Win11开始菜单怎么改成经典模式-Win11切换Win10风格开始菜单方法

Win11切换Win10风格开始菜单方法 方法一&#xff1a; 1. 在Win11电脑上下载一个“Startallback”软件&#xff0c;下载安装完成后&#xff0c;在“控制面板”里打开该软件。 2. 打开后&#xff0c;在“欢迎界面”&#xff0c;选择使用“Windows10主题样式”并重启电脑即可。…

Python爬虫获取百度的图片

一. 爬虫的方式&#xff1a; 主要有2种方式: ①ScrapyXpath (API 静态 爬取-直接post get) ②seleniumXpath (点击 动态 爬取-模拟) ScrapyXpath XPath 是 Scrapy 中常用的一种解析器&#xff0c;可以帮助爬虫定位和提取 HTML 或 XML 文档中的数据。 Scrapy 中使用 …

大学物理实验重点——偏振光与双折射

线偏振光、椭圆偏振光、圆偏振光均可由两个频率相同、振动方向垂直、位相差恒定的线偏振光合成。 单轴晶体中&#xff0c;若其 o 光折射率大于 e 光折射率&#xff0c;也即 o 光传播速度小于 e 光传播速度&#xff0c;称之为负晶体&#xff0c;反之为正晶体。 o光和e光…

#error 在C语言中的作用

1、#error命令是C/C语言的预处理命令之一 #error 是C语言中的预处理指令之一&#xff0c;用于在编译时生成一个错误消息。当编译器遇到 #error 指令时&#xff0c;会立即停止编译&#xff0c;并将指定的错误消息输出到编译器的错误信息中。 在给定的代码中&#xff0c;#error…
最新文章