HTML 文件路径

HTML 文件路径用于描述文件在网站文件夹中的位置。文件路径就像网页浏览器中文件的地址。我们可以借助文件路径将任何外部资源添加到我们的 HTML 文件中，例如图像、媒体文件、CSS 文件、JS 文件、视频等。

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。

文件路径的类型

HTML 中有两种类型的文件路径，如下所示：

1. 绝对路径
2. 相对

1. 绝对文件路径

绝对文件路径指定完整的 URL 地址，指向互联网上资源的位置。它由协议 http:// 或 https://、域名和资源路径组成。

语法

HTML 绝对文件路径的语法如下：

输出

2. 相对文件路径

这指定了与当前页面位置相关的文件。它指定了当前正在查看的 HTML 文件中资源位置的路径。

语法

示例

让我们看看文件路径如何指向位于当前网页根目录下的 images 文件夹中的文件。

示例

文件路径就是这样指向当前文件夹中 images 文件夹中的文件的。

示例

当 images 文件夹位于比当前文件夹高一级的文件夹中时。

文档相对路径与根相对路径

文件路径的重要注意事项

• 请务必使用正确的 URL、文件名、图像名，否则它们不会显示在网页上。

• 尽量使用相对文件路径，这样你的代码将独立于 URL。
• 以逻辑结构组织文件可以让你轻松管理它们。
• 对内部资源使用相对路径。它使你的网站更具可移植性且更易于维护，尤其是在你计划切换到不同域名时。
• 在本地和服务器上测试路径。由于目录结构不同，在本地计算机上工作的路径可能在 Web 服务器上无法以相同方式运行。
• 文件名中不要保留空格，因为空格会导致 URL 中出现问题。用连字符或下划线代替空格。

结论

了解 HTML 文件路径对于在网页中连接图像、样式表、脚本等非常有用。尽管在开发过程中你可以使用相对路径，但当你准备发布网站时，你倾向于使用绝对路径或 CDN 链接。始终查看你的文件夹结构，记住名称区分大小写，并确保文件有序，以避免链接断裂。