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

news/2024/5/30 22:14:26 /文章来源: https://blog.csdn.net/m0_56332061/article/details/135422649

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

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

===>>>

                        

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

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

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

                        这就是 锚点链接 ~!!! 

实现 锚点链接 

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

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

                             

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

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

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

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

                                 

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

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

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

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

示例 : 

              

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

             

              它是上示这样子的~! 

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

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

              

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

              ===>>>

              

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

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

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

              ===>>>

            

             

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

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

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

相关文章

数据库初始化脚本(用 truncate 命令一键清空某个数据库中全部数据表数据)

数据库初始化脚本(用 truncate 命令一键清空某个数据库中全部数据表数据)

数据库初始化脚本&#xff08;用 truncate 命令一键清空某个数据库中全部数据表数据&#xff09; 1.执行下面的sql语句生成“清空数据库的sql脚本”2.执行“清空数据库的sql脚本” 在开发中&#xff0c;当数据表结构有变动或者数据库中有脏数据时&#xff0c;想要清空数据表中的…
阅读更多...
Pixi.js的魅力

Pixi.js的魅力

摘要&#xff1a;官网 Web开发的时代&#xff0c;图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎&#xff0c;已经成为了许多开发者的首选~~ 项目中&#xff0c;有一些图像的处理操作&#xff08;3D图&#xff0c;2D图都有&…
阅读更多...
2024/1/7周报

2024/1/7周报

文章目录 摘要Abstract文献阅读题目引言贡献相关工作Temporal RecommendationSequential Recommendation 方法Problem FormulationInput EmbeddingSelf-Attention StructureModel Training 实验数据集实验过程实验结果 深度学习Self-attention多头机制堆叠多层 总结 摘要 本周…
阅读更多...
2_工厂设计_工厂方法和抽象工厂

2_工厂设计_工厂方法和抽象工厂

工厂设计模式-工厂方法 1.概念 工厂方法模式(Fatory Method Pattern ) 是指定义一个创建对象的接口&#xff0c;但让实现这个接口的类来决定实例化哪个类&#xff0c;工厂方法让类的实例化推迟到子类中进行。 在工厂方法模式中用户只需要关心所需产品对应的工厂&#xff0c;…
阅读更多...
水文模型(科普类)

水文模型(科普类)

SWMM 模型概况&#xff1a; SWMM5 系列拥有编辑区域数据的功能&#xff0c;而且能模拟水文、 水力和水质。其核心部分是管道汇流计算模块&#xff0c;提供了恒定流法、运动波法和动力波法三种水动力学 方法。其中动力波法通过求解完整的圣维南方 程组进行计算&#xff0c;能够…
阅读更多...
JavaScript基础(25)_dom查询练习(二)

JavaScript基础(25)_dom查询练习(二)

<!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><title>dom查询练习二</title><link rel"stylesheet" href"../browser_default_style/reset.css"><style>form {margi…
阅读更多...
Java面试——框架篇

Java面试——框架篇

1、Spring框架中的单例bean是线程安全的吗&#xff1f; 所谓单例就是所有的请求都用一个对象来处理&#xff0c;而多例则指每个请求用一个新的对象来处理。 结论&#xff1a;线程不安全。 Spring框架中有一个Scope注解&#xff0c;默认的值就是singleton&#xff0c;单例的。一…
阅读更多...
高性能索引策略

高性能索引策略

前言 某开发曾说过&#xff0c;建好索引是高效的第一步&#xff0c;然而没用好索引&#xff0c;就等于第一步白费了。下面我们针对索引的使用策略进行简单介绍。 一. 独立的列 如果查询中的列不是独立的话&#xff0c;Mysql 就无法使用索引。“独立的列” 是指索引列不能是表…
阅读更多...
数字IC芯片设计实现 | 时序Timing Signoff check_timing检查解析

数字IC芯片设计实现 | 时序Timing Signoff check_timing检查解析

今天分享在数字IC芯片设计实现做timing signoff阶段必须要看的report。check_timing的报告必须是clean的&#xff0c;否则芯片回来大概率是废片&#xff01;&#xff01;&#xff01;实际上一堆公司的芯片败在不看这个report了。 我们知道primetime(简称PT)做时序检查是基于我…
阅读更多...
软件测试|测试平台开发-Flask 入门:URL组成部分详解

软件测试|测试平台开发-Flask 入门:URL组成部分详解

简介 Flask 是一款流行的 Python Web 框架&#xff0c;它简单轻量而灵活&#xff0c;适用于构建各种规模的 Web 应用程序。在 Flask 中&#xff0c;URL&#xff08;Uniform Resource Locator&#xff09;是指定 Web 应用程序中资源的唯一标识符。URL 组成部分是构成一个完整 U…
阅读更多...
跨平台的传输协议@WebDav协议@windows系统配置WedDav服务器@局域网内的WebDav传输系统

跨平台的传输协议@WebDav协议@windows系统配置WedDav服务器@局域网内的WebDav传输系统

文章目录 WebDav协议基本信息启用必要的windows功能启动站点管理器IIS站点根目录访问权限设置站点的功能设置端口通行防火墙IMME文件类型(文件后缀)其他设备登录和访问本机的WebDav服务站点 小结优点缺点 refs WebDav 协议基本信息 来自wikipedia:基于Web的分布式编写和版本控…
阅读更多...
已解决 ValueError: Setting an array element with a sequence. 问题

已解决 ValueError: Setting an array element with a sequence. 问题

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…
阅读更多...
跟随chatgpt从零开始安装git(Windows系统)

跟随chatgpt从零开始安装git(Windows系统)

为什么我们要安装Git&#xff1f;Git有什么用&#xff1f; 1. 版本控制&#xff1a;Git 可以追踪代码的所有变化&#xff0c;记录每个提交的差异&#xff0c;使您能够轻松地回溯到任何历史版本或比较不同版本之间的差异。 2. 分支管理&#xff1a;通过 Git 的分支功能&#xff…
阅读更多...
Postman Newman 教程:轻松管理 API 自动化测试步骤

Postman Newman 教程:轻松管理 API 自动化测试步骤

Postman 中的 Newman 是什么&#xff1f; Newman 是一个 CLI&#xff08;命令行界面&#xff09;工具&#xff0c;用于运行 Postman 中的集合&#xff08;Collection&#xff09;和环境&#xff08;Environment&#xff09;来进行自动化测试。它允许直接从命令行运行 Postman …
阅读更多...
告别内存容量焦虑,光威龙武系列DDR5内存条48GB才799

告别内存容量焦虑,光威龙武系列DDR5内存条48GB才799

新年很多朋友又准备新装机或者升级内存了&#xff0c;我比较推荐直接用DDR5大容量的内容&#xff0c;像是光威龙武系列DDR5内存条性价比就非常高&#xff0c;能够满足专业玩家、创作者和高性能计算机用户的需求。这款涵盖多种存储规格&#xff0c;包括6400MHZ 242和6800MHZ 162…
阅读更多...
[VUE]3-路由

[VUE]3-路由

目录 路由 Vue-Router1、Vue-Router 介绍2、路由配置3、嵌套路由3.1、简介3.2、实现步骤3.3、⭐注意事项 4、⭐router-view标签详解 ​&#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅…
阅读更多...
ARM CCA机密计算架构软件栈之软件组件介绍

ARM CCA机密计算架构软件栈之软件组件介绍

在本节中,您将了解Arm CCA的软件组件,包括Realm World和Monitor Root World。以下图表展示了Arm CCA系统中的软件组件: 在这个图表中,世界之间的边界显示为粗虚线。由较高权限的软件强制执行的较低权限软件组件之间的边界显示为细虚线。例如,非安全EL2处的虚拟机监视器强制…
阅读更多...
WinForms中的UI卡死

WinForms中的UI卡死

WinForms中的UI卡死 WinForms中的UI卡死通常是由于长时间运行的操作阻塞了UI线程所导致的。在UI线程上执行的操作&#xff0c;例如数据访问、计算、文件读写等&#xff0c;如果耗时较长&#xff0c;会使得UI界面失去响应&#xff0c;甚至出现卡死的情况。 解决方法 为了避免…
阅读更多...
Django 10 表单

Django 10 表单

表单的使用流程 1. 定义 1. terminal 输入 django-admin startapp the_14回车 2. tutorial子文件夹 settings.py INSTALLED_APPS 中括号添加 "the_14", INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib…
阅读更多...
Spring事务(2):声明式事务管理案例-转账(xml、注解)

Spring事务(2):声明式事务管理案例-转账(xml、注解)

1 编写转账案例&#xff0c;引出事务管理问题 需求&#xff1a;账号转账&#xff0c;Tom账号取出1000元&#xff0c;存放到Jack账号上 1.1 建表脚本&#xff08;MySQL&#xff09; CREATE TABLE t_account (id INT(11) NOT NULL AUTO_INCREMENT,name VARCHAR(20) NOT NULL,m…
阅读更多...
推荐文章
最新文章

深圳SEO优化公司汕头网站seo优化报价娄底百度网站优化排名哪家好桐城网站搜索优化哪家好怒江百搜标王哪家好绵阳网站优化按天扣费价格南山网站优化软件哪家好新余关键词按天计费报价百色百度关键词包年推广推荐罗湖seo排名公司宝安企业网站改版公司平顶山关键词按天计费公司肇庆网站建设哪家好民治关键词按天计费推荐鹤壁seo福州网站优化按天扣费推荐通化网站建设荆州阿里店铺运营驻马店网站排名优化黄石网站优化按天计费哪家好楚雄外贸网站制作推荐三亚网站优化报价惠州网站推广推荐双龙网站优化排名多少钱黔东南网页制作价格济源模板网站建设哪家好通辽推广网站多少钱玉林网站优化按天计费塘坑关键词按天计费辽阳网站优化按天收费哪家好德州网站建设设计价格歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化