Auto Close Tag、Auto Rename Tag 和 Live Server 是 HTML 新手必备的三个插件：前者自动闭合标签，后者同步重命名配对标签，Live Server 提供 HTTP 服务实现保存即刷新，避免 file:// 协议引发的路径、跨域及调试问题。
直接用 VS Code + Live Server 就能跑起来，不用装 Node、不配 Webpack、不改系统设置——这才是 HTML 新手该走的第一步。
VS Code 安装后必须装哪几个插件
只装三个就够：Auto Close Tag、Auto Rename Tag、Live Server。前两个解决标签漏闭合、改一个标签名要手动改两次的低级错误；Live Server 负责保存即刷新，省去反复点开浏览器再按 F5 的动作。
-
Auto Close Tag：输入<div>后自动补上</div></li> <li><code>Auto Rename Tag
：把光标放在<header>的h上，改写成section，闭合标签也同步变成</section> -
Live Server：右键 HTML 文件 →Open with Live Server，地址栏自动跳到http://127.0.0.1:5500/index.html
别装 HTML Boilerplate 或 Emmet 插件——VS Code 自带 Emmet，敲 ! + Tab 就能生成完整 HTML5 结构，多装反而容易冲突。
为什么双击打开 index.html 总是不生效
因为浏览器用的是 file:// 协议，不是 http://。这会导致三类问题：
立即学习“前端免费学习笔记（深入）”；
- CSS 中的相对路径（比如
./css/style.css）404 - JavaScript 里用
fetch('./data.json')直接报跨域错误 - Firefox 的 Network 面板完全空白，看不出请求发没发
这不是你代码写错了，是浏览器安全策略。解决方案只有一个：别双击，用 Live Server 启服务。它起的是真实 HTTP 服务，所有路径、请求、CORS 行为都和线上一致。
HTML5 模板怎么快速生成
不用复制粘贴，VS Code 内置了快捷方式：在空文件里输入 !，然后按 Tab 键，立刻生成标准 HTML5 结构，包含 <!DOCTYPE html>、<html lang="zh">、<meta charset="UTF-8"> 和响应式 viewport 声明。
如果想自定义，可以手动编辑用户代码片段：
- 按
Ctrl+Shift+P→ 输入Configure User Snippets→ 选html.json - 加一段：
"html5-zh": { "prefix": "html5z", "body": ["","",""," <meta charset='\"UTF-8\"'>"," <meta name='\"viewport\"' content='\"width=device-width,' initial-scale='1.0\"'>"," <title>$1</title>","",""," $2","",""], "description": "中文 HTML5 模板" } - 之后输
html5z+ Tab 就能触发
Firefox 调试时 Network 面板为空怎么办
不是插件没开、不是配置错了，是 Firefox 对 file:// 协议做了限制——它压根不记录本地文件发起的网络请求。只要用 Live Server 把地址改成 http://127.0.0.1:5500/，Network 面板立刻有数据。
顺带提醒：Firefox 开发者工具（Ctrl+Shift+I）是原生功能，不用装任何扩展；但如果你装了旧版 Firebug 或某些“网页截图”类插件，它们会劫持 F12 键，导致开发者工具打不开——禁用这些插件即可。
真正容易被忽略的是路径问题：Live Server 总是从你当前打开的文件夹根目录起服务。如果你在子文件夹里右键启动，而 index.html 引用了 ./css/style.css，但 CSS 实际在上级目录，就会 404。建议始终从项目根目录打开 VS Code，让 index.html 在最外层。
