本地运行html文件是前端开发入门阶段最基础的操作，不需要搭建复杂的服务器环境，只需要完成文件创建、保存和打开几个步骤就能实现，整个过程操作简单且适配所有主流操作系统。
第一步：创建并保存html文件
首先需要准备一个可运行的html文件，你可以使用系统自带的文本编辑器或者专业代码编辑器来创建文件。
使用系统自带编辑器创建
Windows系统可以打开记事本，Mac系统可以打开文本编辑，输入基础的html结构代码，示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>本地测试页面</title>
</head>
<body>
<h1>这是本地运行的html页面</h1>
<p>测试本地运行效果</p>
</body>
</html>
输入完成后，点击保存，注意文件后缀必须设置为.html，比如命名为test.html，保存路径可以选择桌面等容易找到的位置。
使用专业编辑器创建
如果使用VS Code、Sublime Text等专业编辑器，新建文件后直接输入上述代码，保存时选择html格式即可，编辑器会自动识别语法高亮，方便后续修改。
第二步：通过浏览器打开html文件
保存好文件后，就可以通过浏览器运行这个html文件，不同系统的操作方式略有区别。
Windows系统操作方法
- 找到保存好的
test.html文件，右键点击文件 - 在弹出的菜单中选择打开方式，然后选择你电脑上安装的主流浏览器，比如Chrome、Edge、Firefox等
- 浏览器会自动加载文件，页面就会显示你编写的html内容
Mac系统操作方法
- 在访达中找到保存的
test.html文件 - 右键点击文件，选择打开方式，选择Safari、Chrome等浏览器即可
- 也可以直接把文件拖拽到浏览器窗口中，松开鼠标后浏览器会自动加载文件
通用快捷操作
如果你已经用专业编辑器打开了html文件，很多编辑器都支持快捷键直接调用浏览器预览，比如VS Code可以安装Live Server插件，安装后右键文件选择Open with Live Server，就能自动启动本地服务并在浏览器中打开文件，修改代码后页面还会自动刷新。
第三步：排查运行异常问题
如果打开文件后页面没有显示预期效果，可以按照以下方向排查：
- 检查文件后缀是否正确，必须是
.html或者.htm，如果后缀是.txt浏览器会直接显示代码文本 - 检查html代码语法是否有错误，比如标签没有闭合、字符编码设置错误等，基础结构错误会导致页面渲染异常
- 如果是引用了本地其他资源文件，比如css、js、图片，要检查资源路径是否正确，相对路径要对应文件的实际存放位置
本地运行html的适用场景
本地运行html适合静态页面的开发调试，比如编写简单的展示页面、测试html标签效果、调试基础css样式等，不需要网络环境就能运行。如果页面涉及后端接口调用、需要服务器环境的功能，就需要搭建本地服务器才能正常运行，这时候可以使用Node.js的http-server、Python的SimpleHTTPServer等工具快速启动本地服务。
注意：本地运行的html文件访问地址一般是
file:///开头的本地路径，和线上服务器的http://开头的地址不同，部分涉及跨域的操作在本地直接打开时可能无法正常执行。