适合的才是最好的。

📋 目录

# 前言

科技爱好者周刊 第 90 期(opens new window) 提到：

机器解析 PDF 文件，就是一场噩梦。文本块不是按顺序的，可以以任意顺序出现在文档中，句子和单词都可能在中间被打断。

-- 《英国政府要求以 HTML 发布文档，而不是 PDF》(opens new window)

看到这个问题，我立马想到了躺在我的博客选题库中很久的一个题目 ——《PDF vs HTML，谁是最好的格式？》。更准确地说，对于人类和机器来说，以阅读或信息提取为目的，最好的格式是 PDF 还是 HTML？因此，DOCX 与 Markdown 这类主要用来编辑的格式，自然就不在我们讨论的范围之中。

然而，科技爱好者周刊中提供的链接并不是关于英国政府要求使用 HTML 的报道，而是 Hacker News 上的 一个讨论(opens new window) ，简单总结一下他们讨论的要点：

  1. PDF 文件对于机器解析非常困难
  2. 生成的 PDF 最为专业，但大部分人不会使用
  3. PDF 是电子屏幕上的「纸张」，最高目标是用于打印

接下来我去 Google 了一下，发现 英国政府网站(opens new window) 果然要求以 HTML 发布文档，而不是 PDF —— 英国政府数字服务的博客专门撰文进行了 详细的说明(opens new window) ：英国政府网站是为了让政府服务和信息尽可能容易地获取和使用，HTML 比 PDF 更适合做到这一点。

# PDF

PDF(opens new window) （Portable Document Format，便携式文档格式），是一种用独立于应用程序、硬件、操作系统的方式呈现文档的文件格式，在过去 10 年左右的时间里越来越成为一种通用的文件格式。对于使用过 PDF 的用户来说，对 PDF 最为深刻的印象就是其外观稳定、内容难以更改，我们称之为保真性。PDF 的保真性是它的一大优势，但在有的情况下又是一种劣势，因为很多人老是想去编辑 PDF，很明显这违背了 PDF 文件格式的目标。

# PDF 的保真性是绝对的吗？

答案是否定的。

PDF 并不像 JPG 或 PNG 这类图片格式，能够完全做到不依赖设备、操作系统、软件的保真性，最为明显的是它可能有依赖的字体。除此之外，也会存在文件语法不规范、资源文件缺失等情况，从而影响 PDF 的保真性。

一直以来，我都觉得中国知网下载的很多 PDF 论文格式非常糟糕，简直不堪卒读。在阅读了 PlatyHsu 的 文章(opens new window) 之后，我才意识到这是字体的原因：在 PDF Expert(opens new window) 中打开中国知网下载的 PDF 论文，所有的中文都变成了黑体，而不是应有的宋体，而用 Adobe Acrobat Reader(opens new window) 打开同一篇论文，字体则变为了应有的宋体[1]。不得不说，Adobe 果然是 PDF 的亲爸爸啊！

PDF Expert 打开 CNKI 下载的论文《生态经济学集成框架的理论与实践 (I)：集成思想的领悟之道》截图

Adobe Acrobat Reader 打开 CNKI 下载的论文《生态经济学集成框架的理论与实践 (I)：集成思想的领悟之道》截图

那么这是为什么呢？点击 Adobe Acrobat Reader 中的 文件 -> 属性，找到文档属性下的「字体」选项卡，发现与其他字体相比，最后一种字体 —— 宋体，并没有嵌入 PDF 中。Adobe Acrobat Reader 非常聪明地使用了 AdobeSongStd-Light 这种近似的字体代替了宋体，而 PDF Expert 则没有这么机智，直接简单粗暴地使用了黑体，因此看上去才会那么难受，由此造成同一个 PDF 文件在两个阅读器中呈现出不同的字体样式。

尽管 PDF Expert 使用了黑体代替没有嵌入 PDF 的宋体，但好在内容还能正常显示，总体上不影响阅读。而将上面这篇 PDF 论文嵌入 Notion(opens new window) 中，由于中文字体宋体的缺失，甚至连中文都无法显示，只留下英文字母，和一些星罗棋布的数字与标点符号了。

将 CNKI 下载的论文《生态经济学集成框架的理论与实践 (I)：集成思想的领悟之道》嵌入 Notion 中的效果

因此，我们可以认为，中国知网的 PDF 格式看上去如此糟糕，很大程度上是由于指定的字体没有嵌入其中，影响了 PDF 文档的保真性[2]。

不过，我们也不必过于担心 PDF 文件的字体问题，在大多数情况下，PDF 的字体保真性都是可靠的。例如下图，这是一个由 生成的「最为专业」的 PDF，其中.tex 源文件中设置字体的部分代码如下：

...
\setCJKmainfont[BoldFont=SimHei, ItalicFont=KaiTi]{SimSun}  % 全局中文使用宋体，粗体为黑体，斜体为楷体
\setCJKsansfont[BoldFont=STHeiti]{STXihei}  % 非衬线字体为华文细黑，粗体为黑体
\setCJKmonofont{STZhongsong}  % 等宽字体为华文中宋
\usepackage{fontspec}  % 调用系统字体，需要系统中已安装下列字体
\newcommand{\utopia}{\fontspec{UtopiaStd-Regular}}  % 单独设置一部分西文字体为 UtopiaStd-Regular
\newcommand{\palatino}{\fontspec{Palatino}}  % 单独设置一部分西文字体为 Palatino
\newcommand{\optima}{\fontspec{Optima}}  % 单独设置一部分西文字体为 Optima
...
1
2
3
4
5
6
7
8
9
10

从 Adobe Acrobat Reader 中可以看到，SimSun（宋体）、SimHei（黑体）、Optima-Regular 等字体都嵌入了 PDF 中，因此，这个 PDF 无论是在 PDF Expert 还是 Adobe Acrobat Reader 中打开，抑或是嵌入 Notion 中，显示效果都是一致的，保真性没有任何问题。

# PDF 是完美的吗？

尽管 PDF 的保真性不是绝对的，但还是瑕不掩瑜，不可否认 PDF 是一种非常出色的文件格式。但是，PDF 很出色，却并不完美。

# 1. PDF 难以复用

你应该有所经历，复制 PDF 中的内容是一门「玄学」—— 不是空格满行，就是文字乱码，甚至会「指鹿为马[3]」，尤其是当 PDF 具有多列，结构不正确或使用不兼容的字体时，比如中国知网低质量的 PDF 论文，几乎都会出现这些问题。

由于 PDF 难以复用的特性，另一种需求应运而生 —— PDF 转 Word。大部分同学可能没有想过：为什么要转换成 Word，转换成 HTML、TXT、Markdown 不行吗？当然是可以的！甚至要优于 Word，只不过由于 Microsoft Word 在文字处理领域的统治性地位，大众习惯性地想要得到 Word 文件，各种服务提供商也顺应市场需求，纷纷推出 PDF 转 Word(opens new window) 的服务。

事实上，无论将 PDF 转换成什么类型的格式，我们的目的都是想要复用 PDF 中的内容，包括复制、翻译、修改等。然而，这又出现了另外一个问题：扫描版 PDF 即便转换为 Word，得到的还是图片，依然无法复用。不过，办法总是有的，OCR(opens new window) 技术可以识别图片中的文本，帮助我们实现扫描版 PDF 的复用。但是目前 OCR 难以做到 100% 的准确，加上成本相对较高，给人一种买椟还珠的感觉。

# 2. PDF 不能自适应屏幕

PDF 诞生于桌面时代，对移动设备的支持不算友好。面对手机那块手掌大小的屏幕，PDF 的布局无法自动缩放以适应屏幕大小，阅读为桌面设备准备的 PDF，实在是一件「辣眼睛」的事情。试想一下，当你出门在外，电脑不在身边，其他人给你发来一个文字密密麻麻的 PDF 文件，你是不是需要在手机上不断地缩放和滑动来进行阅读？而 EPUB(opens new window) 、HTML 这类文件格式则可以根据设备类型和浏览器大小来调整显示内容和页面元素，明显要优于 PDF。

# 3. PDF 缺失动态内容

演示文稿除了 Microsoft PowerPoint(opens new window) 之外，也可以用 PDF 来呈现，在追求逻辑清晰、简洁至上的学术界更是如此。借助 Till Tantau(opens new window) 创造的 Beamer(opens new window) ，我们可以制作出媲美 PPT[4] 的 PDF 幻灯片，但是由于缺少动态内容，无法实现绚丽的翻页或者生动的动画，也不能在其中插入音视频内容。但是 PDF 也不是不能生成动态内容，比如为了用 PDF 演示空间圆环的 生成过程(opens new window) ，需要用 TikZ 绘制 34 页的 PDF(opens new window) ，再将其转换为 GIF 动图(opens new window) ，需要颇费一番功夫。

我们都知道，PDF 可以插入文字、链接、图片，那么，PDF 可以嵌入音频、视频等动态内容吗？

答案是可以的。我们可以利用 media9(opens new window) 、animate(opens new window) 、movie15(opens new window) 这类 宏包在 PDF 中嵌入动态内容。例如，media9 支持在 PDF 中嵌入 MP3、MP4、FLV 等格式的音视频文件，以及交互式 Flash（SWF）和 3D 对象（Adobe U3D & PRC）。然而，这样生成的 PDF 只能在 Adobe Reader 中查看，并且从 Adobe Reader 11 开始，还需要单独安装插件 Adobe Flash Player[5]。在这样严苛的条件限制下，PDF 嵌入动态内容约等于无法实现。而从 PDF 的最高目标 —— 打印的电子文稿来看，动态内容与 PDF，无异于阳关道与独木桥，根本不在同一条道路上。

# 4. PDF 格式参差不齐

绝大多数情况下，PDF 文档都不是直接创建的，而是通过其他排版软件导出得到的。因此，不同种类的软件导出的 PDF 差异就会很大，例如，Microsoft Word 直接导出的 PDF 不包含文章目录、索引等数据，难以自定义 PDF 元数据，对于阅读过程中的导航很不方便。相反， 生成的 PDF 则非常接近完美，无论是超链接、目录、索引，还是 PDF 元数据，都可以高度自定义。尽管 PDF 格式参差不齐不是 PDF 自身的问题，但这种差异对于用户阅读与机器解析来说，影响却是非常明显的。

# 5. PDF 使用情况难以追踪

一般情况下，我们得到 PDF，是要分享给他人的。当我们想要得到他人与 PDF 进行交互的数据，例如，用户查看 PDF 的时间、阅读最多的部分、打开链接的次数，以更好地获得用户反馈时，PDF 并不能提供有效的帮助。尽管这可以通过 HelpRange(opens new window) 这样的工具来实现，但是奈何价格太高，不能离线使用，受众实在太小。与此对应，基于 Web 的文件则可以非常方便且免费地追踪用户的使用情况。例如，Google Analytics(opens new window) 可以免费分析 HTML 页面的访问数据，Mailbutler(opens new window) 能够方便地追踪电子邮件的打开与阅读情况，一张 1 像素的图片(opens new window) 甚至也可以被用来追踪用户访问过哪些网站。

# HTML

HTML(opens new window) （Hyper Text Markup Language，超文本标记语言），是一种用于创建网页的标准标记语言，常与 CSS、JavaScript 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取 HTML 文件，并将其渲染成可视化网页。HTML 文件的扩展名为 .html，是一种标记语言而非编程语言。对了，你正在阅读的这个页面就是一个 HTML 文件，你可以暂时停下阅读，去看看地址栏的链接，是不是以 .html 结尾的呢？

维基百科(opens new window) 提到：

在万维网及 HTML 文本尚未兴起时，PDF 在桌面出版工作流技术当中很受欢迎。

但是，现在已经 0202 年了，互联网发展方兴未艾，5G 技术突飞猛进，手机平板层出不穷，是时候该让 HTML 大放异彩了！

不知你注意到没有，最近几年在中国知网上线的论文，除了常规的「CAJ 下载」和「PDF 下载」之外，往往还会提供「HTML 阅读」的选项。

和很多英文学术数据库相比，中国知网这个 HTML 着实是一言难尽，不过总归还是聊胜于无，毕竟能看见知网的一点点改变，实在是 太不容易了(opens new window) 。

# HTML 能弥补 PDF 的不足吗？

正如 Kieran Healy 教授 所说(opens new window) ，HTML 是一种很好的通用语言，与其争论应该使用 PDF 还是 Word，不如把目光转为 HTML。事实上，前文提到 PDF 存在一些不足，主要的参照对象就是 HTML。因此，HTML 自然可以弥补前文描述的 PDF 的不足。

PDF 的不足 HTML 的处理方式 增强工具
PDF 难以复用 网页浏览器将 HTML 解析为富文本，文字完全可以复制，也可以使用文本编辑器打开 HTML 进行编辑，同时可以借助 Google Translate、Mate Translate 等插件对 HTML 页面进行翻译。 Google Translate(opens new window) 、Mate Translate(opens new window)
PDF 不能自适应屏幕 HTML 由浏览器进行解析，无论是电脑、平板，还是手机，都能实现自适应屏幕，此外，可以利用 Safari 阅读视图、简悦等工具来隐藏广告和干扰信息，优化阅读体验。 Safari 阅读视图(opens new window) 、简悦(opens new window)
PDF 缺失动态内容 HTML 非常擅长交互，对于动态内容的支持很友好，无论是视频、音频、交互式图表、在线地图，还是网页幻灯片，或者嵌入 PDF、制作动画，都毫无压力，并且实现起来很简单。比如制作网页幻灯片，就有非常多的工具，如 Reveal.js、Impress.js、WebSlides。 Reveal.js(opens new window) 、Impress.js(opens new window) 、WebSlides(opens new window)
PDF 格式参差不齐 发展到 HTML 5，HTML 已经非常完善，主流浏览器 Safari、Chrome、Firefox（快快淘汰 IE 吧！）对 HTML 的支持非常完善，几乎不会存在兼容性问题。流行的 Python 库如 Beautiful Soup、Request 等可以对 HTML 进行解析，即网络爬虫。 Beautiful Soup(opens new window) 、Request(opens new window)
PDF 使用情况难以追踪 利用 JavaScript 等编程语言，可以非常容易地对 HTML 页面的数据进行统计与分析。即使没有任何的编程基础，也可以使用不蒜子、Google Analytics、Simple Analytics 等工具分析 HTML 页面访问数据。 不蒜子(opens new window) 、Google Analytics(opens new window) 、Simple Analytics(opens new window)

# 如何创建 HTML？

上图是几段 HTML 代码，相信你看到这些内容和我一样：

这是嘛玩意儿啊，是人看的吗？

其实，也还是可以看的 😄，多看两眼就会发现是有规律的。但如果让我来徒手写这种 HTML 代码，肯定会抓狂表示拒绝。在我看来，影响 HTML 成为一种主流文档格式的主要原因，就是人们普遍认为创建 HTML 不方便或门槛太高。

# 使用 Markdown

此博客主要由许多 HTML 文件组成，当然我不是徒手撸 HTML 代码写出来的，而是利用 VuePress(opens new window) 生成的。我负责的只是写好 Markdown 文件，然后由 VuePress 将 Markdown 文件解析为结构合理、适合阅读的一系列 HTML 文件，当然还包括 CSS、JavaScript 和图片等其他附属文件。

因此，我推荐创建 HTML 的工具就是 Markdown(opens new window) —— 一种轻量级标记语言，文件扩展名为 .md，借用 Markdown 发明者 John Gruber(opens new window) 话来介绍 Markdown 与 HTML 的关系：

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

可见 Markdown 与 HTML 的关系，就像 与 BibTeX(opens new window) 一样 —— 天生是一对。如果你不熟悉 Markdown 语法，可以阅读 这篇文章(opens new window) ，包教包会，10 分钟从入门到精通 ✌️。基于 Markdown 与 HTML 的「亲密关系」，我们也可以直接在 Markdown 里写 HTML 代码，比如实现文字居中显示、段落首行缩进、字体颜色设置等 Markdown 不支持的语法。了解了 Markdown 语法后，接下来就需要一个 Markdown 编辑器，这里推荐使用免费、跨平台、支持所见即所得的 Typora(opens new window) 。

原生 Markdown 及其扩展语法支持大部分文档的常见要素：

  • 段落
  • 层级标题
  • 有序列表
  • 无序列表
  • 脚注
  • 代码
  • 引用
  • 表格
  • 图片
  • 链接
  • 数学公式

但是，Markdown 没有嵌入在线音频或视频的语法，需要借助 HTML 语法才能实现。这里以嵌入 YouTube 的视频为例进行演示，打开这个 YouTube 视频 —— iPad Pro — Your next computer is not a computer(opens new window) ，点击视频下方的 分享 -> 嵌入，复制出现的代码：

<iframe width="560" height="315" src="https://www.youtube.com/embed/09_QxCcBEyU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
1

但是这串默认的代码固定了视频的宽度和高度，在移动设备上会造成视频溢出页面的问题，为了使视频和页面等宽，我们可以进行适当的修改：

<div style="position:relative;padding-top:56.25%;">
  <iframe src="https://www.youtube.com/embed/09_QxCcBEyU" frameborder="0" allowfullscreen
    style="position:absolute;top:0;left:0;width:100%;height:100%;">
  </iframe>
</div>
1
2
3
4
5

修改之后，视频的宽度和高度设置为相对大小，其中的比例 56.25% 是根据 1080P 视频的分辨率 1920×1080 确定的。调整之后得到下面这个视频，如果下面的视频无法正常显示，你可以前往 B 站(opens new window) 观看，内容完全一样。

# Markdown 导出为 HTML

编辑完成 Markdown 文件并保存后，接下来点击 Typora 菜单栏中的 文件 -> 导出 -> HTML，即可将 Markdown 文件导出为一个单独的 HTML 文件[6]，同时包含当前设置下的主题。如果选择 HTML (Without Style)，则不会包含当前的主题，只是一个具有基本样式的 HTML，即没有将 CSS 写入其中。

Typora 会将 CSS 写入 HTML 文件中，因此只会生成一个文件，而 Ulysses(opens new window) 这样的 Markdown 编辑器，在导出为 HTML 时，会将 CSS 单独保存为一个文件，所有的内容会以一个文件夹的形式存在，而这样不太适合进行分享。如果想要将 Markdown 文件导出为一个单独的 HTML 文件（甚至包括图片、视频等内容），可以使用 Pandoc(opens new window) 的 --self-contained 参数，比如下面这个命令：

pandoc demo.md --self-contained -c style.css -o demo.html
1

使用 style.css 的样式将 demo.md 转换为 demo.html，同时将依赖的脚本、CSS、图片、视频等内容全部嵌入到 demo.html 中。

如果你习惯使用 Word，也是可以创建 HTML 的。以 Microsoft Word for macOS 为例，点击菜单栏 文件 -> 另存为，在文件格式中选择 网页 (.htm)，然后保存，就将 Word 文件导出为 HTML 了。

# 如何分享 HTML？

尽管 HTML 是一种通用的文件格式，但直接发给别人显然不是一个明智的选择。推荐的方式是将 HTML 及其附属文件上传至云服务器中，生成一个链接，这也是我认为最为高效的文件分享方式。

当然你可以购买云服务器，但如果不想付费的话，这里推荐使用 GitHub Pages(opens new window) 服务来托管你的 HTML 文件。

首先，你需要注册一个 GitHub 账号(opens new window) ，然后新建一个仓库（Repository），进入新建的仓库，点击上方的 Settings，进入设置中的 GitHub Pages 部分，在 Source 下方选择 master branch，就部署完成了 GitHub Pages。之后将 HTML 文件上传至该仓库，就可以通过链接访问了，比如 这个页面(opens new window) 就是托管在 GitHub Pages 上的 HTML 文件。

# 我应该使用哪种格式？

Elsevier 曾在 2013 年针对世界范围内的 280 多名科研人员做过一个 调查(opens new window) —— 科研人员更喜欢 PDF 还是 HTML？得到了几点主要的结论：

  • 科研人员偏好 PDF 主要是为了深入阅读，同时他们认为 HTML 更方便、更适合发现新内容及其相关链接。
  • 科研人员认为，PDF 和 HTML 在未来都将有用武之地 —— PDF 用于离线访问和存储内容，以供之后进行参考，HTML 则主要用于在线访问和即时的学习和发现。
  • 如果我们想要推广 HTML 的使用，需要解决关于作者输入、打印、存储和共享内容的问题，并使 HTML 页面布局可以自定义。

其中几位科研人员的评论非常具有代表性，摘录如下：

HTML 适合包含交互内容的文档

If the article contains interactive elements, then (the) HTML version would make more sense; otherwise (the) good old PDF will be preferable.

如果文章中包含交互元素，那么 HTML 更有意义，其他的情况下 PDF 更合适。

喜欢阅读打印版本

I prefer to work with the printed version of the article because I don’t like reading from (the) screen.

我喜欢阅读打印出来的论文，但不喜欢在电子屏幕上阅读。

喜欢通过链接分享，但 PDF 看起来更像是论文

I prefer to share the article URLs rather than sending big PDF files around. (The PDF) looks and feels more like a paper article. If I want to print it, I think it will look better printed from PDF. If I want to save or email it, it is easier with PDF.

我喜欢分享论文的链接而不是发送很大的 PDF 文件。如果我想打印的话，（PDF）看起来和感觉上更像是一篇论文。我认为通过 PDF 打印的效果会更好，如果我想保存或通过邮件发送论文，PDF 会更加简单。

在 Elsevier 此次调查的第二阶段，被调查者在观看了下面这个视频 —— The Article of the Future(opens new window) 之后，超过 65% 的科研人员认为，未来学术论文的呈现形式将会向 HTML 转变。不知你在观看了这个视频之后，是否也是这样认为的呢？

PDF 文档与 HTML 文档有一个显著的区别 —— 是否分页，一般来说，PDF 是需要分页的，HTML 则没有分页一说，显而易见，PDF 分页的目的是为了打印。谢益辉认为，使用 Markdown 还是 (opens new window) 的决定因素是文档是否需要被打印出来，而 与 Markdown 的主要输出格式正好分别对应 PDF 和 HTML。因此，从这个角度来看，如果你的文档需要打印，那么就使用 PDF，除此之外，HTML 则是非常好的选择。时间已经来到 0202 年，我们拥有电脑、手机、iPad 以及各种各样的电子设备，来呈现内容丰富的 HTML 文件，为什么一定要打印成黑白的纸质文档呢？

几十年前，文章唯一的格式是实体的纸张，15 到 20 年前变成了 PDF，如今电子设备和互联网的普及为 HTML 的广泛利用创造了条件。但这是否意味着我们必须抛弃纸张和 PDF？答案自然是否定的。我们认为，实体纸张不可或缺，PDF 也仍将是文件归档、离线使用和跨平台交换的首选格式，而内容丰富、可定制性强的 HTML 将日益成为在线使用的标准。因此，PDF 与 HTML 之间的关系，不是你死我活，而应该是互为补充、和谐共处。

但是，有一种行为必须受到谴责：在聊天软件中丢出 Word 文件 —— 给他人查看而不是填写，实在是难以原谅。为了你我的眼睛与阅读体验，还是奉劝这些朋友们善良一些吧！

  1. 据 PlatyHsu 大神所说，中国知网的 PDF 文件并非由排版软件直接导出的「一手」版本，而是从其私有的 CAJ 格式转换而来的，存在很多兼容性问题。 ↩︎

  2. 所以知网简直误终身啊 🤪 ↩︎

  3. 此处的「指鹿为马」指肉眼所见为「鹿」，复制之后再粘贴却是「马」。泛指 PDF 中「所见」非「所得」。 ↩︎

  4. 值得注意的是，PPT 是 PowerPoint 的简称。尽管 PowerPoint 是使用最为广泛的演示工具，但 PPT 不是所有演示工具的名称。 ↩︎

  5. Adobe(opens new window) 宣布 2020 年末停止对 Flash 的支持，同时，Chrome(opens new window) 也会在 2020 年底完全移除 Flash，转而使用 HTML，可见 Flash 将被时代的潮流狠狠地甩在身后，未来黯淡无光。 ↩︎

  6. 此处生成一个文件的前提是图片存储在图床，图片以链接形式插入，如果图片保存在本地，将会随 HTML 文件一起生成，当然图片也可以通过转换为 Base64(opens new window) 码的形式插入，但是不太推荐。 ↩︎