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

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

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

===>>>

                        

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

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

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

                        这就是 锚点链接 ~!!! 

实现 锚点链接 

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

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

                             

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

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

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

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

                                 

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

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

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

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

示例 : 

              

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

             

              它是上示这样子的~! 

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

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

              

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

              ===>>>

              

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

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

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

              ===>>>

            

             

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

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

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

相关文章

为什么地中海气候对葡萄最有益?

优质葡萄酒离不开优秀的葡萄品种&#xff0c;更离不开有利的风土优势。云仓酒庄的品牌雷盛红酒LEESON分享熟悉葡萄酒知识的朋友都听说过不少葡萄酒产区是被老天爷眷顾的地中海气候。 为什么地中海气候对葡萄种植最有益呢&#xff1f;云仓酒庄的品牌雷盛红酒LEESON分享因为这是一…

5g视频短信群发助力汽车销售!

视频短信群发在汽车销售中具有以下优势&#xff1a; 1.增强品牌形象&#xff1a;通过视频短信&#xff0c;可以向潜在客户展示汽车品牌形象、企业文化和价值观&#xff0c;提升品牌认知度和美誉度。 2.产品展示与介绍&#xff1a;视频短信可以用来详细介绍汽车的特点、功能和优…

Copilot在Pycharm的应用和示例

Copilot 是 Github 在 2021 年发布的 AI 代码助手工具&#xff0c;它可以根据你提供的上下文信息&#xff0c;自动生成代码建议&#xff0c;帮助提高代码编写效率和准确性。在 Pycharm 中使用 Copilot&#xff0c;可以进一步提升 Python 开发效率&#xff0c;本文将分享如何在 …

React.Children.map 和 js 的 map 有什么区别?

JavaScript 中的 map 不会对为 null 或者 undefined 的数据进行处理&#xff0c;而 React.Children.map 中的 map 可以处理 React.Children 为 null 或者 undefined 的情况。 React 空节点&#xff1a;可以由null、undefined、false、true创建 import React from reactexport …

大模型学习第二课

学习目标&#xff1a; 浦语大模型趣味Demo 学习内容&#xff1a; 学习时间&#xff1a; 20240108 学习产出&#xff1a; InternLM介绍 大模型&#xff1a;人工智能领域钟参数数量巨大、拥有庞大计算能力和参数规模的模型。InternLM模型全链条开源&#xff0c;7B&#xff0c;…

BUUCTF--铁人三项(第五赛区)_2018_rop1

这题是一题标准的rop。先简单查看下保护&#xff1a; 32位程序&#xff0c;黑盒测试下效果&#xff1a; 一上来就是输入&#xff0c;然后结尾会输出Hello,World.看看IDA中具体逻辑如何&#xff1a; 漏洞点主要在vulnerable_function()函数中。老常规栈溢出了。做这种题的思路&a…

Eltima 端口虚拟化软件授权分析

目录 Eltima 端口虚拟化软件 授权文件加密方式 授权文件格式 key_type 授权类型 errorCode 授权状态 hid 硬件编码 授权许可 1、替换公钥 2、dll劫持hook 测试验证 成品 Eltima 端口虚拟化软件 USB Network Gate 通过局域网和互联网共享和接入USB端口Serial to Eth…

80/20法则-扫盲和复习篇

80/20法则-扫盲和复习篇 一、80/20法则二、对于目标三、时间管理应用四、“二八定律”基本内容总结 一、80/20法则 “80/20法则”是20世纪初意大利统计学家、经济学家维尔弗雷多帕累托提出的&#xff0c;他指出&#xff1a;在任何特定群体中&#xff0c;重要的因子通常只占少数…

Vue脚手架及组件开发

组件插槽: 路由数据传递&#xff1a;

02.语言元素

语言元素 指令和程序 计算机的硬件系统通常由五大部件构成&#xff0c;包括&#xff1a;运算器、控制器、存储器、输入设备和输出设备。其中&#xff0c;运算器和控制器放在一起就是我们通常所说的中央处理器&#xff0c;它的功能是执行各种运算和控制指令以及处理计算机软件…

Leetcode459:重复的字符串

解题思路&#xff1a; 如果您的字符串 S 包含一个重复的子字符串&#xff0c;那么这意味着您可以多次 “移位和换行”您的字符串&#xff0c;并使其与原始字符串匹配。 例如&#xff1a;abcabc 移位一次&#xff1a;cabcab 移位两次&#xff1a;bcabca 移位三次&#xff1a;a…

静态网页设计——科学家网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a;https://www.bilibili.com/video/BV1wg4y1Q7qm/?vd_source5f425e0074a7f92921f53ab87712357b 源码&#xff1a;https://space.bilibili.com…

在群晖NAS上搭建私有部署笔记软件——Blossom

一、Blossom 简介 Blossom 是一个需要私有部署的笔记软件&#xff0c;虽然本身定位是一个云端软件&#xff0c;但你仍然可以在本地部署&#xff0c;数据和图片都将保存在本地&#xff0c;不依赖任何的图床或者对象存储。 Blossom | Blossom (wangyunf.com)https://www.wangyun…

dir /s /d 获取每个文件的大小

在Windows系统的命令提示符&#xff08;CMD&#xff09;中&#xff0c;要查看子文件夹下所有文件的大小&#xff0c;可以使用dir命令结合/s和/b参数。/s参数用于列出所有子目录&#xff0c;包括空目录&#xff0c;而/b参数则用于以批处理模式输出&#xff0c;显示文件的大小等信…

01第一个Mybatis程序+引入Junit+引入日志文件logback

Mybatis MyBatis本质上就是对JDBC的封装&#xff0c;通过MyBatis完成CRUD。而对于JDBC&#xff0c;SQL语句写死在Java程序中&#xff0c;不灵活。改SQL的话就要改Java代码。违背开闭原则OCP。对于事务机制&#xff0c;MyBatis支持 或managed模式&#xff0c;JDBC模式中MyBatis…

基于SSM图书管理系统【源码】【最详细运行文档】

SSM图书管理系统【源码】【最详细运行文档】 系统简介系统涉及系统运行系统演示源码获取 系统简介 以往的图书馆管理事务处理主要使用的是传统的人工管理方式&#xff0c;这种管理方式存在着管理效率低、操作流程繁琐、保密性差等缺点&#xff0c;长期的人工管理模式会产生大量…

2023秋电子科大信软 程算I 机考真题

基本情况 对应课程&#xff1a;程序设计与算法基础I 考试时间&#xff1a;2小时 题型&#xff1a;函数题编程题 函数题只需要完成期中一些&#xff08;个&#xff09;函数即可 编程题需要自己手动写main函数 提示&#xff1a;本次考试为全年级机考&#xff0c;分上下午场&am…

Timsort:最快排序算法

Timsort&#xff08;泰姆排序&#xff09;是一种混合排序算法&#xff0c;结合了合并排序&#xff08;Merge Sort&#xff09;和插入排序&#xff08;Insertion Sort&#xff09;的特性。它由Tim Peters在2002年为Python的排序算法而设计&#xff0c;并在Python 2.3版本中首次实…

05.构造程序逻辑

构造程序逻辑 学完前面的几个章节后&#xff0c;我觉得有必要在这里带大家做一些练习来巩固之前所学的知识&#xff0c;虽然迄今为止我们学习的内容只是Python的冰山一角&#xff0c;但是这些内容已经足够我们来构建程序中的逻辑。对于编程语言的初学者来说&#xff0c;在学习…

Looper如何通过ThreadLocal保证的线程独有

ThreadLocalMap 每个线程Thread都会维护一个threadLocals变量&#xff1a;ThreadLocalMap。这个类是ThreadLocal的静态内部类。当进行ThreadLocal的set()和get()时都会去获取线程里面的这个threadLocals进行设值和取值操作。所以ThreadLocal可以做到各个线程间数据互不干扰 T…