双击一个后缀为 .html 的网页文件，系统大概率会弹出浏览器窗口——但有时候它只会把文件内容当纯文本显示出来，打开满屏的网页尖括号和标签，像是打开把一封信的信封撕了直接读邮戳。这个差别取决于你电脑里默认打开方式设置成了什么。网页Windows 上常见的打开情况是，.html 被关联到了记事本，网页因为系统第一次遇到这种文件时没找到更合适的打开程序。右键选择“打开方式”，网页手动指定 Chrome、打开Edge 或 Firefox，网页勾选“始终使用此应用”，打开以后双击就能正常渲染了。网页

浏览器打开网页本质上是打开在做两件事：下载和绘制。你在地址栏输入一个网址，网页浏览器向服务器请求那个 HTML 文件，服务器把文本传回来，浏览器从上到下读取标签，边读边把元素画到屏幕上。本地文件也一样，只不过“服务器”变成了你的硬盘。地址栏里显示的是 file:///C:/Users/你的用户名/Desktop/test.html 这种格式，开头的 file:// 说明这是本地协议，不是 http。很多人看到这个前缀会愣一下，其实它就是个路径标识，没什么神秘的。

用手机打开 HTML 文件是另一回事。iOS 的 Safari 不能直接访问文件系统，你得把文件放到“文件”App 里，点开后有时会跳转到代码编辑器。安卓稍微宽松些，用 Chrome 输入 content:// 路径或者装个文件管理器，选择用浏览器打开。体验不算流畅，因为手机系统对本地 HTML 的支持一直半吊子。我试过在 iPhone 上打开一个带 JavaScript 交互的本地页面，按钮点了没反应——Safari 对 file:// 协议下的脚本执行有限制。这个坑踩过一次就记住了。

写代码的人常遇到一种情况：改完 HTML 保存，切回浏览器按 F5，页面没变化。不是文件没保存，是浏览器缓存了旧版本。Ctrl+F5 强制刷新能解决大部分问题。还有时候 CSS 或图片加载不出来，打开开发者工具（F12）看 Console 面板，路径写错了会直接报 404。相对路径和绝对路径搞混是新手高频错误，./images/pic.jpg 和 /images/pic.jpg 在本地文件里指向的位置完全不同。

如果你拿到的是一个压缩包，里面有一堆 HTML、CSS、JS 文件，别单独把 HTML 拖出来打开。它依赖同目录下的样式表和脚本，脱离了原来的文件夹结构，页面会变得光秃秃的。正确做法是解压后保持目录完整，找到入口文件（通常是 index.html）再双击。有些网站项目还需要本地服务器才能跑，比如用了 fetch 加载 JSON 数据的情况，file:// 协议下跨域请求会被浏览器拦截。这时候装个 VS Code 的 Live Server 插件，右键“Open with Live Server”，它会起一个本地端口，问题就没了。

浏览器地址栏输入 view-source: 加上网址，能直接看网页的 HTML 源码。这个技巧在学别人页面结构时挺有用，但看 minify 过的代码就是另一回事了——所有换行和空格被压掉，变量名变成 a、b、c，读起来像破译电报。我一般会配合格式化工具还原一下再研究。

说到底，打开 HTML 文件的门槛很低，但“打开”之后能不能看到预期效果，取决于路径、依赖、协议、缓存这一连串细节。每次遇到白屏或者乱码，按 F12 看一眼报错信息，比反复双击文件有用得多。

(责任编辑：百科)