如何把多个文件合并成一个 HTML 文件

Q: 为什么网页的图片或样式显示不出来？

常见的单文件 HTML 托管只上传一个 .html 文件。如果页面里通过相对路径引用了 images/logo.png、style.css 或 app.js，这些独立文件并没有被上传，浏览器打开链接时找不到它们，页面就会显示不全或功能异常。

Q: 如何把 HTML、CSS、JS 和图片合并成一个文件？

把 index.html、style.css、script.js 和图片放进同一个文件夹，然后用 AI 工具（如豆包、DeepSeek、智谱、Kimi、WorkBuddy、千问）生成一个自包含的 HTML：CSS 和 JS 内联到 / ，图片转成 Base64 Data URL。

Q: 用一个 AI 工具帮我合并，具体怎么操作？

把文件夹里的所有文件打成一个压缩包或直接拖给 AI 工具，并提示：将 index.html、style.css、script.js 和 images 目录合并成一个单一自包含 HTML 文件，CSS、JS 内联，图片转 Base64。生成后下载成 .html 再上传到 SharingHTML。

Q: 合并后还需要检查什么？

先用浏览器打开合并后的 .html，确认图片、样式和交互都正常；打开开发者工具（F12）看 Console 与 Network 是否有 404。确认没问题后再上传，上传后点预览链接再确认一次。

上传到 SharingHTML 的 HTML 文件是单个文件。如果页面里用相对路径引用了独立的图片、CSS 或 JS（例如 images/logo.png、style.css、app.js），这些文件并没有跟着上传，浏览器打开链接时会找不到它们，页面就可能显示不全或功能异常。

解决办法很简单：把多个文件合并成一个自包含的 HTML 文件，让图片、样式和脚本全部内嵌到同一个 .html 里，再上传一次即可。

合并前的文件结构

常见的多文件页面长这样：

website/
├── index.html
├── style.css
├── script.js
└── images/
    ├── logo.png
    └── hero.jpg

如果只上传 index.html，浏览器会尝试加载：

images/logo.png
style.css
script.js

但它们并不在线上，所以页面会“缺图、缺样式、缺交互”。

方法一：用 AI 工具合并（推荐）

把 HTML、CSS、JS 和图片放进同一个文件夹，然后用 AI 工具让它生成一个自包含的 HTML。

中文用户可以使用：

豆包
DeepSeek
智谱
Kimi（kimi3）
WorkBuddy
千问

英文/国际用户可以使用：

Claude Code
ChatGPT

示例提示词（中文）

把文件夹里的 index.html、style.css、script.js 和 images 目录合并成一个单一自包含的 HTML 文件。要求：

CSS 全部内联到 <style> 标签；

JavaScript 全部内联到 <script> 标签；

图片转成 Base64 Data URL 嵌入；

保持原有页面效果不变。

最后只输出一个完整的 .html 文件。

Example prompt (English)

Merge index.html, style.css, script.js and the images/ directory into a single self-contained HTML file:

inline all CSS into a <style> tag;

inline all JavaScript into a <script> tag;

embed images as Base64 data URIs;

keep the original look and behavior.

Output only one complete .html file.

如果 AI 工具支持读取本地文件夹，直接把文件夹交给它；否则把文件夹压缩成 zip 后上传给工具。生成完成后，下载成 .html 文件。

方法二：手动合并

如果你不想用 AI 工具，也可以自己操作：

内联 CSS：把 style.css 的内容复制到 <head> 里的 <style> 标签中。
内联 JS：把 script.js 的内容复制到页面底部的 <script> 标签中。
内嵌图片：把图片转成 Base64 Data URL，例如：
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAA...">
```
命令行可用：
```
base64 -i logo.png
```
然后把输出拼到 data:image/png;base64, 后面。

合并后自检

合并完成后，先本地验证再上传：

用浏览器打开合并后的 .html。
确认图片、样式、交互都正常。
按 F12 打开开发者工具，检查 Console 和 Network 有没有 404。
确认没问题后，上传到 SharingHTML。
上传成功后点「预览」再确认一次线上效果。

常见问题

为什么网页的图片或样式显示不出来？

单文件 HTML 托管只上传一个 .html 文件。页面通过相对路径引用的 images/logo.png、style.css、app.js 等独立文件没有被上传，浏览器打开时找不到，页面就会显示不全。

如何把 HTML、CSS、JS 和图片合并成一个文件？

把 index.html、style.css、script.js 和图片放进同一个文件夹，然后用 AI 工具（如豆包、DeepSeek、智谱、Kimi、WorkBuddy、千问）生成自包含 HTML：CSS 和 JS 内联，图片转 Base64。

用一个 AI 工具帮我合并，具体怎么操作？

把文件夹里的所有文件打包或直接拖给 AI 工具，并用上面的示例提示词。生成后下载成 .html 再上传即可。

合并后还需要检查什么？

先用浏览器打开合并后的 .html，确认图片、样式和交互正常；打开开发者工具检查有没有 404；确认后再上传，并在预览链接里再确认一次。

结论

如果你遇到“上传后页面缺图、缺样式、缺交互”的问题，核心原因是页面引用了没有随文件上传的本地资源。

把 HTML 和所有资源合并成单个自包含 HTML 文件，是单文件托管下最简单、最可靠的使用方式。合并后上传一次，链接就能完整显示。