一、保存为.html文件并双击用浏览器打开；二、通过浏览器开发者工具编辑html实时预览；三、使用http-server等本地服务器运行以支持高级功能；四、利用vs code的live server插件实现自动刷新预览，提升开发效率。
如果您编写了一段HTML5代码，想要在本地查看其运行效果，可以通过多种方式将其在浏览器中打开。以下是几种常见的操作方法：
一、使用文本编辑器保存并用浏览器打开
这是最基础且常用的方法，适用于初学者和简单的页面测试。通过文本编辑器将代码保存为.html文件，然后用浏览器直接打开。
1、使用记事本或代码编辑器（如VS Code、Sublime Text、Notepad++）输入您的HTML5代码。
2、点击“文件”菜单，选择“另存为”，在保存类型中选择“所有文件”，将文件命名为index.html。
立即学习“前端免费学习笔记（深入）”；
3、选择一个容易找到的文件夹进行保存，例如桌面。
4、双击保存的.html文件，系统会默认用已设置的浏览器打开并显示页面内容。
二、通过浏览器开发者工具实时预览
此方法适合快速测试小段代码，无需保存文件即可查看效果。
1、打开Chrome或其他现代浏览器，按下F12键启动开发者工具。
2、切换到“Elements”标签页，找到根元素的位置。
3、右键点击任意HTML节点，选择“Edit as HTML”选项。
4、粘贴您编写的完整HTML5结构代码，完成后点击空白处确认修改。
5、页面将立即渲染您输入的内容，可实时查看布局与样式效果。
三、配置本地服务器运行（推荐用于复杂项目）
当您的HTML5代码涉及JavaScript请求、AJAX调用或模块导入时，必须通过HTTP服务运行，否则会出现跨域或文件访问限制。
1、安装Node.js环境，确保命令行中可以使用npm命令。
2、全局安装轻量级服务器工具，执行命令：npm install -g http-server。
3、将HTML文件放入一个专用文件夹，例如命名为my-project，在该文件夹路径下打开命令行。
4、运行http-server命令，启动本地服务器。
5、浏览器访问提示的地址（通常是 http://localhost:8080），即可查看运行中的页面。
四、使用集成开发环境（IDE）内置预览功能
许多现代代码编辑器提供一键预览功能，极大提升开发效率。
1、在VS Code中安装“Live Server”扩展插件。
2、打开您编写好的HTML5文件。
3、右键点击编辑器内容区域，选择“Open with Live Server”。
4、默认浏览器将自动打开并加载页面，且支持保存后自动刷新功能。
