直接打开HTML文件无法加载CSS及图片，VS Code Live Server可正常加载

问题根源 #

你写的href="/CSS files/stylesheet.css"是根路径绝对引用：

• 双击打开HTML时，浏览器会把电脑的磁盘根目录（比如Windows的C:\、Mac的/）当成网站根目录，自然找不到你项目里的CSS文件夹。
• Live Server启动本地服务器后，会把你的项目文件夹当成网站根目录，所以绝对引用能精准找到文件。

解决办法：改用相对路径 #

根据你的项目文件结构调整引用路径：

• 如果HTML文件和CSS files文件夹在同一层级，直接写：

  <link rel="stylesheet" href="CSS files/stylesheet.css" type="text/css">
  

  （加./也可以，比如./CSS files/stylesheet.css，效果一样）
• 如果HTML在子文件夹里（比如HTML在html文件夹，CSS在上级目录的CSS files），就用../表示上级目录：

  <link rel="stylesheet" href="../CSS files/stylesheet.css" type="text/css">
  

• 图片引用同理，比如图片在images文件夹，和HTML同级的话，写src="images/xxx.png"即可。

举个常见的项目结构例子：

我的项目文件夹/
├─ index.html
├─ CSS files/
│  └─ stylesheet.css
└─ images/
   └─ banner.jpg

对应的引用代码：

<link rel="stylesheet" href="CSS files/stylesheet.css" type="text/css">
<img src="images/banner.jpg" alt="首页横幅">

内容的提问来源于stack exchange，提问作者MrM-roy