双击html文件会因file://协议触发浏览器安全限制导致资源加载失败；应使用本地服务器如npx http-server或live server插件，通过http://localhost访问以避免cors问题。
直接双击打开 HTML 文件就能看效果，但浏览器地址栏显示 file:// 时可能出问题
本地双击 index.html 确实最简单，Windows/Mac 都支持。但很多新手遇到图片不显示、fetch 失败、Vue/React 模块报错，原因就是浏览器出于安全限制，禁止从 file:// 协议加载本地资源或执行跨源请求。
实操建议：
- 开发阶段别依赖双击——哪怕只是改个按钮颜色，也建议起一个最小本地服务
- 用命令行快速起服务：
npx http-server（需先装 Node.js），在文件所在目录运行后访问http://localhost:8080 - VS Code 用户可装插件
Live Server，右键 HTML 文件点 “Open with Live Server”，自动启动服务并监听文件变化 - 如果必须双击（比如交作业只给单个 HTML 文件），就别用
fetch('./data.json')或import，所有逻辑得内联写进<script></script>，资源用 base64 或内联 data URL
Chrome 打开 HTML 时提示 “已阻止跨源请求”，其实是 file:// 协议惹的祸
错误信息典型长这样：Access to script at 'file:///xxx.js' from origin 'null' has been blocked by CORS policy. 这不是你代码写错了，是浏览器根本不允许 file:// 下的页面加载其他本地文件。
关键区别：
立即学习“前端免费学习笔记（深入）”；
-
http://localhost:8080/index.html→ 同源，JS 可自由加载同目录下的script.js、data.json -
file:///Users/me/project/index.html→ 源为null，所有相对路径请求都被视为跨源，直接拦截 - Firefox 更激进，连
XMLHttpRequest读本地文件都禁，Chrome 至少还让fetch读同目录 JS/CSS（但 JSON 不行）
用 python -m http.server 或 npx serve 起服务，端口和路径要注意
这两个命令本质一样，都是起个静态文件服务器，但默认行为有差异，容易踩坑：
-
python3 -m http.server 8000：默认以当前目录为根，http://localhost:8000/对应的就是你运行命令的那个文件夹 -
npx serve：默认也以当前目录为根，但会自动打开浏览器，并把控制台日志输出更友好 - 如果你的 HTML 里写了
<img src="images/logo.png" alt="html代码怎么运行_浏览器查看网页效果实操【方法】" >，那images/文件夹必须跟 HTML 在同一级，不能藏在子目录里再靠路径跳出来 - 别用
python -m SimpleHTTPServer（Python 2），它不支持 HTTP/1.1 的部分头字段，某些现代前端工具链会报连接异常
HTML 里引用 CSS/JS 路径写错，浏览器控制台报 404 但页面看似正常
常见现象：文字颜色没变、按钮没交互，但控制台安静得诡异。其实是因为 <link rel="stylesheet" href="css/style.css"> 中的 css/ 文件夹不存在，或大小写不符（macOS/Linux 区分大小写，Windows 不区分）。
排查要点：
- 在浏览器开发者工具的 Network 标签页里，找状态码为
404的请求，点开看 “Initiator” 列，直接定位到哪行 HTML 引用了坏路径 - 路径一律用相对路径，避免
href="/css/style.css"—— 开头的/表示网站根目录，本地服务下往往对应不到你预期的位置 - VS Code 里按住 Ctrl（Win）或 Cmd（Mac）点击路径，能直接跳转文件；点不开 = 路径错
- 如果用了构建工具（如 Vite），它默认把
public/下文件映射到根路径，但src/下的资源必须走 import 或new URL('./xxx', import.meta.url)
真实项目里，90% 的“页面没反应”不是逻辑 bug，是路径断了、服务没起、或者死守着双击打开。把 file:// 换成 http://，再盯一眼 Network 面板里的 404，基本就定位完了。
