理解 HTML 中文件路径的核心作用
准确区分绝对路径与相对路径的定义、语法和适用场景
掌握相对路径的三种形式：文档相对、根相对、目录导航（含 . 和 ..）
遵循工程化最佳实践，构建健壮、可移植的前端项目结构
HTML 文件路径用于指定外部资源（如图片、CSS、JavaScript、视频等）的位置，使浏览器能够正确加载这些内容。
典型用法：
<img src="path/to/image.jpg" alt="描述">
<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/script.js"></script>路径错误将导致资源无法加载，表现为：
图片显示为“破碎图标”
样式未生效（页面无样式）
脚本功能缺失
定义：包含完整 URL 的路径，从协议（https://）开始，明确指向互联网上的某个资源。
语法：
<img src="https://example.com/images/photo.jpg" alt="Photo">特点：
与当前 HTML 文件位置无关
可访问任何公开的网络资源
常用于引用 CDN、第三方服务（如 Google Fonts、YouTube 缩略图）
示例：
<!DOCTYPE html>
<html>
<head>
<title>绝对路径示例</title>
</head>
<body>
<h2>嵌入外部图片</h2>
<img src="https://www.kurogames.com/static/ossweb-img/img-zs-Dc6WHDtG.webp"
alt="库洛游戏"
style="width: 400px;">
</body>
</html>
适用场景：
使用哔哩哔哩、优酷视频缩略图
引入 Bootstrap、Vue、React 等 CDN 库
嵌入地图、社交媒体插件等第三方内容
定义：根据当前 HTML 文件所在位置来定位资源，不包含域名或协议。
优势：
网站可整体迁移（换域名无需修改路径）
本地开发与线上环境路径一致
更简洁、安全（避免硬编码敏感信息）
目录符号说明
./：当前目录（通常可省略）
<img src="./photo.jpg"> <!-- 等价于 <img src="photo.jpg"> -->../：上一级目录
<!-- 当前文件：/pages/about.html -->
<img src="../images/logo.png"> <!-- 实际路径：/images/logo.png -->../../：上两级目录，依此类推
假设你的网站目录结构如下：
my-site/
├── index.html
├── about.html
├── css/
│ └── main.css
├── js/
│ └── app.js
└── images/
├── logo.png
└── icons/
└── home.svg在不同位置引用资源：
关键区别：
images/logo.png→ 从当前 HTML 所在目录找images子目录
/images/logo.png→ 从网站根目录（如https://yoursite.com/）开始找
工程建议：
对于自有网站资源，优先使用根相对路径（如/css/app.css），兼顾可读性、可维护性与部署稳定性。