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 属性里，它会自动算好相对路径。
立即学习“前端免费学习笔记（深入）”；
Live Server 插件默认端口和根目录怎么确认
Live Server 默认启动在 http://127.0.0.1:5500，但它把哪个文件夹当根？答案是：VS Code 当前打开的**工作区文件夹**（即你按 File → Open Folder 选的那个）。不是 HTML 文件所在子文件夹，更不是桌面或下载目录。
- 如果项目结构是
my-project/index.html和my-project/css/style.css，那/css/style.css就能命中 - 如果你直接打开了
my-project/src/index.html，但没把my-project设为根目录，Live Server 就会以src/为根，/css/...自然 404 - 检查方法：启动 Live Server 后看浏览器地址栏，路径第一段（
http://127.0.0.1:5500/xxx中的xxx）就是它认定的根下一级，对照你的文件树就能反推
常见路径陷阱与快速自查项
遇到资源加载失败，先盯住这四点，比重写代码快得多：
- 浏览器地址栏 URL 是
file:///开头？→ 说明是双击打开，所有路径必须按文件系统来，不能用/css/... - 地址栏是
http://127.0.0.1:5500/开头？→ 确认 VS Code 工作区根是否正确，再核对路径是否以项目根为起点 -
pages/下） - 路径里有中文或空格？→ 全部替换成英文下划线，URL 编码容易出错，Live Server 也不总处理得好
路径问题从来不是 HTML5 的锅，是开发环境和部署方式混用导致的错位。搞清“谁在解析路径”（浏览器？Live Server？Web 服务器？）比背规则管用得多。
