应使用本地服务器（如python的http.server）而非双击打开index.html，因浏览器禁止file://协议下的跨文件读取；分享项目时推荐zip压缩包（确保路径小写、无中文空格、utf-8编码）或内联资源成单html文件。
怎么用浏览器直接打开本地 index.html 而不报错
很多同学双击打开 index.html，页面空白或控制台报 Access to script at 'file:///...' from origin 'null' has been blocked —— 这不是代码写错了，是浏览器禁止了 file:// 协议下的跨文件读取（比如 fetch('./data.json')、import 模块、甚至某些 CSS @import）。
解决办法很简单：别双击，改用本地服务。最轻量的是 Python 自带的 http.server：
python3 -m http.server 8000
然后访问 http://localhost:8000。注意路径要进到含 index.html 的文件夹里再执行命令；Python 2 用户用 python -m SimpleHTTPServer 8000。
- Node.js 用户可装
serve：npm install -g serve→serve -s . - VS Code 安装插件「Live Server」点一下就起服务，适合快速验证
- 千万别用压缩包解压后双击打开——只要用了相对路径引用资源，八成挂
怎么把整个 HTML 项目打包成一个可发给别人的文件
单个 .html 文件能发，但带 css、js、图片的项目不行——别人没你的文件夹结构，链接全 404。真正能“发给别人就跑”的方案只有两个：
立即学习“前端免费学习笔记（深入）”；
-
内联所有资源：把
<link rel="stylesheet">的 CSS 内容贴进<style></style>，把外部<script src></script>的 JS 内容贴进<script></script>，图片转成 base64 放src里（小图可用，大图会拖慢加载） -
打包成 ZIP 压缩包：确保根目录有
index.html，所有路径用相对路径（如./css/main.css），然后选中整个文件夹右键「发送到 → 压缩文件夹」（Windows）或归档实用工具（macOS）
别用「网页另存为」——它只保存当前页 HTML + 一部分资源，且路径常被改成绝对路径，发出去大概率打不开。
为什么 ZIP 发过去别人打不开？常见路径和编码坑
收到 ZIP 解压后双击 index.html 打不开，90% 是这两个问题：
-
路径大小写敏感：你写
<img src="./IMG/logo.png" alt="html怎么压缩发给别人_html文件夹怎么打包【分享】" >，但文件夹名是img，Mac/Linux 下直接 404（Windows 不敏感，所以你自己测得通） -
文件名含中文或空格：比如
我的图片.jpg→ 浏览器 URL 编码后可能错乱，建议统一用英文下划线，如my_logo.jpg -
HTML 文件本身编码不对：用记事本保存过？它默认 ANSI 编码，中文会变乱码。务必用 VS Code / Sublime 等编辑器，保存时选
UTF-8（无 BOM）
检查方法：解压后，在终端进到该文件夹，运行 python3 -m http.server，再访问 localhost:8000 —— 如果能跑，说明是双击 file:// 协议的问题；如果还不能，就是路径或编码问题。
要不要用 Webpack/Vite 打包？普通分享场景没必要
如果你只是做个产品介绍页、简历页、活动单页，发给客户或同事看，webpack 或 vite build 是过度设计。它们生成的 dist/ 目录本质还是一个 HTML + 一堆 JS/CSS 文件，和你自己整理好的文件夹没区别，反而多一层配置出错风险。
- 真需要一键合并？试试在线工具：
https://htmlembed.com（粘贴 HTML，自动内联 CSS/JS，小图转 base64） - 想加点保护？可以删掉注释、压缩空格（用
html-minifier-terserCLI），但对普通分享意义不大 - 唯一值得上构建工具的场景：你用了 React/Vue 组件、ES6+ 语法、Sass —— 那就得编译，否则浏览器不认识
复杂点在于：很多人混淆了「开发时用什么」和「发给别人时要什么」。前者可以很重，后者越简单越可靠——一个 ZIP 包，里面三个文件：index.html、style.css、script.js，路径全用 ./ 开头，基本不会翻车。
