运行HTML文件：超简单的本地打开方法

所有HTML文件本质都是纯文本文件，不用复杂软件、不用搭建服务器，电脑自带工具就能直接运行，新手完全零门槛上手。很多人第一次写代码，写完文件却一片空白，根本问题到底出在哪？

电脑识别HTML的核心，从来不是特殊格式，而是文件后缀。只要文件结尾是.html，任意浏览器都能自动解析里面的代码，渲染出网页效果。这也是为什么记事本写的文字，改个后缀就能变成网页文件。

最基础、零成本的运行方式，就是双击打开。

操作特别直白，找到你保存好的HTML文件，直接鼠标左键双击，系统会默认调用电脑自带的浏览器，自动加载并运行网页内容。不管是Windows的Edge，还是Mac的Safari，或是你安装的Chrome、火狐浏览器，全部通用，没有任何兼容性门槛。

很多新手都会踩同一个致命坑，我当初初学的时候也栽过跟头。第一次写完代码，老老实实点记事本的保存，文件名随便输了text，保存类型选了文本文档，最后生成的文件后缀是.txt。当时双击打开后，浏览器里直接铺满了所有代码，排版、样式全部消失，忙活半小时写的内容完全失效。

这就是最典型的后缀错误。

想彻底避开这个坑，保存文件时多两步简单操作就行。

• 文件名可以自定义，但结尾必须手动加上 .html，比如index.html、test.html
• 保存类型一定要选择「所有文件」，不要默认的文本文档
• 编码选择UTF-8，能完美杜绝中文乱码的问题

搞定保存，你的文件就真正成型了。

如果双击打开后页面样式错乱、图片加载不出来，大概率是文件路径出了问题。HTML运行时，会根据代码里的路径去找图片、CSS、视频等素材，一旦素材被移动、删除、重命名，网页就会加载失败。

别混用路径。

新手写代码，统一把HTML文件和所有素材放在同一个文件夹里，直接写相对路径，基本不会出错。这种本地直接打开的方式，也被叫做「静态运行」，只适合本地预览、练习代码。

那什么时候不能双击打开？

当你的代码用到了Ajax、接口请求、本地数据读取等功能时，双击打开会触发浏览器的跨域限制，直接报错。这时候简单的本地打开就不够用了，必须借助本地服务器运行。

新手不用下载复杂软件，VS Code装一个Live Server插件就能一键启动服务。右键HTML文件选择Open with Live Server，页面会自动刷新，所有跨域问题全部解决，适配绝大多数进阶代码需求。

日常练习，双击足够用。

真正需要服务器运行的场景，只有做交互功能、对接数据的时候。日常写静态页面、练排版样式，坚持用双击打开的方式，高效又省事。

现在你可以直接找到自己的HTML文件，检查一遍后缀是否正确，双击测试运行效果。