WEB 工程路径专题--base 标签的使用和建议示意图

news2024/11/17 7:21:17

目录

WEB 工程路径专题

工程路径解决方案

解决方案:相对路径

2. 相对路径带来的问题举例 => 示意图

解决方案:base 标签

base 基本介绍

base 应用实例

a.html

b.html

Servlet03.java

练习

login.HTML

user.html

WEB 工程路径注意事项和细节

注意事项和细节说明

小结:

练习

server代码


WEB 工程路径专题

 

 

工程路径解决方案

解决方案:相对路径

1. 说明: 使用相对路径来解决,一个非常重要的规则:页面所有的相对路径,在默认情

况下,都会参考当前浏览器地址栏的路径 http://ip:port/工程名/ + 资源来进行跳转。所以

我们可以直接这样写

 

2. 相对路径带来的问题举例 => 示意图

 

 

3. 如果需要指定页面相对路径参考的的路径,可以使用 base 标签来指定

解决方案:base 标签

base 基本介绍

1. base 标签是 HTML 语言中的基准网址标记,它是一个单标签,位于网页头部文件的 head

标签内

2. 一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标,是一种表达路

径和连接网址的标记。

3. 常见的 url 路径形式分别有相对路径与绝对路径,如果 base 标签指定了目标,浏览器

将通过这个目标来解析当前文档中的所有相对路径,包括的标签有(a、img、link、form)

4. 也就是说,浏览器解析时会在路径前加上 base 给的目标,而页面中的相对路径也都转

换成了绝对路径。使用了 base 标签就应带上 href 属性和 target 属性

base 应用实例

1、需求: 演示 base 标签的使用, 说明: 先演示和 html 相关的路径跳转,再演示和Servlet路径转发, 一步步来

a.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>

<body>
    <h1>这是 a.html</h1>
    <a href="d1/d2/b.html">跳转到/d1/d2/b.html</a>
    <br /><br />
    <a href="servlet03">转发到/d1/d2/b.html</a>
</body>

</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b.html</title>
    <!-- 解读
1. 如果没有<base href="http://localhost:10000/_servlet/">
2. 当点击 返回 a.html 超链接,将会以当前浏览器的地址为路径来确定 路径
3. 如果增加了<base href="http://localhost:10000/_servlet/">
4. 将以 base 指定的 href 的地址为路径,来确定 超链接的路径
-->
    <!--<base href="http://localhost:10000/_servlet/">-->
    <!--简写形式-->
</head>

<body>
    <h1>这是/d1/d2/b.html</h1>
    <a>返回 a.html~</a>
</body>

</html>

Servlet03.java

public class Servlet03 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //这里我们希望通过转发来定位b.html
       
        //1. 在服务器端 解析第一个 /时,会被解析成 http://ip:port/项目名[application context]
        //   补充: 项目名=> 说成 application context
        //2. "/d1/d2/b.html" => 被解析 http://ip:port/项目名/d1/d2/b.html
        System.out.println("Servlet03 进行转发~~~ ....");
        request.getRequestDispatcher("/d1/d2/b.html").forward(request,response);
        //3. 在服务器进行转发时, 没有 / 就按照默认的方式参考定位 http://ip:port/项目名/
        //  仍然使用上面的
        //request.getRequestDispatcher("d1/d2/b.html").forward(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

练习

login.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<h1>用户登录</h1>
<!--
请写出 login.html 在不通过Servlet转发情况下, 如何 通过表单提交, 找到 user.html, 把所有的写法列出来
1. 完整的url  http://localhost:8080/webpath/views/user/user.html
2. 使用相对路径 action="views/user/user.html" => 使用当前浏览器的 地址栏 ip:port/工程路径/ + ...
3. action="/webpath/views/user/user.html"
   浏览器对第一个 / 进行解析 为 http://localhost:8080/ + webpath/views/user/user.html
   同样是一个完整url
-->
<!--<form action="/webpath/hi" method="post">-->
    <form action="/webpath/redirect" method="post">
    u: <input type="text" name="username"><br/>
    <input type="submit" value="登录">
</form>
</body>
</html>

user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户页面</title>
    <!--
        1. 使用相对路径: <a href="../../login.html">点击返回登录</a>
        2. 使用相对路径是比较麻烦,即使成功,还需要考虑是直接定位到这个资源还是请求转发到这个资源
        3. 使用base 标签给一个固定的相对路径
        4. <base href="/webpath/"> 该标签是浏览器解析 http://localhost:8080/webpath/
        5. 在 base 得到的url 路径基础上 <a href="login.html">点击返回登录</a> =>
           http://localhost:8080/webpath/login.html通.
    -->
    <base href="/webpath/">
</head>
<body>
<h1>用户页面</h1>
<a href="login.html">点击返回登录</a>
</body>
</html>

WEB 工程路径注意事项和细节

注意事项和细节说明

1. Web 工程的相对路径和绝对路径

                ● 相对路径是:

                ● .表示当前目录

                ● ..表示上一级目录

                ● 资源名 表示当前目录/资源名

                ● 绝对路径: http://ip:port/工程路径/资源路径

2. 在实际开发中,路径都使用绝对路径,而不是相对路径

3. 在 web 中 / 斜杠 如果被浏览器解析,得到的地址是:

                http://ip[域名]:port/比如: <a href="/">斜杠</a>

4. 在 web 中 / 斜杠 如果被服务器解析,得到的地址是:http://ip[域名]:port/工程路径/,

你也可以理解成 /工程路径/ 下面的几种情况就是如此:

                ● <url-pattern>/servelturl</url-pattern>

                ● servletContext.getRealPath("/"); ==> 是得到执行路径/工作路径

                ● request.getRequestDispatcher("/");

5. 在 javaWeb 中 路径最后带 / 和 不带 / 含义不同, 一定要小心,

  • 比如 <a href="/a/servlet03">网址</a> : servlet03 表示资源
  • <a href="/a/servlet03/">网址</a> : servlet03 表示路径

6. 特别说明:重定向 response.sendRediect("/"); 这条语句虽然是在服务器执行的,但是,

服务器是把斜杠 / 发送给浏览器解析。因此得到地址 http://ip[域名]:port/

小结:

在编写资源路径时: , 考虑这么几点

(1) 这个路径 前面有没有 /

(2) 这个路径 在哪里被解析 [服务器还是浏览器] , 如果前面有 / , 并且是在 浏览器被解析的 被解析成 http://ip:port/ , 如果在服务器端被解析 , 被解析成 工程路径 /

(3) 如果这个路径,前面没有 , 并且在浏览器被解析,则以浏览器当前的地址栏去掉资源部分,作为一个相对路径.

(4) 这个路径,最后有没有 , 如果最后有 表示路径, 如果没有 表示资源

练习

在通过 Servlet 重定向情况下, 如何 通过表单提交, 找到user.html, 把所有的写法列出来 

前面页面代码  a.html  b.html以及完成这里就是server代码

server代码

package com.hspedu.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class Servlet03 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        //这里我们希望通过转发来定位b.html
        //1. 在服务器端 解析第一个 /时,会被解析成 http://ip:port/项目名[application context]
        //   再补充: 项目名=> 说成 application context
        //2. "/d1/d2/b.html" => 被解析 http://ip:port/项目名/d1/d2/b.html
        System.out.println("Servlet03 进行转发~~~ ....");
        request.getRequestDispatcher("/d1/d2/b.html").forward(request,response);
        //3. 在服务器进行转发时, 没有 / 就按照默认的方式参考定位 http://ip:port/项目名/
        //   建议,仍然使用上面的
        //request.getRequestDispatcher("d1/d2/b.html").forward(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

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

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

相关文章

Storm proxies动态代理IP怎么挑选海外代理IP?

在选择海外代理IP时&#xff0c;需要考虑以下几个因素&#xff1a; 代理IP的稳定性和速度&#xff1a;代理IP的稳定性和速度是影响代理效果的重要因素。需要选择一个稳定、速度较快的代理IP&#xff0c;以确保能够快速、稳定地访问目标网站。代理IP的位置和数量&#xff1a;需要…

Node 内置模块 【fs模块】

文章目录 &#x1f31f;前言&#x1f31f;fs模块&#x1f31f; 使用fs模块&#x1f31f; 异步编程和同步编程&#x1f31f; 异步编程&#x1f31f; 同步编程 &#x1f31f;常用操作&#x1f31f; 文件操作&#x1f31f; readFile异步读取文件&#x1f31f; readFileSync同步读取…

OPencv图像读取_显示_保存

OPencv图像读取_显示_保存 一.OpenCV图像处理系统组成&#xff1a; OpenCV 主体分为五个模块&#xff0c;分别为CV、MLL,HighGUI、CXCORE&#xff0c;CVAux。OpenCV 的 CV 模块包含基本的图像处理函数和高级的计算机视觉算法。ML 是机器学习库&#xff0c;包含一些基于统计的…

哪个品牌的洗地机更好用?热门洗地机盘点

洗地机没有使用过之前一直怀疑是不是智商税&#xff0c;等到后面体验过之后&#xff0c;发现是真的香。因为不可否认的是&#xff0c;洗地机的清洁力还是不错的。不仅能够快速清洁干净地面&#xff0c;大大的节省了我们的清洁用时&#xff0c;操作起来也省心省力。作为一个洗地…

智驾系统的设计瓶颈之:电源管理设计中的功能安全和状态机

摘要&#xff1a; 本文从智驾系统电源管理设计的角度详细分析了整个系统的电源设计方式。 在整车电源管理中&#xff0c;IC 需要将多轨降压、升压和 LDO 稳压功能与每个电轨的参数&#xff0c;以及与其他电轨间交互的复杂可配置能力整合在一起。对于智驾系统设计人员而言&…

Python中类的属性、多继承、自省机制中的__mro__、__dict__ 和dir介绍

一、通过类名修改属性和通过类的实例去修改类的属性的区别 在 Python 中&#xff0c;类的属性可以通过类名或类的实例访问和修改。但是&#xff0c;通过类名修改属性和通过类的实例修改属性之间有一些区别。通过类名修改属性实际上是修改类的属性。这意味着如果你修改了类的属性…

GrapeCity Documents for Word 6.1.0

GrapeCity Documents for Word 6.1.0 改进了聚合函数中多个表达式的使用。 特征 GcWord 模板&#xff1a; 现在可以使用表达式作为聚合函数的参数。表达式可以在函数中使用常量、聚合或两个集合。现在可以进行以下计算&#xff1a; 使用常量 - {{ calc Sum(2 ds.value)}}。在聚…

5.MapReduce概述

ps.实际生产环境中并不会使用mapReduce,而是spark和flink,但是它可以建立分布式的思想。 1.MapReduce框架 2.mapReduce小项目练习 ps.基本流程:一般都是在代码层面引入hadoop依赖,然后在windows环境下进行代码编写测试,没有问题的话,把代码打包成jar包,然后拖入xShell,利用…

基于单片机的电路特性测试仪的设计

摘 要 当今社会科技的飞速发展&#xff0c;智能和便捷已经成为人们的日常诉求。现在放大电路在使用过程中经常出现故障&#xff0c;并且需要测试电路数据&#xff0c;但是大多数是手动进行测试&#xff0c;一定程度上影响了工作效率。 为了测量数据更安全更便捷&#xff0c;针…

YOLOv8 更换主干网络之 GhostNetV2

《GhostNetV2:Enhance Cheap Operation with Long-Range Attention》 轻量级卷积神经网络(CNN)是专门为在移动设备上具有更快推理速度的应用而设计的。卷积操作只能捕捉窗口区域内的局部信息,这防止了性能的进一步提高。将自注意力引入卷积可以很好地捕捉全局信息,但这将大…

MySQL-----表的增删查改

文章目录 前言一、create1. 单行数据 全列插入2. 多行数据 指定列插入3. 插入冲突否则更新4. 替换 二、retrieve1. select列1.1 全列查询1.2 指定列查询1.3 查询字段为表达式1.4 为查询结果指定别名1.5 结果去重 2. where条件2.1 英语不及格的同学及英语成绩 ( < 60 )2.2 …

Google浏览器翻译无法正常使用解决

1.查找可用服务器地址 按WinR键打开运行→输入cmd回车&#xff0c;打开命令提示符→输入ping google.cn 回车。记录一下下图红框里的ip地址&#xff0c;一会要用到 最近自己ping出来的ip可能不能用了&#xff0c;可以尝试用下面的ip 142.251.163.90 142.250.113.90 142.251.…

springcloudfeign原理和流程

什么是Feign&#xff1f; Feign 的英文表意为“假装&#xff0c;伪装&#xff0c;变形”&#xff0c; 是一个http请求调用的轻量级框架&#xff0c;可以以Java接口注解的方式调用Http请求&#xff0c;而不用像Java中通过封装HTTP请求报文的方式直接调用。Feign通过处理注解&am…

【Cisco Packet Tracer| 四.跨交换机VLAN实验】

文章目录 一.连接实验拓扑图并设置主机IP地址1.连接实验拓扑图2.设置主机的IP地址 二.划分VLAN前测试是否ping通三.划分VLAN1.给主机划分VLAN2.给交换机之间的f0/24端口从Access模式切换到Trunk模式 四.划分VLAN后测试是否ping通五.另一种测试方式-信封图标 一.连接实验拓扑图并…

nginx加tomcat动静分离,负载均衡

tomcat是什么&#xff1a;java开发的开源服务器 处理动态页面&#xff0c;静态页面处理能力一般 jvm参数优化 配置添加 在119行之前 以2cpu 4G内存为例 JAVA_OPTS"$JAVA_OPTS -server -Xms2048m -Xmx2048m -Xmn768m -XX:ParallelGCThreads2 -XX:PermSize1024m -XX:MaxP…

IS230TCISH6C集成电路分类有哪些呢

​ IS230TCISH6C集成电路分类有哪些呢 集成电路分类有哪些 集成电路是一种微型电子器件或部件&#xff0c;集成电路有很多种&#xff0c;那么集成电路分类有哪些呢&#xff0c;下面小编就为大家介绍集成电路的分类。 按功能结构区分 模拟集成电路 数字集成电路 数/模混合集成电…

JavaSE学习进阶day06_04 集合的嵌套和不可变集合

接昨天讲的内容&#xff0c;今天还要继续学习集合。学完今天的内容&#xff0c;集合就告于段落了&#xff0c;坚持&#xff01; 集合的嵌套&#xff08;掌握&#xff01;&#xff09;&#xff1a; 什么是集合的嵌套&#xff1f;为什么要集合的嵌套&#xff1f;为了搞清楚这个…

算法篇——层序遍历大集合(js版)

102.二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 链接&#xff1a;力扣 var levelOrder function(root) {var res [], queue [];if(!root) return res;// 队列…

海斯坦普Gestamp EDI 需求分析

海斯坦普Gestamp&#xff08;以下简称&#xff1a;Gestamp&#xff09;是一家总部位于西班牙的全球性汽车零部件制造商&#xff0c;目前在全球23个国家拥有超过100家工厂。Gestamp的业务涵盖了车身、底盘和机电系统等多个领域&#xff0c;其产品范围包括钣金、车身结构件、车轮…

非极大值抑制详细原理(NMS含代码及详细注释)

作者主页&#xff1a;爱笑的男孩。的博客_CSDN博客-深度学习,YOLO,活动领域博主爱笑的男孩。擅长深度学习,YOLO,活动,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typecollect 个…