新手VS Code写HTML必做三步：装Live Server插件、手动设UTF-8编码并保存、关闭files.autoGuessEncoding；新建文件选HTML模式，用!+Tab生成含<meta charset="UTF-8">的结构，保存为index.html后右键Open with Live Server预览。
新手写 HTML 卡在第一步，八成不是语法不会，而是编辑器没配好——保存后中文乱码、改完刷新页面没变化、标签漏闭合还不报错。这些问题全都能在 VS Code 里用几个插件和两处设置解决，不用装 Node.js、不碰命令行、不改系统编码。
VS Code 安装后必须做的三件事
刚装完 VS Code，别急着写代码，先做这三步，否则后续所有操作都会踩坑：
- 安装
Live Server插件：左侧扩展图标搜索Live Server（作者 Ritwick Dey），点安装。它能起一个本地服务器，避免浏览器直接双击打开file://协议导致的 CORS 或资源加载失败 - 确认默认编码是 UTF-8：右下角状态栏点击当前编码（如“GBK”或“UTF-16”），选
Reopen with Encoding → UTF-8，再点右下角“Save with Encoding → UTF-8”。这一步不手动设，中文注释或内容大概率变问号 - 关闭“自动检测编码”：按
Ctrl+,打开设置，搜索files.autoGuessEncoding，把它设为false。VS Code 默认会瞎猜编码，尤其遇到带中文的旧文件时，一猜一个错
写第一个 HTML 文件时别跳过的细节
新建文件后，不要手敲整个结构。VS Code 支持 Emmet 快速生成标准骨架，但新手常忽略两个关键点：
- 先确保语言模式是
HTML：右下角状态栏点击“Plain Text”，选HTML；否则!+Tab不生效 - 输入
!再按Tab，自动生成完整 HTML5 结构，包含<meta charset="UTF-8">和<lang="zh">—— 后者不是必须，但加了能让屏幕阅读器和搜索引擎更好识别中文内容 - 保存时务必用
.html后缀（不是.txt）：右键文件名 → “Rename”，输index.html。Windows 资源管理器默认隐藏扩展名，容易误存成index.html.txt，这种文件双击会用记事本打开，根本不会渲染
预览页面时为什么浏览器没反应
右键点编辑器空白处，选 Open with Live Server，如果浏览器打不开或提示“无法访问此网站”，常见原因就三个：
立即学习“前端免费学习笔记（深入）”；
- 端口被占：
Live Server默认用5500端口。若你之前跑过别的服务（比如 Python 的http.server），可能冲突。关掉其他服务，或在 VS Code 设置里搜liveServer.settings.port，改成5501等空闲端口 - 杀毒软件拦截：某些国产安全软件会把
Live Server当作可疑进程静默拦截。临时禁用试试，或把 VS Code 加入白名单 - 文件不在项目根目录：如果你是从桌面直接拖一个
index.html进 VS Code，它没“项目上下文”，Live Server可能无法正确解析相对路径。建议先建个文件夹（如my-first-page），再用 VS Code “File → Open Folder” 打开整个文件夹
别依赖“右键 → 在浏览器中打开”
VS Code 自带的 Open in Default Browser 插件或快捷键 Alt+Shift+F（部分版本是 Alt+B）看起来方便，但它走的是 file:// 协议，会导致三类问题：
- CSS/JS 外链失效：比如
<link rel="stylesheet" href="style.css">在file://下会被浏览器拒绝加载，控制台报net::ERR_FILE_NOT_FOUND - fetch/AJAX 请求失败：任何用 JavaScript 发起的本地文件请求，都会触发跨域错误
Access to script at 'file:///...' from origin 'null' has been blocked - 图片路径错乱：相对路径在
file://和http://127.0.0.1:5500/下解析逻辑不同，尤其是多层子目录时
所以从第一天起，就只认准 Live Server 的右键菜单项。它起的是真实 HTTP 服务，行为和上线后完全一致，省得后期反复改路径。
