web前端学习26(锚点链接)

article/2025/11/3 22:48:39

文章目录

      • 4.7.2 链接分类

4.7.2 链接分类

  1. 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置。
  • 在链接文本的href属性中,设置属性值为#名字的形式,如< a href="#two">第2集< /a>

点完这个链接就会跳转到某个位置

  • 找到目标位置标签,里面添加一个id属性=刚才的名字,如: < h3 id=“two”>第2集介绍< /h3>

到目标位置添加id属性,就可以跳转到这个位置

例:

锚点定位.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>目录</h2>1 早年经历<br/>2 演艺经历<br/>3 <a href="#live">个人生活</a><br/>4 主要作品<br/><h3>早年经历</h3><p>刘哽华出生于香港新界,在家中排行老四,如时随家人搬到了九龙钻石山的木屋区居住,并和姐弟一起帮助家里打理卖稀饭的生意(17]。1973年,刘德华随家人搬入香港蓝田顿第15座14楼[18],刘德华从黄大仙天主教小学毕业后升读可立中学[19]。在可立中学读书期间,刘德华积极参加校内学校剧壮的表演,在老师杜国威的指导下学习戏剧方面的知识。此外,他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E(中文读本A)的成绩。中六上学期后,他到香港电视广播有限公司的艺员训练班受训,从而开始了演艺之路[20]。</p><h3>演艺经历</h3><p>1981年,刘德华考进第10期无线电视艺员训练班 [24]  。同年,出演个人首部电视剧《江湖再见》,在剧中饰演以贩卖妇女为生的小混混阿龙;该剧获得美国电视节电视剧特别奖 [25]  。刘德华电视剧剧照刘德华电视剧剧照(11张)1982年,刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [26]  。同年在喜剧《花艇小英雄》中饰演败家仔钱日添。12月,与叶德娴搭档主演时装警匪剧《猎鹰》,凭借卧底警察江大伟一角获得关注 [27]  。1983年,主演金庸武侠剧《神雕侠侣》,在剧中饰演外貌俊俏、倜傥不羁的杨过 [28]  ;该剧在香港播出后取得62点的收视纪录。同年,与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将” [29]  。1984年,与赵雅芝合作主演古装武侠剧《魔域桃源》,在剧中饰演资质出众、武功高强的傅青云 [30]  。同年,与梁朝伟共同主演金庸武侠剧《鹿鼎记》,在剧中饰演英明果断的康熙 [31]  。1985年,在古装武侠剧《杨家将》中饰演骁勇善战的杨六郎 [32]  。同年,TVB向刘德华提出加签五年的合约,刘德华因拒绝而被TVB雪藏400天 [33-34]  。1986年,在邵逸夫的调解下,刘德华与TVB和解并签下合约。同年,主演古装剧《真命天子》。1988年,在出演了武侠剧《天狼劫》后,刘德华将演艺事业的重心转向影坛 [34]  。</p>1981年,刘德华出演电影处女作《彩云曲》,在片中扮演一个音乐班的学员 [35]  。1982年,在剧情片《投奔怒海》中饰演美军翻译官祖名,并凭借该片获得第2届香港电影金像奖最佳新演员提名 [35]  。1983年,与朱海玲 [36]  搭档主演剧情片《家在香港》,在片中饰演急功近利的青年人亚伦 [37]  。同年,主演动作片《毁灭号地车》,在片中与一个越南少女演绎了一段爱情故事 [38]  。1984年,在爱情片《停不了的爱》中饰演富家公子Eric [39]  。1985年,在与叶德娴共同主演的剧情片《法外情》中饰演少年得志的青年律师刘志鹏 [40]  。1986年,主演科幻冒险片《魔翡翠》,在片中饰演冒险专家猎鹰一号,这也是他首度出演科幻题材的电影 [41]  。同年,出演喜剧片《最佳福星》,在片中饰演身手矫健的特警组警员蓝保 [42]  。1987年,主演警匪片《肝胆相照》,在片中饰演亦正亦邪的犯罪集团成员阿定 [43]  。1988年,主演王家卫执导的黑帮片《旺角卡门》,在片中饰演重情重义的江湖混混华仔,并凭借该片获得第8届香港电影金像奖最佳男主角奖提名 [44]  。同年,主演警匪片《猎鹰计划》,在片中饰演具有正义感的警员国华 [45]  。此外,他还再度与叶德娴合作,在剧情片《法内情》中与叶德娴饰演绎了一段母子情 [46]  。1989年,在动作片《至尊无上》中饰演有“亚洲第一快手”之称的陈亚蟹 [47]  。同年,主演剧情片《神行太保》,在片中饰演一名公正、能干、勇敢的太保。此外,他还主演了动作片《人海孤鸿》,在片中饰演没有接受过良好教育的古惑仔沙士 [48]  。12月,与周润发共同主演动作片《赌神》,在片中饰演赌神高进的徒弟刀仔 [49]  。刘德华刘德华(11张)1990年,主演爱情片《天若有情之追梦人》,在片中饰演善良热情、讲义气的黑社会混混华Dee [50]  。同年,主演剧情片《至尊计状元才》。12月,与周星驰合作主演赌片《赌侠》,在片中饰演身怀绝技的陈刀仔 [51]  。1991年,刘德华开始改变银幕形象,主演了传记题材的系列电影《五亿探长雷洛传》,并在片中首次诠释年龄跨度较大的人物,该系列中的两部作品《五亿探长雷洛传I雷老虎》、《五亿探长雷洛传2:父子情仇》在香港的累积票房达到5300万 [52]  。6月,主演犯罪题材的电影《至尊无上Ⅱ之永霸天下》。此外,他还主演了动作片《九一神雕侠侣》,该片是刘德华投资出品的首部电影作品 [53]  。同年,创办天幕电影公司 [3]  。1992年,凭借传记片《五亿探长雷洛传》获得第11届香港电影金像奖最佳男主角提名 [54]  。8月,与王祖贤、叶德娴合作出演剧情片《庙街十二少》。11月,与林青霞、叶德娴共同主演古装片《绝代双骄》,在片中饰演聪明绝顶的小鱼儿 [55]  。同年,主演爱情片《九二神雕侠侣之痴心情长剑》,在片中饰演痴情大侠情仁 [56]  。1993年,在古装片《战神传说》中扮演一个武功超群的渔民 [57]  。同年,主演动作喜剧片《至尊三十六计之偷天换日》,在片中饰演赌术高明的千门高手钱文迪。此外,他还主演了爱情片《天长地久》,在片中塑造了一个风流不羁的江湖浪子形象 [58]  。1994年,刘德华投资并主演了剧情片《天与地》 [4]  ,并担任电影的制片人 [4]  ,他在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏 [59]  。1995年,主演赛车励志片《烈火战车》,在片中饰演叛逆、倔强的阿祖,并凭借该片获得第15届香港电影金像奖最佳男主角提名 [60]  。同年,在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事 [61]<h3 id="live">个人生活</h3><p>################</p><h3>主要作品</h3><p>@@@@@@@@@@@@@@@@</p></body>
</html>

其中作用点:

在这里插入图片描述

在这里插入图片描述

页面显示:
在这里插入图片描述

点击目录中呈现蓝色字体的“个人经历”

在这里插入图片描述

页面就会向下跳转至:

在这里插入图片描述

思考:跳转页面后怎么重新返回顶部呢?

(逆向思维即可)

在代码块中添加:

在这里插入图片描述

在这里插入图片描述

网页中就会有一个“返回顶部”,点击即可实现。

本文链接:https://blog.csdn.net/weixin_51249285/article/details/121022304


http://chatgpt.dhexx.cn/article/8gopVQfj.shtml

相关文章

Web容器版本泄露漏洞修复

0x00 背景 恶意攻击者可以根据版本信息寻找相关漏洞&#xff0c;进行利用漏洞攻击 0x01 修复思路 通过修改配置或者配置错误提示页面&#xff0c;隐藏 web容器的版本号及其它敏感信息。 0x02 代码修复 Apache 版本号 隐藏 Apache 的版本号及其它敏感信息&#xff0c;配置操…

Spring容器 SpringMVC容器 web容器的关系

说到spring和springmvc&#xff0c;其实有很多工作好多年的人也分不清他们有什么区别&#xff0c;如果你问他项目里用的什么MVC技术&#xff0c;他会说我们用的spring和mybatis&#xff0c;或者spring和hibernate。 在潜意识里会认为springmvc就是spring&#xff0c;之前我也是…

SpringBoot深入(一)--SpringBoot内置web容器及配置

版权声明&#xff1a;作者原创&#xff0c;转载请注明出处。 本系列文章目录地址&#xff1a;http://blog.csdn.net/u011961421/article/details/79416510 前言 在学会基本运用SpringBoot同时&#xff0c;想必搭过SSH、SSM等开发框架的小伙伴都有疑惑&#xff0c;SpringBoot在…

SpringBoot内置web容器及配置

前言 在学会基本运用SpringBoot同时&#xff0c;想必搭过SSH、SSM等开发框架的小伙伴都有疑惑&#xff0c;SpringBoot在spring的基础上做了些什么&#xff0c;使得使用SpringBoot搭建开发框架能如此简单&#xff0c;便捷&#xff0c;快速。本系列文章记录博主网罗博客、分析源码…

Web 容器、HTTP 服务器 、Servlet 容器区别与联系

首先浏览器发起 HTTP 请求&#xff0c;像早期的时候只会请求一些静态资源&#xff0c;这时候需要一个服务器来处理 HTTP 请求&#xff0c;并且将相应的静态资源返回。 这个服务器叫 HTTP 服务器。 简单点说就是解析请求&#xff0c;然后得知需要服务器上面哪个文件夹下哪个名字…

常见的几种web容器(Apache、Nginx、Tomcat)

目录 前言ApacheNginxTomcat ~~~~~~~~ 因为想要面对一个新的开始&#xff0c;一个人必须有梦想、有希望、有对未来的憧憬。如果没有这些&#xff0c;就不叫新的开始&#xff0c;而叫逃亡。 ​​​​ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~…

web容器、中间件以及web服务器的区别

一、web容器 1.web容器的介绍 web容器是一种服务程序&#xff0c;在服务器一个端口就有一个提供相应服务的程序&#xff0c;而这个程序就是处理从客户端发出的请求。实际上&#xff0c;Web容器是一种服务程序&#xff0c;给处于其中的应用程序组件提供环境&#xff0c;使其直接…

Web容器的作用

在eclipse中创建web项目时&#xff0c;会选择一个target runtime&#xff0c;意思就是在什么上面运行&#xff0c;也就是运行时的web容器。我们常用的Tomcat就是一种web容器。简单来说&#xff0c;web容器也就是servlet容器。主要有以下作用&#xff1a; 1.通信支持 通过web容…

docker——Ubuntu镜像操作和apache web容器操作小实训

文章目录 Ubuntu镜像操作apache web容器操作 Ubuntu镜像操作 &#xff08;1&#xff09;拉取最新的Ubuntu官方镜像。 &#xff08;2&#xff09;查看该镜像的详细信息。 &#xff08;3&#xff09;查看该镜像的构建历史。 &#xff08;4&#xff09;删除该镜像。 apache w…

经典Web容器解析漏洞

目录 Apache 文件名解析漏洞(info.php.x 绕过) IIS6.0解析漏洞 文件名解析漏洞(time.asp;1.jpg&#xff09; 目录解析漏洞(1.asp/time.jpg) PHP-CGI 解析漏洞&#xff08;IIS 7.0&#xff08;info.png/.php&#xff09;&#xff09; Nginx解析漏洞 1. 空字节漏洞&#x…

web容器解析

目录&#xff1a; 简述web服务器功能web服务器的限制辅助应用servletweb容器的作用web容器和web服务器的区别和联系 一、简述web服务器功能。 web服务器主要作用是处理客户请求&#xff0c;并作出响应。当浏览器发送一个HTTP请求到web服务器&#xff0c;web服务器解析请求&am…

web容器

目录 前言1、 Web容器简介1.1 Web容器的定义 2、 Web容器的作用2.1 概念区分2.1.1 架构 & 框架2.1.2 Web服务器&#xff08;Web Server&#xff09;2.1.3 中间件&#xff08;Middleware&#xff09; 2.2 Web容器与Spring、Web应用等的关系2.3 Web容器在web开发中的作用 3、…

Web容器(一):Web容器简介

本文参照&#xff1a;极客时间-《深入拆解 Tomcat & Jetty》-开篇词 | Java程序员如何快速成长 01_Web容器学习路径 Web容器 Web技术的发展史 早期的Web应用主要用于浏览新闻等静态页面&#xff0c;HTTP服务器&#xff08;比如Apache、Nginx&#xff09;向浏览器返回静…

MyBatis分页及分页插件使用

7.分页 7.1 作用 减少数据处理量&#xff0c;一次数据量太大了对数据库和网络压力太大 SELECT * FROM school.user LIMIT startIndex,pageSize SELECT * FROM school.user LIMIT 2 -- 0,2 SELECT * FROM school.user LIMIT 2,2 -- startIndex从0开始使用mybatis实现分页步骤…

mybatis-plus 分页插件

目录 1 前言 2 配置分页插件 2.1 selectPage()测试 2.2 自定义分页功能 1 前言 大家之前肯定都用过PageHelper来进行分页&#xff0c;其实mybatisplus中也提供了一个分页插件PaginationInnerInterceptor&#xff0c;其实分页的本质就是内部封装了一个拦截器&#xff0c;对…

springboot使用分页插件

业务逻辑&#xff1a;我想要实现对必备材料信息列表的分页展示&#xff0c;包括查询后的信息也要分页展示 效果图 解决思路&#xff1a; 首先实体类用来接收数据&#xff0c;有一个Dao类用来进行sql查询&#xff0c;有一个servcie(需要传pageNum,PageSiz)&#xff0c;serviceIm…

Mybatis-分页插件

目录 引入介绍 回顾MySQL的limit实现简易分页 问题的产生与解决 分页插件实现步骤 实例演示 分页插件相关参数 实例演示 引入介绍 分页可以将很多条结果进行分页显示如果当前在第一页&#xff0c;则没有上一页如果当前在最后一页&#xff0c;则没有下一页需要明确当前是第几页…

BootStrap分页插件

BootStrap分页插件 官网 官方网址&#xff1a;https://labs.pontikis.net/bs_pagination/docs/ 怎么使用 引入插件所需要的资源文件 <link href"jquery/bootstrap_3.3.0/css/bootstrap.min.css" type"text/css" rel"stylesheet" /> &l…

MyBatis分页插件

目录 分页插件 Mybatis插件典型适用场景 实现思考 第一个问题 第二个问题 自定义分页插件 分页插件使用 添加pom依赖 插件注册 调用 代理和拦截是怎么实现的 PageHelper 原理 分页插件 MyBatis 通过提供插件机制&#xff0c;让我们可以根据自己的需要去增强MyBati…

分页利器——pageHelper分页插件

pageHelper插件在分页上有哪些优势&#xff1f; 分页插件给我们封装了很多参数&#xff0c;不用我们再去硬性编码获取各种参数。 pageHelper封装参数如下&#xff0c;这个参数封装在com.github.pagehelper.page中&#xff1a; count&#xff1a;是否进行count查询&#xff0c;…