软件教程 2025年08月6日
0 收藏 0 点赞 641 浏览 1282 个字
摘要 :

文章目录 绝对文件路径 相对文件路径 示例1: 示例2: 示例3: 文件路径的重要注意事项 HTML 文件路径用于描述网站文件夹中文件的位置。文件路径就像是网页浏览器的……




  • 绝对文件路径
  • 相对文件路径
    • 示例1:
    • 示例2:
    • 示例3:
  • 文件路径的重要注意事项

HTML 文件路径用于描述网站文件夹中文件的位置。文件路径就像是网页浏览器的文件地址。我们可以使用文件路径来链接任何外部资源,例如图片、文件、CSS 文件、JS 文件、视频等,以添加到我们的 HTML 文件中。

src 或 href 属性需要一个属性来将任何外部资源链接到 HTML 文件中。

以下是不同类型的指定文件路径的方法:

  • <img src=”picture.jpg”> 这指定了 picture.jpg 位于与当前页面相同的文件夹中。
  • <img src=”images/picture.jpg”> 这指定了 picture.jpg 位于当前文件夹中的 images 文件夹中。
  • <img src=”/images/picture.jpg”> 这指定了 picture.jpg 位于当前网站的根目录中的 images 文件夹中。
  • <img src=”../picture.jpg”> 这指定了 picture.jpg 位于当前文件夹的上一级文件夹中。

文件路径用于在网页上链接外部文件,例如:

  • 网页
  • 图片
  • 样式表
  • JavaScript

有两种文件路径:

  • 绝对文件路径
  • 相对文件路径

绝对文件路径

绝对文件路径指定完整的 URL 地址。

示例:

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Full URL File Path</h2>  
<img src=\"nature-1.jpg\" alt=\"image\" style=\"width:300px\">  
</body>  
</html>  

相对文件路径

相对文件路径指定与当前页面位置相关的文件。

示例1:

让我们举一个例子,看看文件路径如何指向位于当前网站根目录中的 images 文件夹中的文件。

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Relative File Path</h2>  
<img src=\"/images/nature-2.jpg\" alt=\"Mountain\" style=\"width:300px\">  
</body>  
</html>  

示例2:

这是文件路径指向位于当前文件夹中的 images 文件夹中的文件的方式。

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Relative File Path</h2>  
<img src=\"images/nature-3.jpg\" alt=\"Mountain\" style=\"width:300px\">  
</body>  
</html>  

示例3:

当 images 文件夹位于当前文件夹的上一级文件夹中时。

<!DOCTYPE html>  
<html>  
<body>  
<h2>Using a Relative File Path</h2>  
<img src=\"../images/nature4.jpg\" alt=\"Mountain\" style=\"width:300px\">  
</body>  
</html>  

文件路径的重要注意事项

始终记住使用正确的 URL、文件名、图片名,否则它将不会显示在网页上。 尽量使用相对文件路径,这样您的代码将不依赖于 URL。

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6312.html

管理员

上一篇: HTML 头部
下一篇: HTML 注释
相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号