Web路径专题
文章目录
- Web路径专题
- 什么是路径?
- 绝对路径
- 相对路径
- 如何使用路径?
- 使用base标签
- 注意事项
- 小结
Web路径专题
在Web开发中,路径是一个非常重要的概念。路径用来定位资源的位置,包括文件、目录、网页等。在本文中,我们将介绍一些与Web路径相关的知识,包括绝对路径和相对路径。
什么是路径?
路径是用来指定资源在计算机文件系统中的位置的字符串。在Web开发中,路径通常用来定位网站上的文件或页面。路径可以分为绝对路径和相对路径两种类型。
一个非常重要的规则:页面所有的相对路径,在默认情况下,都会参考当前浏览器地址栏的路径 http://ip:port/工程名/ + 资源 来进行跳转
绝对路径
绝对路径是从根目录开始的完整路径,包括所有父级目录。例如,http://www.example.com/images/logo.png
是一个绝对路径。绝对路径通常用于指定外部资源的位置,比如引用其他网站上的图片或样式表。
相对路径
相对路径是相对于当前文件位置的路径。相对路径不包括根目录,只包括当前文件所在的目录及其子目录。例如,images/logo.png
是一个相对路径。相对路径通常用于引用同一网站内的资源。
如何使用路径?
在HTML和CSS中,我们经常需要使用路径来引用图片、样式表和脚本文件。以下是一些常见的使用路径的示例:
使用base标签
- base 标签是 HTML 语言中的基准网址标记,它是一个单标签,位于网页头部文件的 head
标签内 - 一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标,是一种表达路
径和连接网址的标记。 - 常见的 url 路径形式分别有相对路径与绝对路径,如果 base 标签指定了目标,浏览器
将通过这个目标来解析当前文档中的所有相对路径,包括的标签有(a、img、link、form) - 也就是说,浏览器解析时会在路径前加上 base 给的目标,而页面中的相对路径也都转
换成了绝对路径。使用了 base 标签就应带上 href 属性和 target 属性
实例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b.html</title>
<!-- 解读
1. 如果没有<base href="http://localhost:10000/webpath/">
2. 当点击 返回 a.html 超链接,将会以当前浏览器的地址为路径来确定 路径
3. 如果增加了<base href="http://localhost:10000/hspedu_servlet/">
4. 将以 base 指定的 href 的地址为路径,来确定 超链接的路径
-->
<!--<base href="http://localhost:10000/webpath/">-->
<!--简写形式-->
</head>
<body>
<h1>这是/d1/d2/b.html</h1>
<a>返回 a.html~</a>
</body>
</html>
注意事项
- Web 工程的相对路径和绝对路径
● 相对路径是:
● .表示当前目录
● …表示上一级目录
● 资源名 表示当前目录/资源名
● 绝对路径: http://ip:port/工程路径/资源路径 - 在实际开发中,路径都使用绝对路径,而不是相对路径
- 在 web 中 / 斜杠 如果被浏览器解析,得到的地址是:http://ip[域名]:port/比如: <a
href=“/”>斜杠</a> - 在 web 中 / 斜杠 如果被服务器解析,得到的地址是:http://ip[域名]:port/工程路径/,
你也可以理解成 /工程路径/ 下面的几种情况就是如此:
● <url-pattern>/servelturl</url-pattern>
● servletContext.getRealPath(“/”); ==> 是得到执行路径/工作路径
● request.getRequestDispatcher(“/”); - 在 javaWeb 中 路径最后带 / 和 不带 / 含义不同, 一定要小心,
比如:
<a href=“/a/servlet03”>网址</a> servlet03表示资源
<a href=“/a/servlet03/”>网址</a> : servlet03 表示路径 - 特别说明:重定向 response.sendRediect(“/”); 这条语句虽然是在服务器执行的,但是,服务器是把斜杠 / 发送给浏览器解析。因此得到地址 http://ip[域名]:port/
小结
在编写资源路径时: , 考虑这么几点
(1) 这个路径 前面有没有 /
(2) 这个路径 在哪里被解析 [服务器还是浏览器] , 如果前面有 / , 并且是在 浏览器被解析的 被解析成 http://ip:port/ , 如果在服务器端被解析 , 被解析成 /工程路径/
(3) 如果这个路径,前面没有 / , 并且在浏览器被解析,则以浏览器当前的地址栏去掉资源部分,作为一个相对路径.
(4) 这个路径,最后有没有 / , 如果最后有/ 表示路径, 如果没有 / 表示资源
相关文章:
Web路径专题
文章目录 Web路径专题什么是路径?绝对路径相对路径 如何使用路径?使用base标签 注意事项小结 Web路径专题 在Web开发中,路径是一个非常重要的概念。路径用来定位资源的位置,包括文件、目录、网页等。在本文中,我们将介…...

解决vue3项目打包后部署后某些静态资源图片不加载问题
目录 问题 原因 解决方案 问题 开发完项目打包并部署 然后访问时发现导航栏背景图片没加载 打开浏览器控制台发现这张图片报错404 原因 可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符,导致无…...

传感网应用开发教程--AT指令访问新大陆云平台(ESP8266模块+物联网云+TCP)
实现目标 1、熟悉AT指令 2、熟悉新大陆云平台新建项目 3、具体目标:(1)注册新大陆云平台;(2)新建一个联网方案为WIFI的项目;(3)ESP8266模块,通过AT指令访问…...
项目提交到空的git仓库流程
流程: # 初始化 Git 仓库 git init # 如果遇到 "detected dubious ownership" 的错误,可以添加 safe.directory 配置以解决 git config --global --add safe.directory T:/project/xxx # 将当前目录下的所有文件添加到 Git 暂存区 git add . …...

【Python】在Windows Server上部署Flask后端服务器
想要在Windows Server上部署flask应用,当然不能只下一个anaconda配完环境之后直接启动py文件,这样的话后台会有一段警告: * Serving Flask app app* Debug mode: off WARNING: This is a development server. Do not use it in a production …...

机器学习作业4——朴素贝叶斯分类器
目录 一、理论 一个例子: 二、代码 对于代码的解释: 1.fit函数: 2.predict函数: 三、实验结果 原因分析: 一、理论 朴素贝叶斯分类器基于贝叶斯定理进行分类,通过后验概率来判断将新数据归为哪一类。通过利用贝…...

BUU-[GXYCTF2019]Ping Ping Ping
考察点 命令执行 题目 解题 简单测试 ?ip应该是一个提示,那么就测试一下?ip127.0.0.1 http://0c02a46a-5ac2-45f5-99da-3d1b0b951307.node4.buuoj.cn:81/?ip127.0.0.1发现正常回显 列出文件 那么猜测一下可能会有命令执行漏洞,测试?ip127.0.…...

代码随想录Day 41|Leetcode|Python|198.打家劫舍 ● 213.打家劫舍II ● 337.打家劫舍III
198.打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个…...

【吴恩达机器学习-week2】多个变量的特征缩放和学习率问题
特征缩放和学习率(多变量) 目标 利用上一个实验中开发的多变量例程在具有多个特征的数据集上运行梯度下降探索学习率对梯度下降的影响通过 Z 分数归一化进行特征缩放,提高梯度下降的性能 import numpy as np np.set_printoptions(precisio…...
C#字符串的拼接
在C#中有多种拼接字符串的方式,今天小编就分享一些比较常用的。 方法1 string str "123"; str str "456"; 运行结果: "123456" 方法2 字符串与数字拼接 会将数字默认为字符串进行拼接 string str "123"; str str 1;…...

哈希表Hash table
哈希表是根据关键码的值而直接进行访问的数据结构。 数组就是⼀张哈希表。 哈希表中关键码就是数组的索引下标,然后通过下标直接访问数组中的元素,如下图所示: 那么哈希表能解决什么问题呢,一般哈希表都是用来快速判断⼀个元素是…...
jdk8新特性----Lambda表达式
一、介绍 1、简介 Java的Lambda表达式是Java 8引入的一个特性,它支持函数式编程,允许将函数作为方法的参数或返回值,从而简化了匿名内部类的使用,并提供了对并行编程的更好支持。 2、语法 Lambda表达式的使用前提是存在一…...

在STM32中用寄存器方式点亮流水灯
文章目录 实验资料一、对寄存器的理解1.通俗认识寄存器2.深入了解寄存器(1)端口配置低寄存器(配置0到7引脚的寄存器)(2)端口配置高寄存器(配置8到15引脚) 3.GPIO口的功能描述 二、配…...

TCP(TCP客户端、服务器如何通信)
一、TCP介绍 TCP的特点: 面向连接的协议:TCP是一种可靠的、面向连接的协议,在通信之前需要建立连接,以确保数据的可靠传输。这意味着在传输数据之前,发送方和接收方之间需要建立一条可靠的连接通道。流式协议&#x…...
pdf 文件版面分析--PyMuPDF (python 文档解析提取)
1.介绍 PyMuPDF 和Fitz 是用于Python中处理PDF文件的相关模块。Fitz是P有MuPDF的字模块。提供一个简化和封装版本的P有MuPDF功能。 关系: PyMuPDF: 提供广泛的功能,用于操作PDF文档, 包括方便的高级函数与底层操作Fitz &#x…...
sql update 多表关联 inner join
当您需要更新一个表或者多个表中的数据,而多个表又存在关联时,可以使用 INNER JOIN 子句将多个表关联起来,并使用 SET更新。 格式如下: UPDATE table1 INNER JOIN table2 ON table1.column1 table2.column1 SET table1.column2…...

【OceanBase诊断调优】—— 租户资源统计项及其查询方法
本文主要介绍 OceanBase 数据库中租户资源统计项及其查询方法。 适用版本 OceanBase 数据库 V4.1.x、V4.2.x 版本。 CPU 资源统计项 逻辑 CPU 使用率(线程处理请求的时间占比)。 通过虚拟表 __all_virtual_sysstat 在 SYS 系统租户下,查看…...

【一键录音,轻松转换:用Python打造个性化音频记录工具】
在数字化时代,音频记录已成为日常学习、工作和娱乐不可或缺的一部分。想象一下,只需简单按下几个键,即可随时随地捕捉灵感,记录会议要点,或是珍藏孩子的童言稚语。本文将引领您步入Python编程的奇妙世界,展示如何借助几个强大的库,构建一个既简单又实用的音频录制及转换…...

Java类与对象(一)
类的定义与使用 在Java中使用关键字class定义一个类,格式如下: class 类名{// 成员变量/字段/属性//成员方法/行为 }Java中类和c语言中的结构体有点类似, 在Java中类名一般采用大驼峰(每个首字母大写)的形式…...
python中的装饰器,例子说明
在Python中,嵌套装饰器是指在一个函数上应用多个装饰器。每个装饰器都可以为函数添加一些特定的功能。以下是一个稍微复杂一些的例子,我们将创建一个记录日志和验证权限的嵌套装饰器。 ### 例子:记录日志和权限验证的嵌套装饰器 假设我们正…...

MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...

Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...

uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...

自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...