网页开发如何实现简易页面跳动/跳转,html课堂练习/作业,页面ABC的相互跳转

先建一个文件夹,文件夹包含三个文件夹,三个文件夹分别包含各自的代码。(可以只建一个文件夹,文件夹包含各页面代码)

页面1的代码:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><body>
<body style="background:yellow;">
<ul><li><a href="#" target="A">页面A</a></li><li><a href="../../2/B/B.html">页面B</a></li><li><a href="../../3/C/C.html ">页面C</a></li>
</ul>
<h1>这是页面1</h1>
</body>
</html>

页面2的代码:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><body>
<body style="background:pink;">
<ul><li><a href="../../1/A/A.html" >页面A</a></li><li><a href="#">页面B</a></h2></li><li><a href="../../3/C/C.html ">页面C</a></li>
</ul>
<h1>这是页面2</h1>
</body>
</html>

页面3的代码:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><body>
<body style="background:cyan;">
<ul><li><a href="../../1/A/A.html">页面A</a></li><li><a href="../../2/B/B.html">页面B</a></li><li><a href="#">页面C</a></li>
</ul>
<h1>这是页面3</h1>
</body>
</html>

运行其中一个代码(例如运行页面2的代码)

Edge浏览器运行结果:

点击页面1:

再点击页面3:

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

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

相关文章

什么是兼容性测试?兼容性测试侧重哪些方面?

兼容性测试主要是检查软件在不同的硬件平台、软件平台上是否可以正常的运行&#xff0c;即是通常说的软件的可移植性。 兼容的类型&#xff0c;如果细分的话&#xff0c;有平台的兼容&#xff0c;网络兼容&#xff0c;数据库兼容&#xff0c;以及数据格式的兼容。 兼容测试的…

安装R和Rstudio

目录 一、安装R 二、安装Rstudio 一、安装R R官网&#xff1a;官网链接 点击CRAN 选择一个镜像 我用的winows&#xff0c;所以我选择 download R for windows 进去之后选择 base 点击下载 找到刚才下载的可执行文件&#xff0c;安装 选择语言 下一步 选择一个位置安装 下一…

C#中ManualResetEvent的Reset,Set,WaitOne

在C#中&#xff0c;ManualResetEvent是一个用于同步的信号量对象。它允许一个线程等待其他线程的信号&#xff0c;以便在特定条件下继续执行。下面是关于Reset()、Set()和WaitOne()方法的说明&#xff1a; Reset(): 此方法将ManualResetEvent重置为初始状态&#xff0c;即将其…

unexpected end of stream on

SpringCloud使用FeignClient调用第三方接口报错unexpected end of stream on ; 解决方法&#xff1a; 1.检查服务器端口是否被占用 lsof -i:端口&#xff1b; 2.nacos添加超时配置&#xff1a;

系列一、请谈谈你对JVM的理解?Java8的虚拟机有什么更新?

一、请谈谈你对JVM的理解&#xff1f;Java8的虚拟机有什么更新&#xff1f; JVM是Java虚拟机的意思。它是建立在操作系统之上的&#xff0c;由类加载器子系统、本地方法栈、Java栈、程序计数器、方法区、堆、本地方法库、本地方法接口、执行引擎组成。 &#xff08;1&#xff0…

SIMULIA-Simpack 2022x新功能介绍

通用功能 增加库伦摩擦类型 力元95 Coulomb Friction增加了3种新的摩擦方向类型用于模拟平面、圆柱和球面摩擦。 针对平移和旋转摩擦改进了滑动到粘着过渡阶段的检测&#xff0c;增加一个参数定义两种不同的滑移-粘滞过渡模式&#xff0c;即“Unloaded stick stiffness”和“…

深入流行推荐引擎3:Spotify音乐推荐系统

深入流行推荐引擎3&#xff1a;Spotify音乐推荐系统 Spotify音乐推荐系统通过矩阵分解发现每周&#xff08;Discover Weekly via Matrix Factorization&#xff09;Discover Weekly 如何运作&#xff1f;&#xff08;How Discover Weekly Works?&#xff09;矩阵分解&#xff…

Fe-safe/Isight/Tosca2022新功能

介绍Fe-safe2022新功能。 Fe-safe 支持Abaqus2022 ODB文件 Isight 此版本中没有增强功能。 Tosca结构 Tosca Structure 2022中的新功能和增强功能&#xff1a; 增强拓扑优化的肋条Rib设计制造约束。 增强了拓扑优化的最大Member约束&#xff0c;该约束更健壮、稳定。 默…

VivadoAndTcl: namespace

命名空间&#xff0c;其实际是一系列变量和过程的合集&#xff0c;从而让TCL 解释器能够对这些变量和过程进行分类管理。 # 声明如下 namespace eval ns0 {proc print {} {puts "Tcl Proc 0" }proc add {a b} {return [expr {$a $b}] } }namespace eval ns1 …

语义检索系统【全】:基于milvus语义检索系统指令全流程-快速部署版

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术…

程序设计实践学习笔记

第1题 题目描述 创建一个返回四舍五入到最接近整数的分数之和的函数。在矩阵中有每行的第一个数字表示分子&#xff0c;第二个数子表示分母,挑战者需要将该分数的结果进行四舍五入并将矩阵中所有分数结果总和进行返回。 输入输出格式 输入格式 数字 N 表示的是矩阵的行数。…

二十三种设计模式:解密职责链模式-购物优惠活动的设计艺术

在购物领域&#xff0c;为了吸引和激励消费者&#xff0c;商家常常会推出各种优惠活动&#xff0c;比如满减、打折、赠品等。然而&#xff0c;这些优惠活动的处理逻辑通常较为复杂&#xff0c;需要根据购物订单的条件进行判断和处理。本文将深入探讨职责链模式的实现方式&#…

记一次线上bug排查-----SpringCloud Gateway组件 请求头accept-encoding导致响应结果乱码

基于公司的业务需求&#xff0c;在SpringCloud Gateway组件的基础上&#xff0c;写了一个转发服务&#xff0c;测试开发阶段运行正常&#xff0c;并实现初步使用。但三个月后&#xff0c;PostMan请求接口&#xff0c;返回异常&#xff0c;经排查&#xff0c;从日志中获取到转发…

开启数据库审计 db,extended级别或os级别)并将审计文件存放到/opt/oracle/audit/下

文章目录 1、登录到数据库2、查看审计状态3、创建审计目录4、启用审计5、设置审计文件路径6、再次查看结果 1、登录到数据库 使用SQL*Plus或者其他Oracle数据库客户端登录到数据库。 sqlplus / as sysdba;2、查看审计状态 show parameter audit;目前是DB状态&#xff0c;并且…

ubuntu20.0安装 java并配置环境

步骤1&#xff1a;下载jdk 我是从官网下载的JDK&#xff0c;可以自己去下载 这是我上传的JDK11的Linux安装包 https://download.csdn.net/download/djklsajdklsajdlk/88552004 步骤2&#xff1a;创建单独的目录 sudo mkdir /usr/local/java 步骤3&#xff1a;将下载的文件…

python-opencv五种自动 ,白平衡算法深度学习实现, 缺陷检测 github

python-opencv五种自动白平衡算法&#xff0c;附源码直接可用&#xff08;均值、完美反射、灰度世界、动态阈值、基于图像分析的偏色检测及颜色校正&#xff09; 7系统中&#xff0c;您也可以通过控制面板来打开摄像头。打开开始菜单&#xff0c;点击控制面板&#xff0c;选择…

【算法萌新闯力扣】:旋转字符串

力扣热题&#xff1a;796.旋转字符串 开篇 今天下午刷了6道力扣算法题&#xff0c;选了一道有多种解法的题目与大家分享。 题目链接:796.旋转字符串 题目描述 代码思路 完全按照题目的要求&#xff0c;利用StringBuffer中的方法对字符串进行旋转&#xff0c;寻找相同的一项 …

第 372 场 LeetCode 周赛题解

A 使三个字符串相等 求三个串的最长公共前缀 class Solution { public:int findMinimumOperations(string s1, string s2, string s3) {int n1 s1.size(), n2 s2.size(), n3 s3.size();int i 0;for (; i < min({n1, n2, n3}); i)if (!(s1[i] s2[i] && s2[i] s…

[工业自动化-23]:西门子S7-15xxx编程 - 软件编程 - 西门子PLC人机界面交互HMI功能概述、硬件环境准备、软件环境准备

目录 一、什么是人机界面 二、什么是PLC人机交互界面HMI 三、人机界面设计的功能列表 四、开发主机与PLC的连接方式 五、开发主机与HMI的连接方式 六、HMI组态 一、什么是人机界面 人机界面是指人与机器或系统之间的交互界面。它是人类与计算机或其他设备之间进行信息交换…

NSSCTF第13页(2)

[HNCTF 2022 Week1]Challenge__rce 提示?hint 访问看到了源码 <?php error_reporting(0); if (isset($_GET[hint])) { highlight_file(__FILE__); } if (isset($_POST[rce])) { $rce $_POST[rce]; if (strlen($rce) < 120) { if (is_string($rce…