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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div>
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）呼出命令面板，输入「Format Document」回车，可格式化代码（需先装Prettier插件并设为HTML默认格式化工具） - 在设置里搜「html.suggest.html5」，确保勾选，否则新标签如
<main></main><section></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>位置不对。尤其新手常把<script></script>写在里又操作DOM，结果document.getElementById返回null。
- 加版本参数强制刷新：
<script src="app.js?v=1.0.1"></script>，每次改完升个号 - 脚本放
前，或加defer属性：<script src="app.js" defer></script>
- Live Server默认不支持ES6模块的
import语法（除非加<code>type="module"且用http://协议），普通<script></script>里直接写代码最稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
