WEB 工程路径

news2024/11/24 11:55:07

WEB 工程路径

相对路径

使用相对路径来解决, 一个非常重要的规则:页面所有的相对路径,在默认情况下,都会参考当前浏览器地址栏的路径 http://ip:port/工程名/ + 资源来进行跳转。

相对路径带来的问题

请添加图片描述

如上图,若在a.html界面使用相对路径访问my.css的资源,浏览器会定位到web/d1/d2/my.css,这显然不是资源所在的位置。

base 标签

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

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

2)一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标,是一种表达路径和连接网址的标记。

3)常见的 url 路径形式分别有相对路径与绝对路径,如果 base 标签指定了目标,浏览器将通过这个目标来解析当前文档中的所有相对路径,包括的标签有(a、img、link、form)

4)也就是说,浏览器解析时会在路径前加上 base 给的目标,而页面中的相对路径也都转换成了绝对路径。使用了 base 标签就应带上 href 属性和 target 属性

示例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>a.html</title>
        <!-- 将以 base 指定的 href 的地址为路径,来确定 超链接的路径-->
        <base href="http://localhost:8080/">
    </head>
    <body>
        <h1>这是 a.html</h1>  
        <!-- 这里的路径为:http://localhost:8080/d1/d2/b.html-->
        <a href="d1/d2/b.html">跳转到/d1/d2/b.html</a> 
        <br/><br/>
        <a href="xxx">转发到/d1/d2/b.html</a> 
    </body>
</html>

注意事项和细节

1)相对路径

  • .表示当前目录
  • ..表示上一级目录
  • 资源名 表示当前目录/资源名

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

3)在 web 中 / 斜杠 如果被浏览器解析,得到的地址是:http://ip[域名]:port/

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

下面的几种情况就是如此:

  • <url-pattern>/servelturl</url-pattern>
  • servletContext.getRealPath(“/”); ==> 是得到执行路径/工作路径
  • request.getRequestDispatcher(“/”);

5)在 javaWeb 中 路径最后带 / 和 不带 / 含义不同

  • 最后带 / 表示这是一个路径
  • 最后不带 / 表示这是一个资源

6)重定向 response.sendRediect("/"); 这条语句虽然是在服务器执行的,但是,服务器是把斜杠 / 发送给浏览器解析。因此得到地址 http://ip[域名]:port/

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

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

相关文章

Shell脚本介绍及基本功能

目录 一、什么是Shell 二、什么是Shell脚本 三、echo 四、Hello World 五、Bash的基本功能 1.别名 2.常用快捷键 3.输入输出 4.输出重定向 5.多命令执行 6.管道符 7.通配符和特殊符合 一、什么是Shell Shell是一种命令行解释器&#xff0c;它是操作系统的一部分&a…

N5182A安捷伦N5182A信号发生器

181/2461/8938产品概述&#xff1a; 信号特征 100 kHz至3或6 GHz使用高度可靠的快速开关电子衰减器时&#xff0c;最高可达3 GHz》23 dBmW-CDMA动态范围:≤-73 dBc&#xff0c;输出功率为5 dBm列表模式下≤900 μs的同步频率、幅度和波形切换 调制和扫描 调幅、调频、调频和…

OpenHarmony实战开发-如何通过Stage模型实现一个简单的游戏卡片

介绍 本示例展示了如何通过Stage模型实现一个简单的游戏卡片。 通过卡片支持的点击事件进行交互&#xff0c;让用户通过点击的先后顺序把一个乱序的成语排列成正确的成语。使用了C和TS的混合编程方式&#xff0c;将获取随机数的能力下沉到C实现&#xff0c;并通过NAPI的能力将…

高德定位 SDK 到底提供了什么服务?

最近我被高德的销售烦到不行&#xff0c;说是我用了他们的 SDK&#xff0c;现在 SDK 要收费。 表达是很绕的&#xff0c;什么授权啦&#xff0c;什么企业认证风险啦&#xff0c;讲了一堆&#xff0c;还跟我开始搬出协议了。感觉高德的销售真够垃圾的&#xff0c;编个话术都不会…

【EI检索会议】电子、通信与智能科学国际会议二轮征稿中

【会议名称】电子、通信与智能科学国际会议 【会议简称】ECIS 2024 【会议官网】www.icecis.org 【会议时间】2024年5月24日~27日 【二轮截稿时间】2024年4月20日 【会议地点】中国长沙 【征稿主题】集中但不限于“电子、通信、智能科学”等其他相关主题。 【官方邮箱】…

3.java openCV4.x 入门-数据类型(CvType)与Scalar

专栏简介 &#x1f492;个人主页 &#x1f4f0;专栏目录 点击上方查看更多内容 &#x1f4d6;心灵鸡汤&#x1f4d6;我们唯一拥有的就是今天&#xff0c;唯一能把握的也是今天 &#x1f9ed;文章导航&#x1f9ed; ⬆️ 2.hello openCV ⬇️ 4.待更新 数据类型&#xff…

【leetcode】双指针(二)

标题&#xff1a; 【leetcode】双指针&#xff08;二&#xff09; 水墨不写bug 正文开始&#xff1a; &#xff08;一&#xff09;总和为目标值的两个数 购物车内的商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#…

支持各种不同系列nvdia显卡和amd显卡,DeepFaceLab安装与使用,附完整的软件打包下载一键安装

支持各种不同系列nvdia显卡和amd显卡&#xff0c;DeepFaceLab安装与使用&#xff0c;附完整的软件打包下载一键安装。 主要使用的技术&#xff1a; 1. 深度学习&#xff08;Deep Learning&#xff09; 深度学习是人工智能领域的一个重要分支&#xff0c;它通过模拟人脑的神经…

面试经典150题【131-140】

文章目录 面试经典150题【131-140】123.买卖股票的最佳时机III188.买卖股票的最佳时机IV二分查找的板子&#xff1a;35.搜索插入位置74.搜索二维矩阵162.寻找峰值33.搜索旋转排序数组34.在排序数组中查找元素的第一个和最后一个位置153.寻找旋转排序数组中的最小值4.寻找两个正…

C++之类和对象的中篇

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

函数参数缺省和内联函数【C++】

文章目录 函数参数缺省函数参数缺省的条件和要求 内联函数内联函数的工作原理内联函数的定义方法内联函数的要求解决方法&#xff1a;直接在.h中定义内联函数的函数体 内联函数再Debug模式下默认是不展开的 函数参数缺省 顾名思义&#xff1a;可以少传一个/多个参数给函数&…

归并排序和分治

归并排序 归并排序是利用归并的思想实现的排序方法&#xff0c;该算法采用经典的分治策略&#xff08;分治法将问题分成一些小的问题然后递归求解&#xff0c;而治的阶段则将分的阶段得到的各答案"修补"在一起&#xff0c;即分而治之)。 分而治之 可以看到这种结构…

前端实现菜单搜索搜索(功能模版)

目录 前言正文 前言 总体界面如下所示&#xff1a; 正文 <template><div class"avue-searchs"click.self"handleEsc"><div class"avue-searchs__title">菜单搜索</div><div class"avue-searchs__content"…

游戏运营分析:如何在新游戏上线初期实现精细化运营?

一、背景介绍 在当今的手游市场中&#xff0c;每一款新游戏的发布都如同踏上一段充满未知与挑战的探险之旅。游戏刚上线时&#xff0c;运营情况往往如同飘摇的小船&#xff0c;随时可能受到风浪的侵袭。此时&#xff0c;如何准确地找到问题所在&#xff0c;为游戏的健康运营和持…

瀚海贫者福,铜子恣意游

上学时打饭追求性价比的习惯一直不改&#xff0c;半个大鱼头三块钱&#xff0c;一份豆腐一块钱&#xff0c;还有一个红烧茄子2块5&#xff0c;再加三毛钱的饭&#xff0c;共6块8毛钱&#xff0c;早晚餐也会有这类性价比高又营养的选择&#xff0c;科大食堂现在越来越人性化&…

蓝桥杯练习——拼出一个未来

选中 index.html 右键启动 Web Server 服务&#xff08;Open with Live Server&#xff09;&#xff0c;让项目运行起来。接着&#xff0c;打开环境右侧的【Web 服务】&#xff0c;就可以在浏览器中看到如下效果&#xff1a; 目标 完善 js/index.js 的 TODO 部分&#xff0c;实…

零基础学会Python

⭐简单说两句⭐ ✨ 正在努力的小新~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &…

C 回调函数的两种使用方法

对回调&#xff08;callback&#xff09;函数的一点粗陋理解&#xff0c;在我小时候&#xff0c;隔壁村有家月饼小作坊&#xff08;只在中秋那段时间手工制作一些月饼出售&#xff0c;后来好像不做了&#xff09;&#xff0c;做出的月饼是那种很传统很经典的款式&#xff0c;里…

电机的工作电流怎么计算?

电机的工作电流计算通常需要考虑多个因素&#xff0c;包括电机的额定功率、工作电压、效率以及负载情况等。以下是一个基本的计算方法&#xff0c;用于估算直流电机或交流电机在特定条件下的工作电流。 了解电机参数 额定功率 (P_rated) 电机的额定功率是指在额定工作条件下&am…