当前位置: 首页 > news >正文

Web路径专题

文章目录

  • Web路径专题
    • 什么是路径?
      • 绝对路径
      • 相对路径
    • 如何使用路径?
      • 使用base标签
  • 注意事项
  • 小结

Web路径专题

在Web开发中,路径是一个非常重要的概念。路径用来定位资源的位置,包括文件、目录、网页等。在本文中,我们将介绍一些与Web路径相关的知识,包括绝对路径和相对路径。

什么是路径?

路径是用来指定资源在计算机文件系统中的位置的字符串。在Web开发中,路径通常用来定位网站上的文件或页面。路径可以分为绝对路径和相对路径两种类型。

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

绝对路径

绝对路径是从根目录开始的完整路径,包括所有父级目录。例如,http://www.example.com/images/logo.png 是一个绝对路径。绝对路径通常用于指定外部资源的位置,比如引用其他网站上的图片或样式表。

相对路径

相对路径是相对于当前文件位置的路径。相对路径不包括根目录,只包括当前文件所在的目录及其子目录。例如,images/logo.png 是一个相对路径。相对路径通常用于引用同一网站内的资源。

如何使用路径?

在HTML和CSS中,我们经常需要使用路径来引用图片、样式表和脚本文件。以下是一些常见的使用路径的示例:

使用base标签

  1. base 标签是 HTML 语言中的基准网址标记,它是一个单标签,位于网页头部文件的 head
    标签内
  2. 一个页面最多只能使用一个 base 元素,用来提供一个指定的默认目标,是一种表达路
    径和连接网址的标记。
  3. 常见的 url 路径形式分别有相对路径与绝对路径,如果 base 标签指定了目标,浏览器
    将通过这个目标来解析当前文档中的所有相对路径,包括的标签有(a、img、link、form)
  4. 也就是说,浏览器解析时会在路径前加上 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>

注意事项

  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) 这个路径,最后有没有 / , 如果最后有/ 表示路径, 如果没有 / 表示资源

相关文章:

Web路径专题

文章目录 Web路径专题什么是路径&#xff1f;绝对路径相对路径 如何使用路径&#xff1f;使用base标签 注意事项小结 Web路径专题 在Web开发中&#xff0c;路径是一个非常重要的概念。路径用来定位资源的位置&#xff0c;包括文件、目录、网页等。在本文中&#xff0c;我们将介…...

解决vue3项目打包后部署后某些静态资源图片不加载问题

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

传感网应用开发教程--AT指令访问新大陆云平台(ESP8266模块+物联网云+TCP)

实现目标 1、熟悉AT指令 2、熟悉新大陆云平台新建项目 3、具体目标&#xff1a;&#xff08;1&#xff09;注册新大陆云平台&#xff1b;&#xff08;2&#xff09;新建一个联网方案为WIFI的项目&#xff1b;&#xff08;3&#xff09;ESP8266模块&#xff0c;通过AT指令访问…...

项目提交到空的git仓库流程

流程&#xff1a; # 初始化 Git 仓库 git init # 如果遇到 "detected dubious ownership" 的错误&#xff0c;可以添加 safe.directory 配置以解决 git config --global --add safe.directory T:/project/xxx # 将当前目录下的所有文件添加到 Git 暂存区 git add . …...

【Python】在Windows Server上部署Flask后端服务器

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

机器学习作业4——朴素贝叶斯分类器

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

BUU-[GXYCTF2019]Ping Ping Ping

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

代码随想录Day 41|Leetcode|Python|198.打家劫舍 ● 213.打家劫舍II ● 337.打家劫舍III

198.打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个…...

【吴恩达机器学习-week2】多个变量的特征缩放和学习率问题

特征缩放和学习率&#xff08;多变量&#xff09; 目标 利用上一个实验中开发的多变量例程在具有多个特征的数据集上运行梯度下降探索学习率对梯度下降的影响通过 Z 分数归一化进行特征缩放&#xff0c;提高梯度下降的性能 import numpy as np np.set_printoptions(precisio…...

C#字符串的拼接

在C#中有多种拼接字符串的方式&#xff0c;今天小编就分享一些比较常用的。 方法1 string str "123"; str str "456"; 运行结果: "123456" 方法2 字符串与数字拼接 会将数字默认为字符串进行拼接 string str "123"; str str 1;…...

哈希表Hash table

哈希表是根据关键码的值而直接进行访问的数据结构。 数组就是⼀张哈希表。 哈希表中关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素&#xff0c;如下图所示&#xff1a; 那么哈希表能解决什么问题呢&#xff0c;一般哈希表都是用来快速判断⼀个元素是…...

jdk8新特性----Lambda表达式

一、介绍 1、简介 Java的Lambda表达式是Java 8引入的一个特性&#xff0c;它支持函数式编程&#xff0c;允许将函数作为方法的参数或返回值&#xff0c;从而简化了匿名内部类的使用&#xff0c;并提供了对并行编程的更好支持。 2、语法 Lambda表达式的使用前提是存在一…...

在STM32中用寄存器方式点亮流水灯

文章目录 实验资料一、对寄存器的理解1.通俗认识寄存器2.深入了解寄存器&#xff08;1&#xff09;端口配置低寄存器&#xff08;配置0到7引脚的寄存器&#xff09;&#xff08;2&#xff09;端口配置高寄存器&#xff08;配置8到15引脚&#xff09; 3.GPIO口的功能描述 二、配…...

TCP(TCP客户端、服务器如何通信)

一、TCP介绍 TCP的特点&#xff1a; 面向连接的协议&#xff1a;TCP是一种可靠的、面向连接的协议&#xff0c;在通信之前需要建立连接&#xff0c;以确保数据的可靠传输。这意味着在传输数据之前&#xff0c;发送方和接收方之间需要建立一条可靠的连接通道。流式协议&#x…...

pdf 文件版面分析--PyMuPDF (python 文档解析提取)

1.介绍 PyMuPDF 和Fitz 是用于Python中处理PDF文件的相关模块。Fitz是P有MuPDF的字模块。提供一个简化和封装版本的P有MuPDF功能。 关系&#xff1a; PyMuPDF&#xff1a; 提供广泛的功能&#xff0c;用于操作PDF文档&#xff0c; 包括方便的高级函数与底层操作Fitz &#x…...

sql update 多表关联 inner join

当您需要更新一个表或者多个表中的数据&#xff0c;而多个表又存在关联时&#xff0c;可以使用 INNER JOIN 子句将多个表关联起来&#xff0c;并使用 SET更新。 格式如下&#xff1a; UPDATE table1 INNER JOIN table2 ON table1.column1 table2.column1 SET table1.column2…...

【OceanBase诊断调优】—— 租户资源统计项及其查询方法

本文主要介绍 OceanBase 数据库中租户资源统计项及其查询方法。 适用版本 OceanBase 数据库 V4.1.x、V4.2.x 版本。 CPU 资源统计项 逻辑 CPU 使用率&#xff08;线程处理请求的时间占比&#xff09;。 通过虚拟表 __all_virtual_sysstat 在 SYS 系统租户下&#xff0c;查看…...

【一键录音,轻松转换:用Python打造个性化音频记录工具】

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

Java类与对象(一)

类的定义与使用 在Java中使用关键字class定义一个类&#xff0c;格式如下&#xff1a; class 类名{// 成员变量/字段/属性//成员方法/行为 }Java中类和c语言中的结构体有点类似&#xff0c; 在Java中类名一般采用大驼峰&#xff08;每个首字母大写&#xff09;的形式&#xf…...

python中的装饰器,例子说明

在Python中&#xff0c;嵌套装饰器是指在一个函数上应用多个装饰器。每个装饰器都可以为函数添加一些特定的功能。以下是一个稍微复杂一些的例子&#xff0c;我们将创建一个记录日志和验证权限的嵌套装饰器。 ### 例子&#xff1a;记录日志和权限验证的嵌套装饰器 假设我们正…...

德意志飞机通过全球协作升级支线航空驾驶舱人机工学

2026年1月15日 —— 作为总部位于德国舍瑙的MAFELEC集团旗下成员&#xff0c;COMTRONIC GmbH近五十年来一直是航空航天领域人机界面&#xff08;HMI&#xff09;解决方案领域值得信赖的供应商。凭借在照明面板、定制键盘及先进光学技术方面的深厚积淀&#xff0c;COMTRONIC长期…...

Flutter鸿蒙开发环境:从零到一,手把手解决环境配置与编译难题

1. 环境准备&#xff1a;搭建Flutter鸿蒙开发的基石 第一次接触Flutter鸿蒙开发时&#xff0c;环境配置就像盖房子的地基&#xff0c;看似简单却最容易踩坑。我在Windows系统上反复折腾了三天才搞定所有环境&#xff0c;这里把血泪经验总结成保姆级教程。首先需要明确的是&…...

终极空洞骑士模组管理器:用Scarab实现10倍效率提升的完整指南

终极空洞骑士模组管理器&#xff1a;用Scarab实现10倍效率提升的完整指南 【免费下载链接】Scarab An installer for Hollow Knight mods written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/sc/Scarab 你是否曾经为《空洞骑士》安装模组时感到头疼&#x…...

NoSleep防休眠工具:系统唤醒与持续运行的高效解决方案

NoSleep防休眠工具&#xff1a;系统唤醒与持续运行的高效解决方案 【免费下载链接】NoSleep Lightweight Windows utility to prevent screen locking 项目地址: https://gitcode.com/gh_mirrors/nos/NoSleep 在数字化工作环境中&#xff0c;电脑意外休眠往往导致工作中…...

OBS智能背景移除插件:无绿幕实时抠图与低光增强完整指南

OBS智能背景移除插件&#xff1a;无绿幕实时抠图与低光增强完整指南 【免费下载链接】obs-backgroundremoval An OBS plugin for removing background in portrait images (video), making it easy to replace the background when recording or streaming. 项目地址: https:…...

威联通NAS安全防护全攻略:10个必做设置让你的数据固若金汤

威联通NAS安全防护全攻略&#xff1a;10个必做设置让你的数据固若金汤 在数字化时代&#xff0c;数据安全已成为个人和企业最关注的议题之一。威联通NAS作为专业级网络存储设备&#xff0c;凭借其强大的硬件性能和丰富的软件生态&#xff0c;成为许多用户存储重要数据的首选。然…...

实战应用:基于快马AI生成的代码,快速构建全功能在线学术期刊平台

实战应用&#xff1a;基于快马AI生成的代码&#xff0c;快速构建全功能在线学术期刊平台 最近在帮学校实验室搭建一个开源学术期刊的在线投稿系统&#xff0c;正好体验了InsCode(快马)平台的AI代码生成功能。整个过程比想象中顺利很多&#xff0c;从需求分析到可运行的原型只用…...

W25Q16 Flash存储器:从基础概念到SPI通信实战

1. 认识W25Q16 Flash存储器 第一次接触W25Q16是在做一个智能家居项目时&#xff0c;需要保存用户的WiFi配置和房间温湿度记录。当时试过用单片机内部的EEPROM&#xff0c;但容量太小不够用&#xff0c;后来发现了这款性价比超高的外部Flash芯片。简单来说&#xff0c;W25Q16就像…...

Z-Image-Turbo-辉夜巫女快速入门:10分钟完成Dify工作流集成与调用

Z-Image-Turbo-辉夜巫女快速入门&#xff1a;10分钟完成Dify工作流集成与调用 想在自己的应用里快速加上AI画图功能&#xff0c;但又不想写一堆复杂的代码&#xff1f;今天咱们就来聊聊怎么把Z-Image-Turbo-辉夜巫女这个挺火的图像生成模型&#xff0c;轻松集成到Dify平台的工…...

Z-Image-Turbo模型在智能车领域的应用:仿真场景图像生成

Z-Image-Turbo模型在智能车领域的应用&#xff1a;仿真场景图像生成 最近和几个做自动驾驶算法的朋友聊天&#xff0c;他们都在为一个问题头疼&#xff1a;测试数据不够用。特别是那些罕见的极端场景&#xff0c;比如暴雨天、浓雾夜&#xff0c;或者刺眼的逆光路况&#xff0c…...