VSCode不运行HTML/CSS，仅编辑文件；需用Live Server启动本地服务器（http://127.0.0.1:5500），确保HTML正确引用CSS路径，并在编辑器标签页内右键选“Open with Live Server”，才能正常加载样式并支持热重载。
VSCode 本身不“运行”HTML 或 CSS，它只编辑文件；真正运行的是浏览器。要让 HTML 和外部 CSS 同时生效，关键不是“同时运行两个文件”，而是确保 HTML 正确加载 CSS，并通过本地服务器环境预览——否则 file:// 协议下多数相对路径会失败，样式根本不会应用。
为什么直接双击 HTML 文件经常看不到 CSS 样式
浏览器出于安全限制，在 file:// 协议下禁止加载本地 CSS/JS（尤其跨目录或含空格路径时），还会静默忽略错误。你看到的“没样式”，大概率不是代码写错了，而是路径没被浏览器接受。
-
link标签里的href是相对路径，必须相对于 HTML 文件位置计算，不是相对于 VSCode 当前打开的文件夹 - Windows 路径中的反斜杠
\在 HTML 中无效，必须用正斜杠/ - 大小写敏感：Linux/macOS 下
Style.css≠style.css，而 Windows 资源管理器常隐藏后缀，容易误判 - 浏览器缓存 CSS：改完 CSS 后按
Ctrl+F5强制刷新，或禁用缓存（开发者工具 → Network → Disable cache）
Live Server 是唯一靠谱的多文件关联预览方式
它启动一个真正的 http://127.0.0.1:5500/ 本地服务器，绕过 file:// 限制，所有相对路径、字体、图片、AJAX 请求都可正常工作。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 安装插件后，**必须在 HTML 文件的编辑器标签页内右键**，选
Open with Live Server—— 在资源管理器里右键 HTML 文件无效 - 首次启动后，状态栏右下角会出现绿色
Go Live按钮，之后点它就能快速重启服务 - 修改任意文件（
index.html、style.css、script.js）保存后，页面自动刷新，动画、交互全生效 - 如果项目有多个 HTML 页面（如
about.html），直接在浏览器地址栏改成http://127.0.0.1:5500/about.html即可跳转，CSS 仍能正确加载
路径写错的典型表现和自查方法
浏览器开发者工具的 Network 面板是唯一可信依据：CSS 文件显示 404 或状态为空，就说明路径错了。
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 中
<link rel="stylesheet" href="css/style.css">—— 如果style.css和 HTML 同级，应写href="style.css"，不是href="./css/style.css" - 打开开发者工具 →
Elements面板，看<head>里link标签是否渲染出来；右键该标签 →Copy → Copy link address，粘贴到新标签页看能否下载 CSS - VSCode 里按
Ctrl+Click（Windows/Linux）或Cmd+Click（macOS）点击href值，如果能跳转到对应 CSS 文件，路径基本正确 - 避免使用绝对路径如
href="/css/style.css"—— 它从服务器根目录找，而 Live Server 的根就是你打开的文件夹，不是系统盘符
最易被忽略的一点：Live Server 默认以当前打开的 HTML 文件所在文件夹为服务器根目录，而不是 VSCode 工作区根。如果你在子文件夹里编辑 pages/index.html，但 CSS 在项目根下的 css/，那 href="../css/style.css" 才对 —— 很多人卡在这一步，反复检查代码却漏看了文件层级关系。
