从纯文本到富文本

我们在之前介绍过“纯文本（Plain Text）”的概念。顾名思义，纯文本就是单纯的字符。不过，我们平时也可能会用“纯文本”来代指“无格式文本”。

像下面这文本，其没有提供字符本身之外的含义，就是纯文本。也就是说，我们用单纯的字符，就能记录并完整还原这段文本。

越过长城，走向世界。

Across the Great Wall we can reach every corner in the world.

但更多时候，我们要记录的文本并不只有单纯的字符上的信息。常见的，我们会希望强调一段话中的某些部分。同样，我们也可以用单纯的字符来体现这些含义：

你了解过“××大学”吗？

I will definitely NOT go there.

中文中，我们可以用引号来强调部分内容。英文中，我们可以将某个单词的字母全部大写来突出强调这个单词。从某种意义上来说，我们已经在对这段文本进行“标记”了。

不过，有时我们还希望对文本进行加粗、斜体、加上下划线等等操作，比如像下面这样。

小熊猫并不是幼年的大熊猫。

Have you watched Modern Times by Charlie Chaplin?

像上面，我们的文本拥有了复杂的格式。这样的文本叫做富文本。富文本不仅包括粗体、斜体等，也可以包括颜色、字号等。而如同表格、列表这样的信息，也属于富文本。

要记录（标记）这些格式信息，我们就需要一种标记语言了。但是这种标记，最好又能通过纯文本字符来实现，以方便我们直接使用纯文本编辑器编辑和查看。比如，我们可以规定一种语法，加粗的文本用圆括号括起来，斜体的文本用方括号括起来等等。那么上边的文本就会以下面这样的字符被记录。

  1. (小熊猫)并不是幼年的大熊猫。
  2. Have you watched [Modern Times] by Charlie Chaplin?

如上，我们就用“格式标签”完成了对文本的标记。当我们按我们制定好的规则去解读上边这段文本，就能还原我们记录的格式信息了。

而我们标记文本所使用的语法中遇到的字符或者语法，如果在普通文本中使用到了，为了避免歧义，就需要对齐进行转义。转义的英文叫做“escape”，意为“逃脱；避开”，是不是很形象？所以，我们还需要规定一种用来转义字符的语法。比如，我们可以规定“反斜线 \（back slash）”之后的符号不参与到标记语法中。

  1. We need to avoid using \(or escape\) those 
  2. characters we used to mark up our text in 
  3. normal situations.

翻译出来就是下面这样的文本：

We need to avoid using (or escape) those characters we used to mark up our text in normal situations.

当然，我们文本中也可能使用到转义符号，所以转义符号也需要被转义。比如，我们可以用反斜线之后的反斜线 \\ 来表示反斜线。

内容 = 标记 + 样式

在上面的内容中，我们介绍了标记语言。总的来说，标记语言标记出了一段文本中具有额外属性的文本。但是具体这段属性怎么展示，比如字体有多粗（字重大小）、下划线与文本的距离，文本的字体等等，并没有具体规定。

关于这些属性，我们可以在每处标记处注明。但这样很显然会有很多重复。比如，对于一段内容中若干需要强调的文本，大多数情况下只需要以一种相同的方式来展示即可。这样我们只需要统一规定标记为“加粗”格式的文本，以某字重、某颜色显示，即可达到我们想要的效果。

比如，我们看到的大多数网页，都是以 HTML（超文本标记语言）语言记录文本所带的格式（以及层次关系），辅以 CSS（层叠样式表），来展现出来的。

之所以说“层叠”，是因为层叠样式表所规定的样式是叠加的、可以继承的。比如，我们可以规定整篇文本的基准样式，再规定下面各个项的具体属性。如果有不同，只需在继承的样式中再次声明属性，覆盖掉之前的属性即可（类似于树形结构）。

我们人类记录信息也常常采用树形结构，这样能够很清楚的表明内容的层次信息（hierarchy）。你可能会了解过思维导图，其实就是一种树形结构。

常见标记语言

下面我们介绍几种常见的标记语言。

HTML

HTML，即“超文本标记语言(Hyper Text Markup Language)”。HTML 使用成对出现的，以尖括号包裹的关键词，作为标记标签。

比如，要标记一段加粗文本，语法如下：

代码 效果
<b>你好</b> 你好

我们通常说的网页（之后会在“网络”中介绍），就是一个 HTML 文档。当然，网页常常还包含样式信息。而浏览器的作用之一，就是根据 HTML 的标记（以及对应的样式信息），将网页展示在用户使用的设备（计算机）的屏幕上。

我们也能通过路径在 HTML 中引用外部的图片，或者链接到其他的 HTML 文件（网页）。引用时，一般会使用相对路径，这样，当网页及其相关文件整体发生移动（相对位置不变）时，链接关系不会受到影响。

我们将这种联系到其他文件或网页的链接称作“超链接（Hyper Link）”，也简称作“链接（Link）”。链接一般会以不同于一般文本的颜色（有时是下划线，或者两者都有）展现出来，比如 这段文本 就是一个链接。通过链接，用户可以方便的在内容之间跳转。（事实上，通过设置标记，也可以在同一个文本的内部跳转。）

网页并不一定发布在网上，本地也是可以使用的。由于 HTML 文档本身只记录链接，所以，如果用户想要将一个包含图像以及其他网页的内容发送给其他用户，则可能需要将内容一并打包。用户也可以将网页发布在网上（也就是将信息从本地计算机迁移到互联网上），这样，其他用户只需要具有网络连接，并且拥有定位到该内容的链接，就可以访问对应的内容。

当用户浏览网页时，将鼠标指针悬浮在链接上，一般就可以看到链接指向的地址（在移动端，用户可以尝试长按链接触发这个操作）；点击链接就可以跳转到对应的地址。比如，下面这个链接指向微软的搜索引擎—— 必应 Bing。

上面链接显示出来的文本“必应 Bing”叫做链接文本，点击链接后的跳转到的地址“https://bing.com”称为链接地址。

考虑到网页可能被印刷在纸张上（在纸张上点击肯定不会出现跳转），或者复制时文本格式的丢失，有些时候，链接文本即为链接的地址。比如：bing.com。

上面的链接地址中的“https://”称为协议头，表示了协议头后面地址所对应的内容的传输方式。HTTP（超文本传输协议，Hyper Text Transfer Protocol）就是一种传递超文本的协议，我们平时访问网页使用的一般就是这种协议。

“bing.com”称为域名（domain），在该例中也是网址，即该内容在互联网上的地址。域名代表了一个网站，我们需要通过“域名解析”获取到网页提供方在互联网上实际的地址。域名中的“com”段称为顶级域名，“com”表明这是一个商业网站。每个国家有其相应的顶级域名，中国的顶级域名为“cn”。

网站下一般有若干网页和内容。如果我们要访问某一个网站下某个具体的内容，一般会通过像在本地那样，将内容的路径表示出来，比如：“http://www.gov.cn/xinwen/2021-07/09/content_5623856.htm”。用户通过访问这个，可以直接跳转到对应的内容处。我们也将这种唯一确定了内容的链接称作“URL（统一资源定位器）”。

我们会在之后介绍所谓的地址、域名以及搜索引擎等概念。

参考资料：What is a URL? - Learn web development - MDN (mozilla.org)

由于 HTML 语法比较复杂，事实上，我们一般会使用专业的程序来更高效率地编写 HTML 文档。

HTML 文档的文件后缀名一般为 .html 或 .htm。

Markdown

HTML 语法比较复杂，不易编写，并且纯文本格式阅读起来不太方便，于是出现了 Markdown 这种简化的 HTML 语法。

Markdown 只选择了一部分 HTML 的功能，设计了语法，比如“标题”“引用”“代码块”“加粗”“斜体”“表格”“链接”等。因此，Markdown 这种标记语言很容易学习和掌握，适合日常一些简单的标记场景。

读者现在看到的文档就是用 Markdown 语法编写的，并使用一些工具构建为了方便阅读的网页。

Markdown 也兼容直接在其中使用的 HTML 代码。

不过，由于 Markdown 的语法过于简单，因此只能实现对格式简单的控制。比如，其不支持对表格中的单元格进行合并。这也是 Markdown 兼容在其中使用的 HTML 代码的一个原因。

Markdown 没有一个统一的规范，可以说，只规定了最基础的一些语法。于是，一些平台在 Markdown 的基础上加入了扩展，比如“数学公式”。

这些扩展后的 Markdown 语法，可以称作 Markdown 的“方言（dialect）”。这些“方言”并不一定被广泛支持。因此，某用户使用某工具编写的 Markdown 文件，可能在另一个工具中会有一些功能不能正确显示。

比如，下面这样的代码尝试使用 LaTeX 标记数学公式的语法标记一段行内公式，而这段代码可能并不能在读者的阅读器中显示：

代码 预览
$f(x) = x^2 + 2x + 1$ \(f(x) = x^2 + 2x + 1\)

关于 Markdown 语法的教程，读者可以访问下面的网页：

Markdown 文档的文件后缀名一般为 .md 或 .markdown。

reStructuredText

（待补充）

AsciiDoc

（待补充）

富文本编辑器

Windows 系统曾经附带有“写字板”应用，其支持对内容的排版。

另外，针对 Markdown 语言，有一款好用的应用 Typora。

我们会在后边介绍如何从互联网获取应用程序，以及如何在计算机上安装软件。

在富文本编辑器中，我们可以轻松的使用组合键或者鼠标的点击轻松地为内容应用样式。

比如，选中一段文本，按下 Ctrl + B（Bold），即能完成对语言的标记。而在“所见即所得”的编辑器中，按下上述按键的时候，用户看到的，就是文本变成了粗体。

所见即所得：What You See Is What You Get。维基百科：WYSISWYG

图床

前面我们说到，HTML 文档中不能嵌入图片。那么为了其他用户能够方便的查看我们的图片，我们除了将文件一并打包，或者将文档转换为支持嵌入文件的其他格式，也可以将图片上传到一个许多用户都能访问的地方。

普通用户一般没有时间和精力搭建自己的服务器，但是我们可以使用一类叫做“图床”的网站。用户可以将图片上传到图床，这会获得到一个指向这个图像的链接。用户可以使用这个链接代替自己本地的图片路径，就能方便的与其他用户分享自己编写的网页或文档（只分享文档而不用分享图片）。