在电脑桌面上运行html文件是前端开发入门的基础操作，不需要搭建复杂的服务器环境，通过系统自带的功能或者常用浏览器就能完成，整个过程只需要几步操作即可实现。
Windows系统运行桌面html文件步骤
步骤1：保存html文件到桌面
首先需要将写好的html代码保存为后缀为.html的文件，保存到电脑桌面。如果是用记事本编写代码，保存时要注意选择文件类型为所有文件，编码选择UTF-8，避免中文出现乱码。示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>桌面测试页面</title>
</head>
<body>
<h1>这是桌面运行的html文件</h1>
<p>测试本地运行效果</p>
</body>
</html>
步骤2：直接双击打开文件
保存完成后，回到桌面找到刚才保存的html文件，直接双击文件图标，系统会自动调用默认浏览器打开该文件，此时就能在浏览器中看到页面的渲染效果。如果双击后没有用浏览器打开，可以右键点击文件，选择打开方式，然后选择常用的浏览器即可。
步骤3：通过浏览器手动打开
也可以先打开任意浏览器，然后将桌面上的html文件直接拖拽到浏览器窗口中，松开鼠标后浏览器就会加载该文件。或者点击浏览器的文件菜单，选择打开文件选项，在弹出的文件选择窗口中找到桌面的html文件，点击确认即可打开。
macOS系统运行桌面html文件步骤
步骤1：保存html文件到桌面
在macOS系统中，用文本编辑编写html代码时，保存前需要点击格式菜单，选择制作纯文本，然后再保存文件，后缀设置为.html，保存到桌面即可。注意编码选择Unicode UTF-8，避免乱码问题。
步骤2：双击打开文件
保存完成后，直接双击桌面上的html文件，系统会默认用Safari浏览器打开文件，查看页面效果。如果需要用其他浏览器打开，可以右键点击文件，选择显示简介，在打开方式中选择目标浏览器，点击全部更改即可设置默认打开方式。
步骤3：浏览器拖拽打开
和Windows系统操作类似，打开目标浏览器后，将桌面的html文件拖拽到浏览器窗口中，即可完成文件加载，查看运行效果。
常见问题及解决办法
- 双击文件后显示代码而不是渲染页面：这是因为文件的默认打开方式设置为了记事本或者文本编辑器，右键点击文件选择打开方式，选择浏览器作为默认打开程序即可解决。
- 页面中文显示乱码：检查html文件的
<meta charset="UTF-8">标签是否存在，同时确认文件保存时的编码是UTF-8，重新保存文件后再次打开即可。 - 拖拽文件到浏览器没有反应：部分浏览器可能限制了本地文件拖拽加载，可以改用浏览器的打开文件功能，手动选择桌面上的html文件加载。
注意事项
如果html文件中引用了本地其他资源文件，比如css文件、js文件或者图片，需要保证这些资源的路径是相对路径，并且和html文件在同一个桌面目录下，或者路径书写正确，否则会出现资源加载失败的问题。如果是引用网络资源则不需要考虑本地路径问题。
另外，本地运行的html文件地址栏会显示file:///开头的本地路径，和线上服务器的http://或者https://开头的地址不同，部分涉及跨域的操作在本地运行时会有限制，测试相关功能时需要注意这一点。