HTML教程-HTML文件路径

HTML 文件路径用于描述文件在网站文件夹中的位置。文件路径就像网络浏览器的文件地址。我们可以在文件路径的帮助下链接任何外部资源以添加到我们的 HTML 文件中,例如图像、文件、CSS 文件、JS 文件、视频等。
src 或 href 属性需要一个属性来将任何外部源链接到 HTML 文件。
文件路径在网页上用于链接外部文件,例如:
- 网页
- 图片
- 样式表
- JavaScript
有两种类型的文件路径:
- 绝对文件路径
- 相对文件路径
绝对文件路径
绝对文件路径指定完整的 URL 地址。
例子:
<!DOCTYPE html>
<html>
<body>
<h2>Using a Full URL File Path</h2>
<img src="https://www.javatpoint.com/images/nature-1.jpg" alt="image" style="width:300px">
</body>
</html>
相对文件路径
相对文件路径指定与当前页面位置相关的文件。
例子:
我们举个例子看看文件路径是如何指向位于当前web根目录的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>
例子:
这就是文件路径如何指向位于当前文件夹中的图像文件夹中的文件。
<!DOCTYPE html>
<html>
<body>
<h2>Using a Relative File Path</h2>
<img src="images/nature-3.jpg" alt="Mountain" style="width:300px">
</body>
</html>
例子:
当图像文件夹位于当前文件夹的上一级文件夹中时。
<!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。