开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么在HTML中引用本地文件时使用./

在HTML中引用本地文件时使用 ./ 表示当前目录。这是因为在URL路径中，./ 代表当前目录，而 ../ 则代表上级目录。这种路径的使用有助于浏览器准确找到并加载所需的资源文件。

基础概念

相对路径：相对于当前文档位置的路径。例如，./ 表示当前目录，../ 表示上级目录。
绝对路径：从根目录开始的完整路径。

优势

灵活性：相对路径使得文件引用更加灵活，特别是在文件结构发生变化时。
可移植性：相对路径使得HTML文件在不同目录或服务器之间移动时，仍然能够正确引用资源。

类型

当前目录：使用 ./ 表示当前目录。
上级目录：使用 ../ 表示上级目录。
根目录：使用 / 表示根目录。

应用场景

图片引用：在HTML中引用图片时，可以使用相对路径。
图片引用：在HTML中引用图片时，可以使用相对路径。
CSS文件引用：在HTML中引用CSS文件时，也可以使用相对路径。
CSS文件引用：在HTML中引用CSS文件时，也可以使用相对路径。
JavaScript文件引用：在HTML中引用JavaScript文件时，同样可以使用相对路径。
JavaScript文件引用：在HTML中引用JavaScript文件时，同样可以使用相对路径。

常见问题及解决方法

问题：为什么使用 `./` 而不是直接写文件名？

原因：直接写文件名可能会导致浏览器无法确定文件的准确位置，尤其是在复杂的项目结构中。
解决方法：使用 ./ 明确指定当前目录，确保浏览器能够正确找到并加载文件。

问题：为什么使用 `../` 时路径错误？

原因：可能是路径层级写错了，或者超出了项目的根目录。
解决方法：检查路径层级是否正确，确保不超过项目的根目录。

问题：为什么在本地测试时路径正确，部署到服务器后路径错误？

原因：可能是服务器上的文件结构与本地不同。
解决方法：使用相对路径，并确保服务器上的文件结构与本地一致。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link rel="stylesheet" href="./styles/main.css">
</head>
<body>
    <img src="./images/example.jpg" alt="Example Image">
    <script src="./scripts/main.js"></script>
</body>
</html>

参考链接

MDN Web Docs: Using paths

通过以上解释和示例，希望你能更好地理解在HTML中引用本地文件时使用 ./ 的原因及相关应用。

相关搜索:html引用本地css文件路径使用本地引用简化HTML代码使用Flask在html中引用.js文件时出现静态资源问题在WebView中单击链接时加载本地HTML文件在html文件中引用nuget包在Python中读取本地HTML文件为什么本地Json文件内容没有显示在html页面中？html在本地存文件在osgi插件中引用本地文件夹使用`__dirname`引用本地文件的Typescript 使用HTML中的本地脚本构建外部JavaScript引用如何仅使用python在localhost中托管本地html文件是否可以在本地JavaScript文件中引用JavaScript链接使用Python解析本地HTML文件使用iFrame加载本地html文件在HTML中打开本地文件和web文件 #使用VLOOKUP时在excel中引用？在本地HTML文件中嵌入Google趋势图表时出现问题在HTML中嵌入本地docx或pdf文件在HTML中播放本地存储的FLV文件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在java web中引用html文件乱码的解决方案

介绍首先这是一个简单的操作，读取在webapp目录下的一个day04.html文件，并将其返回给浏览器代码如下 // 返回 day04.jsp 文件 response.setContentType...("text/html;charset=utf-8"); response.setCharacterEncoding("utf-8"); request.setCharacterEncoding...request.getRequestDispatcher("/day04.jsp").forward(request, response); 很明显格式都设置正常了，但还是乱码， day04.html...DOCTYPE html> Login <body...文件转化为day04.jsp文件解决问题建议，以后的java web项目还是使用jsp文件来代替html文件（有大佬知道解决方案请在评论区留言）

6.9K2 0

javascript中html当中如何引用css文件

1.html当中如何引用css文件马克-to-win：css：Cascading Style Sheets 例 1.1 qixy 李四王五 </html

2.4K2 0

在Java 中安全使用接口引用

在Android 开发中我们经常会持有接口的引用，或者注册事件的监听，诸如系统服务的通知，点击事件的回调等，虽不胜枚举，但大部分监听都需要我们去实现一个接口，因此我们今天就拿注册一个回调监听举例：...操作符只有对象引用不为空时才会分派调用我们接下来分别拿Kotlin 和Groovy 举例：在Kotlin 中使用 ' ?....为了验证假设，我们分别用kotlinc 和groovyc 将之前的代码编译成class 文件，然后再使用javap 指令进行反汇编。...:(Ljava/lang/Object;)Ljava/lang/Object; 14: pop 15: return ...... } 需要注意的是，groovy 文件在编译过程中由编译器生成大量的不存在于源代码中的额外函数和变量...为了安全使用定义在接口中的函数，我做了这个小工具，目前已经开源，所有代码都可以通过github 获取，希望这个避免空指针的“接口救生圈”能够让你在Java 的海洋中尽情遨游。

1.8K2 0

在Java 中安全使用接口引用

在Android 开发中我们经常会持有接口的引用，或注册某个事件的监听，如系统服务的通知，点击事件的回调等，虽不胜枚举，但大部分监听都需要我们去实现一个接口，因此我们就拿注册回调监听来举例： private...操作符只有对象引用不为空时才会分派调用接下来分别拿Kotlin 和Groovy 举例：在Kotlin 中使用 ' ?....为了验证这个假设，我们分别用kotlinc 和groovyc 将之前的代码编译成class 文件，然后再使用javap 指令进行反汇编。...答案是肯定的：在构建过程中修改字节码！...，但是在字节码中这是允许的。

1.7K2 0

企业面试题: LocalStorage本地存储在HTML5中如何使用

考核内容:HTML5应用及理解题发散度: ★★ 试题难度: ★★ 解题思路: LocalStores 本地存储就是一个轻量级的sqllite数据库。...可以在客户端本地存储数据，用于在断开网络连接的情况下读取本地缓存cookies，LocalStores可以将数据长期保存在客户端，直至人工清除为止，接下来演示下实例： 1、使用localStorage对象保存数据...： localStorage.setItem(key , value) 2、使用localStorage获取保存的数据： localStorage.getItem(key) 3、清除localStorage

2.7K3 0

在HTML中如何使用CSS？

使用内嵌式 CSS 用法时 CSS 代码将被集中放在标记中，这样方便查找，对后期维护比较方便，页面代码也会减少。...使用链接式 CSS，可以在设计整个网站时，将多个页面都会用到的 CSS 样式定义在一个或多个文件中，然后在需要用到该样式的 HTML 网页中通过标记链接这些文件，通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性...被导入的 HTML 文件在初始化时，会将该 CSS 文件导入 HTML 文件中，作为此 HTML 文件的一部分，类似于内嵌式的效果，而链接式是在 HTML 的标记需要 CSS 样式的时候才会以链接的方式引入进来...例如，可以在文件中不写任何 CSS 代码，只写，这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用中定义的所有样式效果。...这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则：内联式 > 内嵌式 > 外部样式；在多个样式中，后出现的样式的优先级高于先出现的样式；在样式中，选择器的优先级：样式

8.5K10 0

在 hexo 中无痛使用本地图片

1 起因在 hexo 中使用本地图片是件非常让人纠结的事情，在 markdown 里的图片地址似乎永远无法和最后生成的网页保持一致。...这些问题使得我一度不愿意使用本地图片而选择用图床，但被移动运营商无耻的横条广告逼得打算上 https，图床只支持 http 就成了问题。...显然这样在本地的编辑器里完全不能正确识别图片的位置。...1.2 asset-image 在 hexo 2.x 时出现的插件，后来被吸纳进 hexo 3 core ，用法的介绍见资源文件夹 | Hexo 。...比较尴尬的是，这种方法直接放弃了 markdown 原来的语法，使用类似的语法，。markdown 本来有插入图片的语法不好好支持，专门用一个新的语法来插入本地图片，让我这种强迫症不太能接受。

2.6K10 0

通过 ReferenceOutputAssembly=False 在引用项目时，不额外引入依赖文件

通过本文的方法，你可以在 A 项目编译时，确保 B 项目已经编译，而无需引用 B。...ReferenceOutputAssembly=False 依然在项目中使用往常习惯的方法设置项目引用：但是，在项目引用设置完成之后，需要打开项目的项目文件（.csproj）给 ProjectReference...Walterlv.Demo.Build.csproj" ReferenceOutputAssembly="false" /> 上面的 ProjectReference 是 Sdk 风格的 csproj 文件中的项目引用...NuGet 包中附带其他文件如果要生成 NuGet 包，我们有时需要多个项目生成的文件来共同组成一个 NuGet 包，这个时候我们需要的仅仅是把其他项目生成的文件放到 NuGet 包中，而不是真的需要在...当使用 ReferenceOutputAssembly 来引用项目，最终生成的 NuGet 包中就不会生成对这些项目的依赖。

2612 0

Flutter中如何加载并预览本地的html文件的方法

直接进入主题，大概步骤如下在 assets 创建需要访问 html 文件，如下这里创建一个files文件夹，专门来放这些静态 html 文件....在 pubspec.yaml 中配置访问位置 assets: - assets/images/ - assets/files/ 在 pubspec.yaml 添加 webview_flutter...<AgreementPage { WebViewController _webViewController; String filePath = 'assets/files/agreement.<em>html</em>...(filePath); _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents, mimeType: 'text/html

4.2K3 0

在VSCode中编辑HTML文档时，在Dom标签上写style属性时智能提示的问题

首先在VSCode中打开一个HTML文件然后点右下角的“选择语言模式” image.png 然后点击配置HTML语言的基础设置 image.png 然后在打开的界面中（右侧）输入如下代码 { "...editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, "[html]": { } } 然后重启VSCode

3.1K8 0

在本地KVM中安装使用Cloud-init

本文主要研究在本地KVM虚拟机，也就是没有云平台的情况下，如何使用cloud-init进行初始化工作。示例虚拟机的操作系统是CentOS 7.1。...安装在虚拟机内安装cloud-init： yum install cloud-init -y 安装完后，配置文件在/etc/cloud目录，主配置文件为/etc/cloud/cloud.cfg DataSource...因此这种模式需要先配置好网络； Config drive 把数据封装进一个iso9660（也支持vfat，但是不常见）文件系统的镜像中，然后把这个镜像以光驱（ide接口）的形式挂载到虚拟机中，虚拟机开机后...cloud-init会自动去该镜像中获取数据。...user-data cat user-data #cloud-config chpasswd: list: | root:123456 expire: false ssh_pwauth: true 总结本文测试了在无云平台管理的本地

1.6K1 0

RAC中误将数据文件创建在本地盘时的修正

用户创建表空间时误将数据文件放到了本地盘，重启数据库时一个实例启动不了，只能offline该表空间后启动数据库。现用户想知道怎样能把这个表空间数据文件中的数据恢复出来。...测试目的：验证RAC中误将数据文件创建在本地盘时的修复办法环境说明：两节点RAC，数据库名为db10g 版本10.2.0.5 使用了ASM作为共享存储解决方案。...ONLINE ONLINE rac10g2 ora....0g2.vip application ONLINE ONLINE rac10g2 2，处理过程由于该过程中需要从本地盘把数据文件迁移到...在10gR2中，我们可以使用RMAN命令备份和恢复ASM文件，使用ASMCMD命令可以浏览和操纵目录结构。...建错的表空间test1数据文件在节点2，所以只能从节点2上打开。

5631 0

在本地服务器上使用Python脚本处理HTML表单

要在本地服务器上使用 Python 处理 HTML 表单，可以使用 Flask 框架，这是一个轻量级的 web 框架，特别适合快速构建和处理 HTTP 请求。...以下是如何使用 Flask 创建一个本地服务器，展示 HTML 表单并处理提交的数据。...1、问题背景有一个托管在本地服务器（apache2）上的 HTML 页面，想要将一些数据发送给 Python 脚本并对其进行处理。...但是，当使用表单的 action 标签时，页面不会导航到下一页；而当尝试使用 Jquery 时，脚本不会被执行。希望得到帮助，提前感谢。...使用 cgi.FieldStorage() 实例来处理表单数据，并使用 getvalue() 方法来获取字段值。可以使用 print 语句来在浏览器中打印输出。

991 0

python2中为什么在进行类定义时最好

Animal类继承了object对象，拥有了好多可操作对象，这些都是类中的高级特性。...对于不太了解python类的同学来说，这些高级特性基本上没用处，但是对于那些要着手写框架或者写大型项目的高手来说，这些特性就比较有用了，比如说tornado里面的异常捕获时就有用到class来定位类的名称...最后需要说清楚的一点，本文是基于python 2.7.10版本，实际上在python 3 中已经默认就帮你加载了object了（即便你没有写上object）。

1.2K2 0

在项目文件 csproj 中或者 MSBuild 的 Target 中使用 % 引用集合中每一项的属性

在编写项目文件或者 MSBuild Target 文件的时候，我们经常会使用来定义集合中的一项。在定义的同时，我们也会额外指定一些属性。...WalterlvX 集合的时候，我们使用了 @(Compile) 来获取所有需要编译的文件。...在定义 WalterlvY 集合的时候，我们使用了 %(Compile.FileName) 来获取编译文件的文件名。...于是，你在警告信息中看到的两个警告信息里面，一个输出了 Compile 集合中每一项的标识符（通常是相对于项目文件的路径），另一个输出了每一个 Compile 项中的 FileName 属性。...需要注意，如果 % 得到的项中某个属性为空，那么这一项在最终形成的新集合中是不存在的。

2425 0

在 Linux 中本地挂载 Dropbox 文件夹的命令方法

，运行以下命令以安装 dbxfs： $ pip3 install dbxfs 在本地挂载 Dropbox 文件夹创建一个挂载点以将 Dropbox 文件夹挂载到本地文件系统中。...$ mkdir ~/mydropbox 然后，使用 dbxfs 在本地挂载 dropbox 文件夹，如下所示： $ dbxfs ~/mydropbox 你将被要求生成一个访问令牌：要生成访问令牌，只需在...从现在开始，你可以看到你的 Dropbox 文件夹已挂载到本地文件系统中。更改访问令牌存储路径默认情况下，dbxfs 会将 Dropbox 访问令牌存储在系统密钥环或加密文件中。...但是，你可能希望将其存储在 gpg 加密文件或其他地方。如果是这样，请在 Dropbox 开发者应用控制台上创建个人应用来获取访问令牌。创建应用后，单击下一步中的生成按钮。...，使用 dbxfs 在你的文件系统中本地挂载 Dropfox 文件夹并不复杂。

3.5K3 0

使用nano在Linux中编辑文件

与基本的文本编辑相比，nano提供许多额外的特性，例如：交互式的查找和替换，定位到指定的行列，自动缩进，特性切换，国际化支持，以及文件名标记完成。本教程中，我们将介绍一些帮助您入门的基本知识。...使用nano打开系统文件从终端输入nano和文件名。如果该文件不存在，nano将在您指定的位置创建一个新的临时版本。...在此示例中，我们将使用sudo权限打开系统的hosts文件： sudo nano /etc/hosts 使用上面的示例打开系统主机文件，结果类似于以下内容：在默认视图中，nano将在顶部标题栏的中心显示正在编辑的文件...在底部，快捷方式列表显示常用命令，其中^代表CTRL键。要保存，按住CTRL并按O（对于Write * O * ut）; 按CTRL + X退出。...nano快捷方式 ^ W：在打开的文件中搜索 ALT + W：找到下一个搜索实例 ^ O：保存文件 ^ K：删除整行 ^ U：粘贴整行 ^ T：查看文件浏览器 ^ X：退出更多信息有关此主题的其他信息

7.2K4 0

为什么在静态方法中不能使用this

在JVM的运行时数据区中有个虚拟机栈(或Java栈),在它的里面是由栈帧'叠加'而成.栈帧由局部变量表,操作数栈,动态连接,方法返回地址等组成. 那么我们就从局部变量表角度解答下这个问题....详细看下两个方法的局部变量表 query方法的局部变量表,如下 shadow方法的局部变量表,如下我们发现,非静态方法shadow的局部变量表中有this,而在静态方法query的局部变量表中没有...在普通方法中,在它的局部变量表中的第一个槽存放了this, 而静态方法的局部变量表中没有存放this.

1.9K3 0

如何使用 TSX 在 Node.js 中本地运行 TypeScript

最有趣的部分是，TSX被开发为Node的完整替代品，因此您实际上可以将TSX用作TypeScript REPL，只需使用npm i -g tsx全局安装它，在终端中运行tsx，然后就可以原生地编写TSX...但更酷的是，您可以在运行文件时使用--loader tsx为所有TypeScript文件加载TSX。...TSX作为加载器通过加载器运行一个文件（或所有文件）很简单，只需在package.json中创建一个启动脚本，并使用以下内容："scripts": { "start": "node --loader...使用TSX作为加载器不允许将其与其他选项一起使用，例如观察模式。扩展功能自Node 20.6版本以来，我们可以直接加载.env文件中存在的环境配置文件。但如何同时使用加载器和配置文件呢？...重要提示：直接从磁盘加载TS文件并使用加载器进行编译比先进行转译然后直接传递JavaScript文件要慢得多，因此建议仅在开发环境中执行此操作。

2K1 0

使用 Ruby 或 Python 在文件中查找

对于经常使用爬虫的我来说，在大多数文本编辑器都会有“在文件中查找”功能，主要是方便快捷的查找自己说需要的内容，那我有咩有可能用Ruby 或 Python实现类似的查找功能？这些功能又能怎么实现？...问题背景许多流行的文本编辑器都具有“在文件中查找”功能，该功能可以在一个对话框中打开，其中包含以下选项：查找：指定要查找的文本。文件筛选器：指定要搜索的文件类型。开始位置：指定要开始搜索的目录。...报告：指定要显示的结果类型，例如文件名、文件计数或两者兼有。方法：指定要使用的搜索方法，例如正则表达式或纯文本搜索。...regex_search：指定是否使用正则表达式进行搜索。脚本将返回一个包含所有匹配文件的文件名列表，或者如果指定了报告文件名选项，则返回一个包含所有匹配文件的文件名和行号的列表。...上面就是两种语实现在文件中查找的具体代码，其实看着也不算太复杂，只要好好的去琢磨，遇到的问题也都轻而易举的解决，如果在使用中有任何问题，可以留言讨论。

921 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭