直接运行html只需浏览器和文本编辑器；常见打不开问题：文件名缺.html后缀、编码未选utf-8、保存类型误为.txt；vs code用live server插件可一键预览并热重载；f12开发者工具中elements查结构、console看js错误、sources确认文件加载。
直接运行 HTML 代码不需要装任何软件，也不用配环境——只要一个浏览器、一个文本编辑器，保存为 .html 后缀就能打开看效果。
用记事本写完代码后打不开？检查这三件事
很多人双击文件没反应，或打开是乱码、空白页，问题通常出在以下环节：
- 文件名没带
.html后缀（比如只存成myfirstpage，正确应为myfirstpage.html） - 保存时“编码”没选
UTF-8（Windows 记事本默认是 ANSI，中文会变问号或方块） - 保存类型选成了
.txt（即使改了后缀，实际仍是文本文件，浏览器不认）
VS Code 里写 HTML 怎么快速预览？别手动刷新
VS Code 本身不内置浏览器预览，但加个插件就能点一下就打开页面，比反复保存+双击快得多：
- 安装插件
Live Server（微软官方出品，安全稳定） - 右键编辑器里的 HTML 文件 → 点
Open with Live Server - 它会自动启动本地服务（如
http://127.0.0.1:5500/index.html），且支持热重载：你一保存，浏览器立刻刷新
注意：Live Server 默认从 index.html 开始找，如果你的文件名不是这个，得手动在地址栏补上文件名，比如 /mytest.html。
浏览器 F12 打开后，该看哪个面板查错？
页面没显示、样式不对、文字乱码……别瞎猜，直接用开发者工具定位：
-
Elements面板：看 HTML 结构是否完整，标签有没有漏闭合（比如<p>没写</p>）、属性引号是否缺失（src=images/a.jpg缺引号会失效） -
Console面板：如果有 JS 代码，报错信息全在这儿，比如Uncaught ReferenceError: xxx is not defined -
Sources面板：确认浏览器加载的是你刚改的文件（有时缓存旧版本，可右键 →Clear cache and hard reload）
最容易被忽略的是编码和文件后缀——哪怕代码完全正确，这两项错了，页面照样不渲染。动手前先盯住这两个点，省下 90% 的“为什么打不开”时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
