HTML教程
HTML5教程
HTML参考手册

HTML 文件路径

HTML 文件路径

HTML文件路径用于描述文件在网站文件夹中的位置。文件路径就像Web浏览器的文件地址一样。我们可以借助图像,文件,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>一个绝对文件路径demo</h2>
<img src="https://www.lidihuo.com/images/logo.png" alt="image">
</body>
</html>

相对文件路径

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

示例:

让我们看一个例子,看看文件路径如何指向当前网站根目录下images文件夹中的文件。
<!DOCTYPE html>
<html>
<body>
<h2>一个相对文件路径demo</h2>
<img src="../images/logo.jpg" alt="image">
</body>
</html>

示例:

这是文件路径指向当前文件夹中images文件夹中文件的方式。
<!DOCTYPE html>
<html>
<body>
<h2>使用相对文件路径</h2>
<img src="images/image1.jpg" alt="image">
</body>
</html>

示例:

当images文件夹位于当前文件夹上方一级的文件夹中。
<!DOCTYPE html>
<html>
<body>
<h2>使用相对文件路径</h2>
<img src="../images/image2.jpg" alt="image">
</body>
</html>

文件路径的重要点:

始终记住使用正确的URL,文件名,图像名,否则它将不会显示在网页上。 尝试使用相对文件路径,以使您的代码独立于URL。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4