HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML 文件路径

HTML 文件路径用于描述文件在网站文件夹中的位置。文件路径就像网络浏览器的文件地址。借助图像、文件、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.javatpoint.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>

例子：

这就是文件路径如何指向位于当前文件夹中的图像文件夹中的文件。

<!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。


上一主题 HTML 注释 下一主题 HTML 头
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具