VS Code 不运行 HTML5/CSS3，仅编辑代码；浏览器打开文件并正确解析语法结构才能生效。需确保文件后缀为 .html、语言模式设为 HTML、声明 且无前置空格，使用 Live Server 插件提供 HTTP 环境以支持现代 CSS 特性。
VS Code 本身不运行 HTML5/CSS3，它只是写代码的工具；真正“用”它们，靠的是浏览器打开文件 + 正确的语法和结构。
怎么让 VS Code 正确识别 HTML5 文件
VS Code 默认根据文件后缀判断语言模式。如果打开 .html 文件却显示为纯文本或别的语言（比如 XML），说明语言模式没对上。
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Change Language Mode，回车 - 在弹出框里选
HTML（不是HTML (Ruby)或Plain Text） - 确认右下角状态栏显示
HTML—— 这直接影响 Emmet 补全、标签闭合、CSS 内联提示是否生效 - 如果每次都要手动切，检查文件是否误存为
.htm或无后缀；VS Code 对.htm默认也识别为 HTML，但部分插件（如 Live Server）可能只监听.html
为什么写完 CSS3 样式没效果
常见原因不是语法错，而是加载路径、作用域或渲染上下文不对。
-
link标签的href路径写错：比如 CSS 文件在css/style.css，但写了href="style.css"（少了一级目录） - 用了 CSS3 新特性（如
grid、flex、clamp()），但浏览器太老（IE 完全不支持，旧版 Safari 需加-webkit-前缀） - 样式被更具体的选择器覆盖：比如写了
div { display: grid; }，但后面有div.container { display: block; }，后者优先级更高 - VS Code 里没有报错，不代表浏览器能执行——打开开发者工具（
F12），看Console有没有Failed to load resource，Elements里样式是否被划掉
Live Server 插件到底要不要装
本地双击打开 HTML 文件，浏览器地址是 file:// 协议，这时很多 CSS3 特性（尤其是涉及 @import、字体加载、某些 Flex/Grid 行为）会异常或受限。
立即学习“前端免费学习笔记（深入）”；
- 装
Live Server（作者：Ritwick Dey）后，右键点 HTML 文件 →Open with Live Server，它起一个本地http://localhost:5500服务 - 这个 HTTP 环境才能真实模拟线上行为：相对路径解析正确、CORS 不干扰、CSS 变量和现代布局正常工作
- 不用配置，不依赖 Node.js，但注意：它默认不支持热更新（改完保存要手动刷新），也不处理构建流程（比如 Sass 编译）
- 如果项目里有
index.html和同级style.css，用 Live Server 后link href="style.css"就能直接命中，不用改成./style.css或绝对路径
最常被忽略的一点：HTML5 文档类型声明 必须顶格写在第一行，且前面不能有任何空格或注释——少了它，Chrome/Firefox 会进 Quirks 模式，CSS3 的盒模型、Flex 布局全乱套。
