HTML5路径错误典型表现为图片/CSS/JS加载失败且控制台报404，根源在于路径写法与运行环境（双击打开或Live Server）的根目录基准不匹配；Live Server以VS Code工作区文件夹为根，双击则以HTML所在目录为根；推荐Live Server下用根相对路径（/css/style.css），双击或非根部署时用纯相对路径（./css/style.css），并借助VS Code拖拽功能生成准确路径。
VS Code 中 HTML5 路径写错的典型表现
打开 HTML 文件，浏览器里图片不显示、CSS 无样式、JS 报 404，控制台明确提示类似 GET http://127.0.0.1:5500/css/style.css net::ERR_ABORTED 404 —— 这基本就是路径错了，不是文件不存在，而是你写的路径和实际文件位置对不上。
VS Code 本身不运行服务器，靠插件（如 Live Server）或浏览器直接双击打开，这两种方式的根路径基准完全不同：
- 双击打开：以文件系统绝对路径为基准，
./指向当前 HTML 所在目录 - Live Server 启动：以项目根目录（即 VS Code 打开的文件夹）为
/，/css/style.css是从项目根开始找
相对路径 vs 绝对路径怎么选才不翻车
别硬记“应该用哪个”，看场景：
- 用 Live Server（推荐日常开发）：优先用**根相对路径**，即以
/开头，比如。前提是你的项目结构清晰，CSS 确实在项目根下的css/文件夹里 - 要发给别人双击运行，或部署到非根路径（如 GitHub Pages 子路径）：改用**纯相对路径**，比如
./css/main.css或../assets/js/app.js，严格按 HTML 文件与目标资源的物理位置关系写 - 绝对 URL（
https://...）适合 CDN 资源，但本地开发慎用，离线即失效
一个容易忽略的点：./ 和不写 ./ 效果一样（css/main.css ≡ ./css/main.css），但 ../ 多一层就容易漏，建议用 VS Code 的资源拖拽功能自动生成路径——按住 Alt 拖文件到 HTML 的 href 或 src 属性里，它会自动算好相对路径。
立即学习“前端免费学习笔记（深入）”；
