单个 HTML+CSS+JS+图像文件

Question

是否有一种文件格式可以将所有 HTML 内容本身集成到一个文件中？

我想使用 HTML5 文档来创作我的内容，而不是 doc、docx、odt 或 pdf。但是当我想通过电子邮件发送 HTML 文件时，就会出现问题；我必须将其压缩，然后将其附加到电子邮件中。当然，有 .lit 和 .chm，但出于明显的原因，这不是可行的方法。此外，可以在 HTML 文件中内联 javascript 和 CSS 代码。这也有缺点：图像仍然被排除在外，将所有外部 CSS 和 Javascript 文件嵌入到一个 HTML 文件中很麻烦。工具可以自动执行此操作，但是图像问题仍然存在。

在 pdf/doc/docx/odt 上使用 HTML 的最重要动机是 HTML不是为打印而设计的，而 pdf/doc/docx/odt 都是（因此没有针对屏幕阅读进行优化）。此外，HTML 是一个完全接受和开放的标准，不能说命名格式（odt 是开放的但没有被广泛接受）。

Answer 1

将所有内容嵌入普通 HTML 文件是一种可行的方法。你见过TiddlyWiki吗？我想我已经看到它被称为“单页应用程序” - 一切都嵌入在一个 HTML 文件中，因此它的功能（几乎）是一个独立的软件。我不使用它，但我认为它在技术上非常令人印象深刻。

可以使用数据 URI 以 base64 编码方式内联包含图像。但是 Internet Explorer 8 中的支持并不完整（有大小限制 IIRC），并且在旧版本的 IE 上完全没有支持。大多数其他现代浏览器都有很好的支持。

请注意，这通常会将图像的大小增加大约三分之一（因为每字节每 8 位中您只“使用”6 位，因此必须多使用三分之一的字节来容纳该间隙）。

例如，你会得到这样的东西：

<img src="data:image/png;base64,<BASE64 STRING>" />

或这个：

.someClass
{
    background-image:url(data:image/png;base64,<BASE64 STRING>");
}

您可能还希望阅读 Wikipedia 上关于Data URIs 的文章，它有关于浏览器支持的评论和一些使用示例。