如何在HTML中链接来自不同文件夹的文件？

在HTML中链接来自不同文件夹的文件，主要涉及到相对路径和绝对路径的使用。以下是详细解释：

基础概念

相对路径：相对于当前文件位置的路径。它告诉浏览器从当前文件的位置出发，如何找到目标文件。
绝对路径：从根目录开始的完整路径。它直接指向目标文件，不依赖于当前文件的位置。

类型

链接样式表（CSS）：<link rel="stylesheet" href="path/to/your/file.css">
链接脚本（JavaScript）：<script src="path/to/your/file.js"></script>
链接图片：<img src="path/to/your/image.jpg" alt="Description">

应用场景

在一个复杂的项目中，文件可能分布在不同的文件夹中，需要通过链接来引用这些文件。
在网页设计中，经常需要引用外部的CSS、JavaScript文件或图片资源。

示例代码

假设你的项目结构如下：

project/
├── index.html
└── assets/
    ├── style.css
    └── image.jpg

链接样式表（CSS）

在 index.html 中链接 assets/style.css 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/style.css">
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

链接图片

在 index.html 中引用 assets/image.jpg 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <img src="assets/image.jpg" alt="Description">
</body>
</html>