VSCode新建HTML文件直接双击打开为空白页，是因为浏览器使用file://协议导致fetch、localStorage等API被禁用且资源加载受限；必须通过Live Server插件启动http://127.0.0.1:5500本地服务才能正常运行。
VSCode里新建HTML文件为什么打开是空白页
新建的.html文件如果直接双击打开，浏览器会走本地文件协议（file://），某些功能（比如fetch本地JSON、Service Worker）会被禁用，但更常见的问题是：你写了内容却没刷新——因为VSCode本身不自动启动服务器，也不自动刷新页面。
正确做法是用VSCode内置的「Live Server」插件起一个本地HTTP服务，这样地址变成http://127.0.0.1:5500/xxx.html，一切才按标准Web环境运行。
- 装插件前先确认已安装VSCode官方扩展：搜索「Live Server」，选作者为「Ritwick Dey」那个（图标是闪电）
- 装完后右键编辑器里的HTML文件 → 点「Open with Live Server」，不要双击文件资源管理器里的文件
- 首次运行会弹系统提示，点「允许」；之后每次保存，页面自动刷新（不用手动F5）
写完HTML怎么确认语法没写错
VSCode默认对.html文件有基础高亮和标签闭合提示，但不会拦住你写错的结构。比如<div><p></div></p>这种嵌套错误，浏览器会自动容错修正，但结果可能不是你想要的。
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）呼出命令面板，输入「Format Document」回车，可格式化代码（需先装Prettier插件并设为HTML默认格式化工具） - 在设置里搜「html.suggest.html5」，确保勾选，否则新标签如
<main><section>不提示 - 想严格校验，可以装「HTMLHint」插件，它会在编辑器底部报错，比如「
img缺少alt属性」
运行时报「找不到CSS/JS文件」怎么办
这是路径问题。浏览器加载资源时，路径是相对于当前HTML文件的URL，不是你电脑上的文件夹层级。比如你在project/index.html里写<link rel="stylesheet" href="css/style.css">，那实际请求的是http://127.0.0.1:5500/css/style.css，而不是project/css/style.css。
立即学习“前端免费学习笔记（深入）”；
- 用Live Server时，项目根目录就是服务器根目录——把
index.html放在最外层，别套太多文件夹 - 路径写法优先用相对路径：
./css/style.css（同级目录下的css文件），../images/logo.png（上一级的images文件夹） - 绝对路径以
/开头（如/js/app.js）表示从服务器根开始，不是系统根目录 - 检查开发者工具（F12）的Network标签页，看404的请求地址是什么，比猜更快
为什么改了JS但页面没反应
常见原因不是代码错，而是浏览器缓存了旧JS，或者<script>位置不对。尤其新手常把<script>写在<head>里又操作DOM，结果document.getElementById返回null。
- 加版本参数强制刷新：
<script src="app.js?v=1.0.1"></script>，每次改完升个号 - 脚本放
</body>前，或加defer属性：<script src="app.js" defer></script></li> <li>Live Server默认不支持ES6模块的<code>import
语法（除非加type="module"且用http://协议），普通<script>里直接写代码最稳
