html 文件本质是纯文本网页源码文件，打开它分成两种需求，一种是用浏览器打开，直接渲染成可视化网页，另一种是用代码编辑器打开，查看和修改里面的 html 源代码，大部分初学者学习的时候，写完 html 代码之后，最常用就是浏览器预览，也就是把源码渲染成网页效果，很多新手会遇到双击之后变成记事本打开，或者文件后缀是 txt 没有改成 html，导致无法正常用浏览器渲染，还有部分用户会混淆本地打开和服务器访问，本地双击打开属于 file 协议访问，带接口动态功能的页面，本地直接打开会出现 js 请求失效，这种情况就需要搭建本地 web 服务，html 文件本身不需要编译，不需要安装大型软件，系统自带浏览器就可以完成预览，同时记事本也可以打开源码，是前端入门最基础的操作。

打开方式对照表

详细操作说明

浏览器渲染打开，这个是最常用方式，确认文件后缀是 html，不是 txt，找到文件之后，直接双击，系统默认关联浏览器就会自动启动，加载 html 文件，把标签渲染成网页，如果双击默认打开记事本，就右键这个 html 文件，打开方式，选择谷歌浏览器 edge 浏览器这类网页浏览器，还可以勾选始终使用此应用打开，后续双击就默认浏览器启动。

记事本查看源码，右键 html 文件，打开方式选择记事本，这个模式是查看原始代码，不会渲染网页效果，适合简单查看代码，但是没有语法高亮，代码多的时候阅读体验差。

专业代码编辑器打开，比如 vscode，打开编辑器之后，通过文件菜单打开这个 html 文件，支持代码高亮自动补全，还可以安装预览插件，编辑器内部直接预览网页，是写 html 代码首选方案。

本地 web 服务打开，当 html 里面有 ajax 请求跨域接口，或者读取本地 json 文件，直接双击 file 协议打开会被浏览器安全策略拦截，这个时候就需要启动本地 web 服务，通过 http 地址访问 html 文件，动态功能才能正常运行。

实操操作步骤

第一步，确认文件后缀，打开文件扩展名显示，检查文件名称结尾是不是 html，如果是 txt 后缀，重命名改成 html。

第二步，直接双击 html 文件，观察是否自动弹出浏览器网页。

第三步，如果默认打开记事本，右键文件，打开方式，挑选浏览器，设置默认关联程序。

第四步，如果需要修改代码，使用 vscode 打开 html 文件编辑，保存之后刷新浏览器预览效果。

第五步，页面存在接口报错的时候，搭建本地 web 服务，使用 http 地址访问 html 文件测试。

第六步，测试不同浏览器，对比渲染效果差异，排查样式兼容问题。

html 文件怎么打开核心区分预览网页和编辑源码两种场景，日常学习优先双击浏览器预览，写代码就用专业编辑器，动态页面需要本地服务器，重点留意文件后缀名错误，还有 file 协议带来的跨域限制这两个高频问题。

【常见问题】

问题 1 html 文件怎么打开双击变成记事本是什么原因

回答 1 html 文件怎么打开双击变成记事本，是系统默认打开程序关联错误，文件本身还是 html 源码，只需要右键文件，打开方式，手动选择浏览器，并且设置默认打开程序即可。

问题 2 html 文件怎么打开可以用记事本编辑吗

回答 1 html 文件怎么打开可以使用记事本打开编辑，但是记事本没有代码高亮，适合简单修改，正式编写 html 代码推荐 vscode 这类专业代码编辑器。

问题 3 html 文件怎么打开本地双击打开动态页面报错怎么办

回答 1 html 文件怎么打开，本地双击属于 file 协议访问，浏览器安全策略会拦截跨域请求，这种情况需要搭建本地 web 服务，通过 http 协议访问 html 文件解决报错。

问题 4 html 文件怎么打开需要安装专门软件吗

回答 1 html 文件怎么打开不需要强制安装专门软件，系统自带浏览器和记事本就可以完成基础预览和源码查看，专业编辑器属于可选工具，用来提升编写效率。

【免责申明】

本文为 html 文件怎么打开操作教学，不同操作系统默认程序关联逻辑存在差异，部分新版浏览器安全策略会限制本地 file 协议页面功能，操作仅用于学习参考，正式项目部署请使用正规 web 服务器，本文不保证所有特殊页面都可以本地正常运行。