结论：index.html中应优先使用相对路径；本地磁盘绝对路径（如c:\xxx）因浏览器安全策略被禁止加载，file://协议下也不支持反斜杠路径，/开头的根相对路径仅在http服务下有效，开发阶段统一用相对路径最稳妥。
直接说结论：index.html 里用相对路径是默认且最安全的选择；绝对路径只有在明确指向根目录或外部 URL 时才合理，本地磁盘绝对路径（如 C:\project\img\logo.png）在浏览器中根本不会加载。
为什么 index.html 里写 C:/xxx/xxx.png 图片不显示
浏览器出于安全限制，禁止网页直接读取本地磁盘路径。即使你在本地双击打开 index.html，src="C:\images\logo.png" 这类写法也会被忽略，控制台报错类似 Not allowed to load local resource。
- 这是浏览器策略，不是你路径写错了
-
file://协议下也不支持 Windows 风格的反斜杠路径（\），强行用file:///C:/...也极不稳定，不同浏览器行为不一致 - 开发阶段就依赖这种写法，后续部署到服务器必然全挂
index.html 引用同级、子目录、父目录资源的写法
所有路径都以 index.html 所在文件位置为起点。假设项目结构是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
my-site/
├── index.html
├── style.css
├── images/
│ └── avatar.jpg
└── pages/
└── about.html
- 引用同级的
style.css：href="style.css"或href="./style.css"（./可省略） - 引用子目录
images/avatar.jpg：src="images/avatar.jpg" - 如果
index.html移到pages/下，想回退到根目录的style.css，就得写href="../../style.css"—— 注意是两个点加斜杠，不是三个点 - 误写成
../style.css会找错位置，尤其当嵌套层级变深时，容易多写或少写一个..
/ 开头的路径不是“绝对路径”，而是“根相对路径”
像 src="/images/logo.png" 这种写法，开头的 / 表示从**网站根目录**（不是文件系统根目录）开始找，等价于 http://localhost:8080/images/logo.png 或 https://example.com/images/logo.png。
- 它不依赖
index.html在哪，只依赖服务器配置的 root 目录 - 本地双击打开
index.html时，这种写法会失败（因为没有 HTTP 服务，/指向的是本地文件系统根，浏览器不允许） - 适合部署后使用，但开发阶段建议统一用相对路径，避免环境切换出问题
- 注意：和
https://开头的网络绝对路径不同，/images/...仍属于“服务器路径”，不是跨域资源
容易被忽略的关键点
路径问题往往不是语法错，而是对“当前文件在哪”判断失误。比如：
- 你以为
index.html在项目根目录，其实它被放在了dist/子目录下，导致所有images/路径失效 - 用构建工具（如 Vite、Webpack）时，
public/下的文件走根路径访问，而src/assets/下的要按源码相对结构写，混用就会 404 -
<a href="about.html"></a>看似简单，但如果页面通过 JS 跳转或 history.pushState 改变了 URL，相对链接的基准可能意外变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
