个性化阅读
专注于IT技术分析

HTML文件路径

点击下载

本文概述

HTML文件路径用于描述文件在网站文件夹中的位置。文件路径就像Web浏览器的文件地址一样。我们可以通过图像, 文件, CSS文件, JS文件, 视频等文件路径链接任何外部资源以添加到HTML文件中。

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

以下是用于指定文件路径的不同类型:

  1. <img src =“ picture.jpg”>它指定picture.jpg与当前页面位于同一文件夹中。
  2. <img src =“ images / picture.jpg”>它指定picture.jpg位于当前文件夹的images文件夹中。
  3. <img src =“ / images / picture.jpg”>它指定picture.jpg位于当前站点根目录的images文件夹中。
  4. <img src =“ ../ picture.jpg”>它指定picture.jpg位于当前文件夹上一层的文件夹中。

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

  1. 网页
  2. 图片
  3. 样式表
  4. 的JavaScript

有两种类型的文件路径:

  1. 绝对文件路径
  2. 相对文件路径

绝对文件路径

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

例:

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

立即测试

相对文件路径

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

例:

让我们以示例为例, 查看文件路径如何指向位于当前网站根目录下的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>

立即测试

例:

这是文件路径指向当前文件夹中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>

立即测试

例:

当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。
赞(0)
未经允许不得转载:srcmini » HTML文件路径

评论 抢沙发

评论前必须登录!