前端-基础 常用标签-超链接标签( 锚点链接 )
锚点链接 : 点击链接,可以快速定位到 页面中的某个位置
如果不好理解,讲一个例子,您就马上明白了
===>>>

这个是 刘德华的百度百科 ,可以看到,页面里面有很多内容,那就得有个目录了
而这个目录里显示的,就是锚点链接,就是当你点击这个链接,就会直接跳转至相
应的链接页面~!! (就不用 自己一直往下滑,滑好久才能滑到的内容了 )
这就是 锚点链接 ~!!!
实现 锚点链接
# 第一步 : 在链接文本的 href 属性中,设置属性值为 #名字 的形式,
如 <a href="#two"> 第二集</a>
(这一步就是,你要点击链接,那你就得先有这个链接呀; 而点击这个链接会去
往相应的位置,那就是说这个链接肯定也要有相应的属性,就是 href 后面会有
#名字 ,这个 名字 可以随意起,是用来做标识的,但前面的 # 必须有 )
所以,上示的例子中, two 就是那个名字,就是那个标识 ~~!!
# 第二步 : 找到目标位置标签,里面添加一个 id 属性 = 刚才的名字
如 <h3 id="two">第二集介绍</h3>
然后,就是找到要跳转相应位置的那里,
给它的标签添加一个 id="第一步的名字 即可~!!
示例 :

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

它是上示这样子的~!
然后,我们再做 锚点链接 的两步 ;我们以 人物评价为例来做 锚点链接
根据实现 锚点链接的两步来做

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

然后,我们进行锚点链接的第二步, 找到要直接跳转到位的那个地方
也即 我们示例中的 人物评价 ( 它原本仅是一个 h3 标题 )
现在给它的 h3 标签上 添加属性 id 即 第一步里的 名字 ; 如上示
===>>>


就可以看到, 人物评价明显有了链接的样式,点击,便直接跳转到相应位置~!
相关文章:
前端-基础 常用标签-超链接标签( 锚点链接 )
锚点链接 : 点击链接,可以快速定位到 页面中的某个位置 如果不好理解,讲一个例子,您就马上明白了 >>> 这个是 刘德华的百度百科 ,可以看到,页面里面有很多内容,那就得有个目录了 …...
2024--Django平台开发-基础信息(一)
一、前置知识点 - Python环境搭建 (Python解释器、Pycharm、环境变量等) - 基础语法(条件、循环、输入输出、编码等) - 数据类型(整型、布尔型、字符串、列表、字典、元组、集合等) - 函数(文件操作、返回值、参数、作用域等) - 面向对象 (类、对象、封装、继承、多态等)包和模…...
C++力扣题目--94,144,145二叉树递归遍历
思路 这次我们要好好谈一谈递归,为什么很多同学看递归算法都是“一看就会,一写就废”。 主要是对递归不成体系,没有方法论,每次写递归算法 ,都是靠玄学来写代码,代码能不能编过都靠运气。 本篇将介绍前后…...
开源游戏引擎:创造无限可能 | 开源专题 No.56
godotengine/godot Stars: 62.6k License: MIT Godot Engine 是一个功能强大的跨平台游戏引擎,可用于创建 2D 和 3D 游戏。它提供了一套全面的常见工具,让用户可以专注于制作游戏而不必重复造轮子。该引擎支持将游戏一键导出到多个平台上,包…...
MyBatisPlus学习一:快速入门
前言 前面快速学习了Mybatis,现在开始快速学习MyBatisPlus 学习教程: 黑马mybatis教程全套视频教程,2天Mybatis框架从入门到精通 黑马程序员最新MybatisPlus全套视频教程,4小时快速精通mybatis-plus框架 简介 MyBatisPlus 是…...
2024最新外贸建站:ChemiCloud主机购买使用及自建外贸独立站教程
随着电商平台竞争的加剧,许多外贸从业者意识到减少对平台依赖的重要性,并选择搭建自己的外贸独立站来获得更多的控制权和灵活性。即使是没有建站基础的新手,也可以通过学习建站来实现这一目标。下面是一个适用于新手的外贸建站教程࿰…...
校招社招,认知能力测验,③如何破解语言常识类测试题?
作为认知能力测评中的一个环节,语言常识类,是大概率的出现,不同的用人单位可能略有不同,语言是一切的基础,而常识则意味着我们的知识面的宽度。 语言常识类的测试,如果要说技巧?难说....更多的…...
了解一下InternLM2
大模型的出现和发展得益于增长的数据量、计算能力的提升以及算法优化等因素。这些模型在各种任务中展现出惊人的性能,比如自然语言处理、计算机视觉、语音识别等。这种模型通常采用深度神经网络结构,如 Transformer、BERT、GPT( Generative P…...
关于使用统一服务器,vscode和网页版jupyter notebook的交互问题
autodl 查看虚拟环境 在antodl上租借了一个服务器,通过在网页上运行jupyter notebook和在vscode中运行,发现环境都默认的是miniconda3。 conda info --envs 当然环境中所有的包都是一样的。 要查看当前虚拟环境中安装的所有包,可以使用以…...
Linux22.04系统安装显卡驱动,cuda,cudnn流程
1. 安装显卡驱动 ubuntu-drivers deices显示所有适配显卡的驱动型号,recommended为推荐安装 安装 sudo apt install nvidia-driver-440重启 sudo reboot验证 nvidia-smi2. 安装cuda 在 CUDA Toolkit 的下载页面选择系统版本和安装方式,下载并运行…...
【常考简答题】操作系统
目录 1、什么是进程 2、创建进程步骤 3、什么是死锁 4、死锁四个必要条件 5、什么是内存管理 6、内存管理功能 7、进程的三个基本状态转化图 8、操作系统为什么引入线程 9、什么是对换技术,好处是什么 10、DMA直接存取控制工作方式流程图 11、什么是假脱…...
Large Language Models Paper 分享
论文1: ChatGPTs One-year Anniversary: Are Open-Source Large Language Models Catching up? 简介 2022年11月,OpenAI发布了ChatGPT,这一事件在AI社区甚至全世界引起了轰动。首次,一个基于应用的AI聊天机器人能够提供有帮助、…...
微信小程序实战-01翻页时钟-1
文章目录 前言需求分析功能设计界面设计界面结构设计界面样式设计 逻辑设计 单页功能实现运行结果 前言 我经常在手机上用的一款app有一个功能是翻页时钟,基于之前学习的小程序相关的基础内容,我打算在微信小程序中也设计一个翻页时钟功能,J…...
BigDecimal的性能问题
BigDecimal 是 Java 中用于精确计算的数字类,它可以处理任意精度的小数运算。由于其精确性和灵活性,BigDecimal 在某些场景下可能会带来性能问题。 BigDecimal的性能问题 BigDecimal的性能问题主要源于以下几点: 内存占用:BigDec…...
Defi安全-Monox攻击事件Foundry复现
其它相关内容可见个人主页 Mono攻击事件的介绍见:Defi安全–Monox攻击事件分析–phalconetherscan 1. 前情提要和思路介绍 Monox使用单边池模型,创建的是代币-vCash交易对,添加流动性时,只需添加代币,即可进行任意代…...
大二上总结和寒假计划
👂 Start Again - Connor Price/Chloe Sagum - 单曲 - 网易云音乐 👂 年年 - 徐秉龙 - 单曲 - 网易云音乐 目录 🌼前言 👊成长 (1)情感 (2)运动 (3)穿搭…...
使用 pdfh5 实现 pdf 预览功能
1. 安装 npm install pdfh5 2. 使用 html部分: <div id"showPdf" style"width: 100%;"></div> js部分: <script> //合同展示组件 import Pdfh5 from pdfh5 //合同组件样式 import pdfh5/css/pdfh5.css expo…...
HttpRunner辅助函数debugtalk.py
辅助函数debugtalk.py Httprunner框架中,使用yaml或json文件进行用例描述,无法做一些复杂操作,如保存一些数据跨文件调用,或者实现一些复杂逻辑判断等,为了解决这个问题,引入了debugtalk.py辅助函数来进行一…...
PC端扫描小程序二维码登录
1、获取二维码地址,通过请求微信开发者文档中的服务端获取无限制小程序二维码URL #controller层 import org.apache.commons.codec.binary.Base64;/*** 获取小程序二维码*/PassTokenGetMapping("/getQrCode")public AjaxResult getQrCode(BlogUserDto bl…...
计算机毕业设计 | SpringBoot+vue移动端音乐网站 音乐播放器(附源码)
1,项目背景 随着计算机技术的发展,网络技术对我们生活和工作显得越来越重要,特别是现在信息高度发达的今天,人们对最新信息的需求和发布迫切的需要及时性。为了满足不同人们对网络需求,各种特色,各种主题的…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
