写ref="/tag/141/" style="color:#479099;font-weight:bold;">HTML页面时，很多人还停留在记事本+浏览器刷新的阶段。其实只要花5分钟配好IDE，就能自动补全标签、实时预览、语法高亮，连拼错 <div> 都能马上标红提醒。
VS Code：轻量又顺手
装好VS Code后，先点左下角齿轮图标 → "扩展"，搜 Live Server，点安装。再搜 Auto Rename Tag 和 ES7+ React/Redux/React-Native snippets（虽然叫React，但HTML常用片段它也管）。
新建一个文件夹，比如 my-website，在里面建 index.html，输入以下内容试试：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的首页</title>
</head>
<body>
<h1>欢迎来到网页世界</h1>
<p>现在右键点编辑区 → "Open with Live Server"，浏览器就自动打开并显示页面了。改完保存，页面还会自动刷新。WebStorm：适合想一步到位的人
WebStorm自带HTML支持，不用额外装插件。新建项目选 "Empty Project"，右键新建 index.html，它会自动生成基础结构。按 Ctrl+Alt+Shift+T（Windows）或 Cmd+Alt+Shift+T（Mac），选 "Create HTML file" 就能快速生成带CSS/JS链接的模板。
想边写边看效果？点右上角绿色三角图标旁的小箭头 → "Edit Configurations" → "+" → "JavaScript Debug"，URL填 http://localhost:63342/your-project-name/index.html（端口可能略有不同），确定后点运行，就直接在浏览器里调试了。
小技巧：让代码更清爽
VS Code里按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 "Preferences: Open Settings (JSON)"，粘贴这段：
{
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\\.html$",
"cmd": "open -a 'Google Chrome' '${file}'"
}
]
}
}再装个插件叫 Run on Save，以后每次保存HTML，Chrome就会自动刷新当前页——不用手动切窗口、不用点F5，写完回车保存，眼睛一抬就看到效果。