掌握相对路径、绝对路径的使用，学会规划网站目录结构
合理的网站目录结构是正确使用路径的基础，能提高文件管理效率，避免路径错误。
相对路径是指相对于当前文件所在位置的路径，不包含根目录信息，适用于网站内部文件引用。
| 符号 | 含义 | 使用场景 |
|---|---|---|
| 无符号 | 当前目录（同一文件夹） | 引用同一文件夹中的文件 |
| ./ | 当前目录（与无符号效果相同） | 明确表示当前目录，增强可读性 |
| ../ | 上一级目录 | 引用当前目录的父文件夹中的文件 |
| ../../ | 上两级目录 | 引用当前目录的祖父文件夹中的文件 |
基于以下目录结构，以不同文件为当前文件，演示图片引用路径：
<!-- index.html 文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对路径示例 - 首页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>相对路径引用示例</h1>
<img src="images/logo.png" alt="网站logo" width="200">
<img src="images/products/product1.jpg" alt="产品图片" width="400">
<div class="bg-example">背景图引用示例</div>
</body>
</html>
<!-- css/style.css 文件 -->
.bg-example {
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-size: 50px;
border: 1px solid #ddd;
}
<!-- about.html 文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对路径示例 - 关于我们</title>
</head>
<body>
<h1>关于我们</h1>
<img src="images/logo.png" alt="网站logo" width="200">
<img src="images/products/product1.jpg" alt="产品图片" width="400">
</body>
</html>
绝对路径是指包含完整协议、域名（或盘符）和文件路径的完整地址，适用于引用外部网站资源或本地绝对位置的文件。
| 对比项 | 相对路径 | 绝对路径 |
|---|---|---|
| 适用场景 | 网站内部文件引用 | 外部资源引用、本地文件临时引用 |
| 灵活性 | 高（网站整体移动不影响路径） | 低（路径变更后需重新修改） |
| 长度 | 短，简洁 | 长，复杂 |
| 依赖性 | 依赖文件相对位置 | 依赖完整地址有效性 |
| 部署兼容性 | 好（本地测试和服务器部署一致） | 差（本地路径在服务器无效） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对路径示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 30px;">
<h1 class="text-center">绝对路径引用外部资源示例</h1>
<img src="https://picsum.photos/800/400" alt="外部随机图片" class="img-thumbnail">
<button id="btn-test" class="btn btn-primary">点击测试jQuery</button>
<p id="result" class="mt-3"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn-test").click(function() {
$("#result").text("jQuery加载成功！");
});
});
</script>
</body>
</html>
<!-- 错误示例：path-error.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路径错误排查示例</title>
</head>
<body>
<h1>路径错误排查</h1>
<!-- 错误1：文件名拼写错误 -->
<img src="images/log.png" alt="文件名错误" width="200">
<!-- 错误2：目录层级错误 -->
<img src="../../images/logo.png" alt="层级错误" width="200">
<!-- 错误3：文件不存在 -->
<img src="images/products/product3.jpg" alt="文件不存在" width="200">
<!-- 错误4：大小写错误 -->
<img src="Images/logo.png" alt="大小写错误" width="200">
<!-- 正确示例 -->
<img src="images/logo.png" alt="正确路径" width="200">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品展示页面</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="logo" width="30" height="30">
产品展示平台
</a>
<!-- 导航内容略 -->
</div>
</nav>
<div class="banner">
<img src="images/banner.jpg" alt="banner" class="img-fluid">
</div>
<div class="row mt-5">
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="images/products/product1.jpg" class="card-img-top" alt="产品1">
<div class="card-body">
<h5>产品1</h5>
<p>产品描述</p>
<a href="#" class="btn btn-primary">查看详情</a>
</div>
</div>
</div>
<!-- 更多产品卡片 -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<!-- css/style.css -->
.product-card {
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
<!-- js/main.js -->
$(document).ready(function() {
// 处理图片加载失败
$("img").on("error", function() {
$(this).attr("src", "images/default-product.jpg");
});
});