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

news2024/11/28 8:49:36
先建一个文件夹,文件夹包含三个文件夹,三个文件夹分别包含各自的代码。(可以只建一个文件夹,文件夹包含各页面代码)

页面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.coloradmin.cn/o/1216268.html

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

相关文章

小程序转换工具—Antmove 使用教学

自从微信小程序问世以后&#xff0c;字节、阿里、百度巨头们都各自搞各自的小程序平台&#xff0c;各有各的技术标准。基础技术都大差不差&#xff0c;但就是没法统一。搞得我们这些对接各平台的程序猿们苦不堪言。 虽说uniapp、Taro、Mpvue、Weex、Flutter都支持跨平台小程序…

nginx服务器配置http/2

nginx服务器配置http/2 文章目录 nginx服务器配置http/21.安装nginx2.ssl证书2.1 创建ssl证书 3.配置nginx3.1 配置http/2 4.保存配置文件5.重启nginx6.测试 1.安装nginx 如果你没有安装nginx&#xff0c;可以参考这里&#xff1a;nginx教程 2.ssl证书 如果你没有ssl证书&…

深入C++ Vector:解密vector的奥秘与底层模拟实现揭秘

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; &#x1f354;前言&#xff1a; 我们学习了STL中的string以及其所有重要接口并进行了模拟实现&#xff0c;但是STL中包含的内容不止于此。学习了string之后继续学习STL中的vector&#xff0c;学习成本会大大降低&#…

SAP KO22内部订单预算BAPI与BDC

KO22可以为内部订单预先维护预算&#xff0c;以便在后续成本实际产生时进行控制。 使用BAPI进行创建&#xff1a;KBPP_EXTERN_UPDATE_CO SAP note 625613中对该BAPI的使用方式有详细介绍&#xff0c;使用时可进行参考。 年度预算&#xff1a;e_gjahr传值、e_ges置空&#xff…

智慧农业新篇章:拓世法宝AI智能直播一体机助力乡村振兴与农业可持续发展

随着乡村振兴战略的深入推进&#xff0c;农业发展日益成为国家关注的焦点。在这一大背景下&#xff0c;助农项目的兴起成为支持乡村振兴的一项重要举措。 乡村振兴战略的实施&#xff0c;得益于《关于推动文化产业赋能乡村振兴的意见》、《关于全面推进乡村振兴加快农业农村现…

怎么把ogg转mp3格式?

音频声音小怎么增强&#xff1f;现在对于音频文件的使用越来越频繁&#xff0c;自媒体从业者会使用到音频素材&#xff0c;还有很多人会从网上下载很多的学习音频文件&#xff0c;有时候下载的音频文件播放之后会发现声音很小&#xff0c;此时大家会调大音频播放器的音量或者电…

GBase8a-GDCA-第一次阶段测试

文章目录 主要内容 总结 主要内容 GBase8a-第一阶段测试答案 总结 以上是今天要讲的内容&#xff0c;GBase8a-GDCA-第一次阶段测试题及答案。

LeetCode(19)最后一个单词的长度【数组/字符串】【简单】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 58. 最后一个单词的长度 1.题目 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 …

el-select下拉框只回显value不回显label的原因以及解决方法

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 原因分析&#xff1a; 提示&#xff1a;这里填写问题的分析&#xff1a; el-select的采用的是map的key value结构&#xff0c;因此只显示value而不显示label的原因是&#xff0c;value的类型不正确&…

webpack系列之:手把手教你 打包和使用js文件

项目初始化 mkdir demo1 cd demo1 npm init // 一路回车 创建一个package.json文件webpack安装 npm install --save-dev webpackJs文件打包 可以先看一下最后的项目情况&#xff0c;然后我们再开始一步步操作 创建需要打包的js文件 创建文件夹用于存放js文件 // 创建文…

抖音测试付费短视频:从短剧领域拓展到知识、娱乐全品类

11月16日&#xff0c;抖音开始测试短视频内容付费&#xff0c;即用户在观看创作者的内容时&#xff0c;部分内容需要付费解锁才能全部观看&#xff0c;涉及范围不仅包括此前已经进行付费试水的短剧领域&#xff0c;还拓展至知识、娱乐等几乎全品类内容&#xff0c;用户可按单条…

asp.net core EF Sqlserver

一、EF CORE的使用 1、使用NuGet来安装EF CORE 使用程序包管理器控制台&#xff0c;进行命令安装 //安装 Microsoft.EntityFrameworkCoreInstall-Package Microsoft.EntityFrameworkCore //安装 Microsoft.EntityFrameworkCore.SqlServer Install-Package Microsoft.EntityF…

【数据结构】C语言实现栈

&#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;C/C领域新星创作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;数据结构与算法&#x1f91d;希望作者的文章能对你有所帮助&#xff0c;有不足的地方请在评论区留言指正&#xff0c;大家…

浅谈青岛啤酒厂事件—论智能视频监控的重要性和必要性

近日&#xff0c;“青岛啤酒三厂有工人在原料仓小便”的视频曝光&#xff0c;引发舆论关注。虽然此次事件原委已经明了&#xff0c;但此次事件也给我们敲了一个警钟。啤酒厂生产的是入口的食品原料&#xff0c;就因一个工作口角就导致有人罔顾大众食品安全&#xff0c;作出严重…

Windows Server 2012 R2系统服务器远程桌面服务多用户登录配置分享

Windows Server 2012系统在没有安装远程多界面的情况下&#xff0c;最多只能同时运行2个远程桌面&#xff0c;如果是有多个技术员、合伙人同时操作或是像游戏开发需要用到多界面&#xff0c;但是没有安装就很不方便&#xff0c;今天飞飞来和你们分享Windows server 2012R2系统远…

rtsp、rtmp、m3u8、flv、mkv、3gp、mp4直播流测试地址

✍️作者简介&#xff1a;沫小北/码农小北&#xff08;专注于Android、Web、TCP/IP等技术方向&#xff09; &#x1f433;博客主页&#xff1a;沫小北/码农小北 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN &#x1f514;如果文章对您有一定的帮助请&…

pwnable.kr--pwn游戏之fd

题目描述&#xff1a; 大致告诉我们研究的可能是Linux下的文件描述符。需要我们用ssh链接过去找到flag。于是我们就过去看看&#xff1a; 乍看情况有点像简单nc&#xff0c;我们尝试看看目录下都有什么&#xff1a; 看到flag&#xff0c;那么尝试输出呢&#xff1f; Permission…

AI换脸的一种技术实施例

刚刚看一个帖子的时候发现了AI识别中一个可以利用到其它场景的的一个通用处理步骤&#xff1a;人脸矫正。 人脸识别过程&#xff1a; 1.首先识别到关键的人脸部分&#xff0c;经过一个粗筛过程&#xff0c;把目标物的脸部图样先抓出来。 2.然后&#xff0c;因为人脸的水平&…

AI自动直播软件,ai无人直播工具2.0支持多平台矩阵直播一键同步直播脚本内容【直播脚本+使用技术教程】

AI实景直播软件简介&#xff1a; 支持一台手机自动直播&#xff0c;支持语音和文字同时回复&#xff0c;商品自动弹窗&#xff0c;支持抖音、快手、视频号、美团平台直播&#xff0c;支持矩阵直播&#xff0c;一键同步直播脚本内容。 设备需求&#xff1a; 安卓手机&#xf…

Hack_Kid

Hack_Kid 靶机地址&#xff1a;https://download.vulnhub.com/hackerkid/Hacker_Kid-v1.0.1.ova 一、主机发现 发现靶机IP为192.168.80.135 二、端口扫描 发现靶机开启了80、53、9999端口 三、信息收集 1.访问80端口 2.访问9999端口 根据靶场作者的提示&#xff0c;不…