VS Code写网页无需复杂环境搭建，只需新建HTML文件、写出标准结构（含DOCTYPE、html、head、body）、用Live Server插件启动本地服务即可预览；路径引用须相对于HTML文件，Ctrl+点击可验证路径有效性。
用 VS Code 写网页，根本不需要“搭建环境”
VS Code 本身不运行网页，它只负责写代码；真正让网页动起来的是浏览器。所以所谓“搭建”，其实是配好编辑、保存、预览这一条最短路径，避免卡在“写了却看不到效果”上。
关键动作就三步：新建文件、写基础 HTML、用插件或命令快速在浏览器里打开。别被“搭建”这个词带偏，没那么多要装的。
新建 index.html 后，必须写对这三行才能被当网页识别
很多新手存了 index.html，双击打开却是乱码或空白——大概率是没写标准的 HTML 结构，浏览器无法正确解析。
- 第一行必须是
，少这个，IE 或旧版 Edge 可能进怪异模式 - 根元素必须是
，里面至少包含和 -
里得有可见内容，比如<p>Hello</p>，纯空文件浏览器不会报错，但啥也不显示
示例最小可运行结构：
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<p>It works.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill1675" title="VSCode"><img
src="https://img.php.cn/upload/skill/000/000/081/178842972858328.jpg" alt="VSCode" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill1675" title="VSCode">VSCode</a>
<p>避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。</p>
</div>
<a href="/xiazai/skill1675" title="VSCode" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</body>
</html>
别双击打开 index.html，用 Live Server 插件才靠谱
双击用系统默认浏览器打开，看似快，实则埋坑：文件路径变成 file:/// 协议，所有相对路径（如 ./style.css）、fetch() 请求、Service Worker 都会失败，报 CORS 或 net::ERR_FILE_NOT_FOUND。
- 装官方推荐插件：
Live Server（作者：Ritwick Dey） - 右键编辑器任意位置 → 选
Open with Live Server，自动启动本地http://127.0.0.1:5500 - 改完代码保存，页面自动刷新；关掉窗口即停服务，无残留进程
不用配端口、不碰命令行、不装 Node.js —— 就这一个插件，覆盖 95% 静态页开发场景。
CSS/JS 改了没反应？检查 src 和 href 路径是不是相对当前 HTML 文件
VS Code 不管路径对不对，只管你敲的字。但浏览器加载时，路径是相对于 index.html 所在目录算的，不是相对于你当前打开的 CSS 文件。
- 如果
index.html和style.css在同一级，引用写<link rel="stylesheet" href="style.css"> - 如果 CSS 在
css/style.css，就得写href="css/style.css"，不是./css/style.css（HTML 里.没意义） - JS 同理：
<script src="app.js"></script>，不是./app.js；路径错只会静默失败，控制台报404
小技巧：在 VS Code 里按住 Ctrl（Mac 是 Cmd）点路径，能直接跳转到对应文件——点不开，基本就是路径错了。
最常卡住的地方，其实是把“写代码”和“运行代码”当成一件事。VS Code 只做前者，后者交给浏览器和一点点约定（比如文件名、路径、协议）。越早分清边界，越少折腾配置。
