HTML新手入门编辑器配置教程-html教程-PHP中文网

新手vs code写html必做三步：装live server插件、手动设utf-8编码并保存、关闭files.autoguessencoding；新建文件选html模式，用!+tab生成含的结构，保存为index.html后右键open with live server预览。

html新手入门编辑器配置教程

新手写 HTML 卡在第一步，八成不是语法不会，而是编辑器没配好——保存后中文乱码、改完刷新页面没变化、标签漏闭合还不报错。这些问题全都能在 VS Code 里用几个插件和两处设置解决，不用装 Node.js、不碰命令行、不改系统编码。

刚装完 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 默认会瞎猜编码，尤其遇到带中文的旧文件时，一猜一个错

新建文件后，不要手敲整个结构。VS Code 支持 Emmet 快速生成标准骨架，但新手常忽略两个关键点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

先确保语言模式是 HTML：右下角状态栏点击“Plain Text”，选 HTML；否则 ! + Tab 不生效
输入 ! 再按 Tab，自动生成完整 HTML5 结构，包含 <meta charset="UTF-8"> 和 <lang></lang> —— 后者不是必须，但加了能让屏幕阅读器和搜索引擎更好识别中文内容
保存时务必用 .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 服务，行为和上线后完全一致，省得后期反复改路径。