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。