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

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

是否存在一种文件格式可以将所有 HTML 内容集成到一个文件中?

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

使用 HTML 而不是 pdf/doc/docx/odt 的最重要动机是 HTML不是专为打印而设计,而 pdf/doc/docx/odt 都是(因此未针对屏幕阅读进行优化)。此外,HTML 是一种完全被接受的开放标准,而上述格式则并非如此(odt 是开放的,但并未被广泛接受)。

答案1

将所有内容嵌入到普通 HTML 文件中是可行的方法。你见过维基百科?我想我见过有人称它为“单页应用程序”——所有内容都嵌入在一个 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>");
}

您可能还希望阅读维基百科文章数据 URI,其中有关于浏览器支持的评论和一些使用示例。

答案2

我觉得MHTML 格式(MIME HTML)(.MHT 文件扩展名)可能就是您想要的。这会将所有内容嵌入单个文件中(非常像 HTML 电子邮件)。图像等使用 base64 编码嵌入。

浏览器支持情况良好。IE 和 Opera 可以保存和查看 MHT 文件。在 IE 中,您只需“另存为...”并选择“Web 存档,单个文件 (*mht)”。但是,Firefox 和 Chrome 需要浏览器扩展。

就我个人而言,我可能会将 HTML 内容上传到网站(可能有密码保护),然后分发链接。MHT 文件并非完全可由用户编辑,因此在分发时需要重新生成。一旦所有内容合并到 MHT 文件中,它是否仍像 HTML 一样易于访问?

PDF 相当容易访问。它有自己的屏幕阅读功能。但不确定它如何处理图像 - 除非您使用特定工具创建它?

相关内容