HTML跳转锚点

跳转锚点适用于本页面和其他页面的任意标签的跳转以及JavaScript的运行

使用方法即给标签加上独一无二的id属性,再使用a标签跳转
如果是其他页面的标签只需加上其他页面的路径,eg.href="其他页面的路径#zp1"

id属性的最好不要使用数字开头

 	<a href="#zp1" >看照片1</a>
    <a href="#zp2" >看照片2</a>
    <a href="#zp3" >看照片3</a>
    <a href="#zp4" >看照片4</a>
    
    <p id="zp1">照片1</p>
    <img src="./image/test.jpg" alt="照片1">
    <p id="zp2">照片2</p>
    <img src="./image/test.jpg" alt="照片2">
    <p id="zp3">照片3</p>
    <img src="./image/test.jpg" alt="照片3">
    <p id="zp4">照片4</p>
    <img src="./image/test.jpg" alt="照片4">

    <p>介绍完毕!</p>

    <a href="#">回到顶部</a>
    <a href="">刷新页面</a>
    <a href="javascript:alert(123);">点我弹窗</a>

显示效果如下:

整体效果:

在这里插入图片描述

在这里插入图片描述

eg.

1.点击照片跳转锚点3

在这里插入图片描述

2.点击回到顶部锚点

在这里插入图片描述

3.点击刷新页面锚点(因为刷新以后会默认回到顶部所有也有回到顶部的作用)

在这里插入图片描述

4.点击弹窗锚点

在这里插入图片描述

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

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

相关文章

Vert.x学习笔记-什么是Verticle

什么是Verticle Verticle是Vert.x应用中的基本编程单元&#xff0c;类似于Java中的Servlet、Pojo Bean或Akka中的Actor。它可以使用不同的编程语言实现&#xff0c;并且这些由不同编程语言实现的Verticle可以封装到一个模块中&#xff0c;进而部署到一个Vert.x应用中。Verticl…

关系型数据库Redis安装与写入数据

文章目录 安装和初步选择数据库创建键值对数据类型 安装和初步 安装 Redis是开源的跨平台非关系型数据库&#xff0c;特点是占用资源低、查询速度快。 首先&#xff0c;在Github上下载最新发布的Redis-xxxx.zip压缩文件&#xff0c;下载之后解压&#xff0c;并将解压后的路径…

要找事做,我真怕被闲死

要找事做&#xff0c;我真怕被闲死 | 昨晚睡足了5个多小时&#xff0c;元气开始恢复&#xff0c;今晨6点钟醒来&#xff0c;如厕后无睡意&#xff0c;便窝在被子里闭目养神&#xff0c;同时想心事。 7点钟翻身起床穿衣洗刷后&#xff0c;烧瓶开水泡杯浓茶&#xff0c;打开电脑…

如何关闭Windows Defender(亲测可行!!非常简单)

一、背景 Windows Defender&#xff08;简称WD&#xff09;真的太讨厌了&#xff0c;经常给你报你下载的文件是病毒&#xff0c;且不说真的是不是病毒&#xff0c;它都不询问直接删。 另外聚资料显示WD还会不合时宜地执行扫描导致系统变慢&#xff08;不会在合适的、空闲的时…

Linux shell编程学习笔记24:函数定义和使用

为了实现模块化设计和代码重用&#xff0c;很多编程语言支持函数或过程&#xff0c;Linux shell也支持函数定义和调用。 Linux shell中的函数与其它编程语言很多有相似之处&#xff0c;也有自己独特之处。 1 函数的定义 1.1 标准格式 function 函数名(){语句或命令1……语句…

一步一步详细介绍如何使用 OpenCV 制作低成本立体相机

在这篇文章中,我们将学习如何创建定制的低成本立体相机(使用一对网络摄像头)并使用 OpenCV 捕获 3D 视频。我们提供 Python 和 C++ 代码。文末并附完整的免费代码下载链接 我们都喜欢观看上面所示的 3D 电影和视频。您需要如图 1 所示的红青色 3D 眼镜才能体验 3D 效果。它是…

操作系统 | proc文件系统

&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《操作系统实验室》&#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 目录结构 1. 操作系统实验之proc文件系统 1.1 实验目的 1.2 实验内容 1.3 实验步骤 1.4 实验…

Azure 机器学习 - 机器学习中的企业安全和治理

目录 限制对资源和操作的访问网络安全性和隔离数据加密数据渗透防护漏洞扫描审核和管理合规性 在本文中&#xff0c;你将了解可用于 Azure 机器学习的安全和治理功能。 如果管理员、DevOps 和 MLOps 想要创建符合公司策略的安全配置&#xff0c;那么这些功能对其十分有用。 通过…

HTML使用lable将文字与控件进行关联以获取焦点

先养养眼再往下看 注释很详细&#xff0c;直接上代码 <form action""><!-- 第一种方法:用id的方式绑定账户(文字)和输入框 --><label for"zhanghu">账户</label><input "text" id"zhanghu" name"ac…

Milvus Cloud ——Agent 的展望

Agent 的展望 目前,LLM Agent 大多是处于实验和概念验证的阶段,持续提升 Agent 的能力才能让它真正从科幻走向现实。当然,我们也可以看到,围绕 LLM Agent 的生态也已经开始逐渐丰富,大部分工作都可以归类到以下三个方面进行探索: Agent模型 AgentBench[4] 指出了不同的 L…

Azure 机器学习 - 使用受保护工作区时的网络流量流

目录 环境准备入站和出站要求方案&#xff1a;从工作室访问工作区方案&#xff1a;从工作室使用 AutoML、设计器、数据集和数据存储方案&#xff1a;使用计算实例和计算群集方案&#xff1a;使用联机终结点入站通信出站通信 方案&#xff1a;使用 Azure Kubernetes 服务方案&am…

ROS 学习应用篇(三)服务Server学习之Server

话题Topic是订阅器与发布器节点之间的&#xff0c;而服务则是客户端&#xff08;Client&#xff09;和服务器&#xff08;Server&#xff09;间的&#xff0c;前者是异步的&#xff0c;后者是同步的。而且话题是单项的不需要服务器上线&#xff0c;而服务是双向的。在开启服务之…

使用米联客FPGA开发板进行光口开发时遇到的问题总结

使用的开发板型号&#xff1a;米联客MA703FA&#xff0c; 实物图如下 FPGA型号为a35t 米联客提供的开发板资料中的FPGA型号为a100&#xff0c;所以要想使用开发板例程必须进行FPGA的重新选择。如下图 通过对开发板原理图的分析&#xff0c;例程代码不用做任何修改就可使用&am…

Linux常用命令——bzless命令

在线Linux命令查询工具 bzless 增强.bz2压缩包查看器 补充说明 bzless命令是增强“.bz2”压缩包查看器&#xff0c;bzless比bzmore命令功能更加强大。 语法 bzless(参数)参数 文件&#xff1a;指定要分屏显示的.bz2压缩包。 在线Linux命令查询工具

Pathways

信号通路signaling pathway-武汉华美生物 (cusabio.cn) 神经信号通路(Neuronal Signaling)--selleck.cn PI3K/Akt/mTOR信号通路 表观遗传 甲基化 免疫&炎症 酪氨酸蛋白激酶 血管生成 凋亡 自噬 内质网应激&UPR响应 JAK/STAT信号通路 MAPK信号通路 细胞骨架…

网络运维Day11

文章目录 if语句if单分支应用案例 if双分支应用案例 if多分支应用案例 for循环while循环案例 正则表达式基本正则Perl兼容的正则 综合练习总结 if语句 if单分支 if单分支的语法组成&#xff1a; if 条件测试;then 命令序列 fiif 条件测试then 命令序列 fi应用案例 判断用…

Linux学习教程(第二章 Linux系统安装)2

第二章 Linux系统安装 四、使用U盘安装Linux系统 前面章节介绍了如何通过虚拟机 VMware 安装 Linux 系统&#xff0c;而实际开发中&#xff0c;我们更多的是要将 Linux 系统直接安装到电脑上。 直接在电脑上安装 Linux 系统的常用方法有 2 种&#xff0c;分别是用光盘安装和用…

软件自动化测试平台

软件测试分类黑盒、白盒、功能、API、接口、压力测试和性能测试&#xff0c; 自动化测试平台是一种用于自动化执行软件测试过程的工具。 一、自动化测试平台-功能性 1. 接口自动化&#xff1a;对接软件的接口进行测试&#xff0c;验证接口的功能和性能。 2. Web 自动化&…

了解项目管理软件的功能和用途

数字化办公、无纸化办公的概念越来越火&#xff0c;项目管理软件也一跃成为了热门话题。项目管理软件到底什么&#xff1f;项目管理软件是不是项目团队才用得到&#xff1f;项目管理软件都能干什么&#xff1f;今天一篇文章让你对项目管理软件不再迷茫。 什么是项目管理软件&a…

优化编辑距离以测量文本相似度

一、说明 编辑距离是一种文本相似度度量&#xff0c;用于测量 2 个单词之间的距离。它有许多方面应用&#xff0c;如文本自动完成和自动更正。 对于这两种用例中的任何一种&#xff0c;系统都会将用户输入的单词与字典中的单词进行比较&#xff0c;以找到最接近的匹配项&#x…