网页开发如何实现简易页面跳动/跳转,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:

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

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

相关文章

【原创】java+swing+mysql通讯录管理系统设计与实现

前言&#xff1a; 通讯录管理系统是一个设计和实现个人或组织之间联系人信息管理的系统。该系统可能涵盖了联系人的详细信息&#xff0c;如姓名、电话号码、电子邮件地址、地址等&#xff0c;并提供了对联系人信息进行添加、删除、修改、查询等操作的功能。通讯录管理系统旨在…

FISCOBCOS入门(十)Truffle自定义测试helloworld

在windos终端内安装truffle npm install -g truffle truffle --version 出现上图情况也没问题 下面就可以进行我们的操作了 创建一个文件truffle 创建一个空工程 truffle init 在contracts内加入HelloWorld合约 // SPDX-License-Identifier: MIT pragma solidity ^0.8.0; c…

基于Vue+SpringBoot的天然气工程运维系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目详细录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程 12.2.2 流程 22.3 各角色功能2.3.1 系统管理员功能2.3.2 用户服务部功能2.3.3 分公司&#xff08;施工单位&#xff09;功能2.3.3.1 技术员角色功能2.3.3.2 材料员角色功能 2.3…

Linux发展史与环境安装

Linux发展史与环境安装 一、Linux发展史推动技术进步的基本模式理解操作系统的发展理解Linux操作系统的发展 一、Linux的环境安装 一、Linux发展史 Linux和window XX其实都是一样的&#xff0c;定位&#xff1a;操作系统&#xff0c;企业内部&#xff0c;要给用户提供“互联网…

ping命令使用示例解析

【一】ping命令简介 ping &#xff08;Packet Internet Groper&#xff09;是一种因特网包探索器&#xff0c;用于测试网络连接量的程序。ping的一般用途有&#xff1a; ①【测试网络物理链路是否正常】&#xff1a;通过将ICMP(Internet控制消息协议)回显数据包发送到网络终端&…

Nacos安装指南

Nacos安装指南 1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; GitHub主页&#xff1a;https://github.com/alibaba/nacos GitHub的Release下载…

JVM——运行时数据区(堆+方法区+直接内存)

目录 1.Java堆2.方法区**方法区&#xff08;Method Area&#xff09;溢出**方法区&#xff08;Method Area&#xff09;字符串常量池静态变量的存储 3.直接内存(Direct Memory) 1.Java堆 ⚫ 一般Java程序中堆内存是空间最大的一块内存区域。创建出来的对象都存在于堆上。 ⚫ 栈…

leetcode - 串联所有单词的子串 - 最小覆盖子串 - x 的平方根

I30. 串联所有单词的子串 - 力扣&#xff08;LeetCode&#xff09; 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["ab&qu…

如何成为自信出色的演讲者?10条实用技巧助你登台亮相!

成为自信出色的演讲者需要长期练习和学习。以下是我总结的10条实用技巧&#xff1a; 了解你的观众 一个成功的演讲需要考虑观众的背景和需要。你需要了解他们的行业、兴趣和问题。这样可以帮助你调整内容和表达方式&#xff0c;让观众感兴趣并获得价值。你也可以事先收集一些…

PyCharm 远程连接服务器并使用服务器的 Jupyter 环境

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

架构师修炼之道

相信大家都对未来的职业发展有着憧憬和规划&#xff0c;要做架构师、要做技术总监、要做CTO。对于如何实现自己的职业规划也都信心满满&#xff0c;努力工作、好好学习、不断提升自己。 相信成为一名优秀的架构师是很多程序员的目标&#xff0c;架构师的工作包罗万象&#xff…

【星海出品】云存储 ceph

https://ceph.com/en/ ceph组件介绍 Monitor 一个Ceph集群需要多个Monitor组成的小集群&#xff0c;它们通过Paxos同步数据&#xff0c;用来保存OSD的元数据。 OSD OSD全称Object Storage Device&#xff0c;也就是负责响应客户端请求返回具体数据的进程。一个Ceph集群一般都有…

C#winform门诊医生系统+sqlserver

C#winform门诊医生系统sqlserver说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a;基于C#winform架构和sql server数据库 功能模块&#xff1a; 个人中心&#xff1a;修改个人信息、打开照片并进行修改 预约挂号&#xff1a;二级…

那些年我们追过的 内部类

目录 1. 什么是内部类&#xff1f; 2. 内部类的分类 3. 内部类 3.1 实例内部类 3.2 静态内部类 4. 局部内部类 5. 匿名内部类 6.对象的打印 “不积跬步无以至千里&#xff0c;不积小流无以成江海。”每天坚持学习&#xff0c;哪怕是一点点&#xff01;&#xff01;&a…

SQL题

[极客大挑战 2019]EasySQL 进行简单的尝试&#xff0c;就知道是单引号的字符型注入 万能密码进行一个简单的尝试 结果就出来了 还是要了解一下原理 输入的是1&#xff0c;形成的sql语句是错误的SELECT*FROM table_name WHERE username1and password123; 第一个单引号和第二个…

【2023最全教程】python+appium自动化测试元素定位(建议收藏)

关于app自动化测试&#xff0c;元素定位工具有三个&#xff1a; appium自带的Appium Inspector工具 Android ADT原生的工具 python版uiautomator2中的weditor 由于我常用的是前两个&#xff0c;所以下面只介绍前面两种元素定位工具&#xff08;以下内容中均以微博为例子&am…

centos的root密码忘记或失效的解决办法

目录 前言1 单机维护模式2 利用具有管理员权限的用户切换到root用户3 救援模式 前言 在Linux系统中&#xff0c;root用户是最高权限的用户&#xff0c;可以执行任何命令和操作。但是&#xff0c;如果我们忘记了root用户的密码&#xff0c;或者需要修改root用户的密码&#xff…

Vue-Pinia

目录 Pinia状态管理库 使用步骤 1、安装Pinia 2、在vue应用实例中使用pinia 3、在src/stores/token.js中定义stores 4、在组件中使用store axios请求拦截器 代码实现 Pinia状态管理库 Pinia是Vue的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态 一般在登录时…

Java 各种工具类的使用方法

1. 属性拷贝 属性名词和类型相同才能拷贝 import org.springframework.beans.BeanUtils; BeanUtils.copyProperties(dto,wmNews); //dto, wmNews 是两个实体类 dto为源对象&#xff0c;wmNews为目标对象2. list集合转换为string类型 import org.apache.commons.lang3.String…

将Python程序(.py)转换为Windows可执行文件(.exe)

python开发者向普通windows用户分享程序,要给程序加图形化的界面(传送门:这可能是最好玩的python GUI入门实例! http://www.jianshu.com/p/8abcf73adba3),并要将软件打包为可执行文件(.exe结尾),那如何将.py转为.exe ? 将.py转为.exe 第一步:安装pyinstaller(临时调用了国内豆…