标记语言和富文本
本篇内容除了介绍标记语言和富文本，也会介绍超链接的概念，他们是网页的基础。
从纯文本到富文本
我们在之前介绍过“纯文本（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?
像上面，我们的文本拥有了复杂的格式。这样的文本叫做富文本。富文本不仅包括粗体、斜体等，也可以包括颜色、字号等。而如同表格、列表这样的信息，也属于富文本。
要记录（标记）这些格式信息，我们就需要一种标记语言了。但是这种标记，最好又能通过纯文本字符来实现，以方便我们直接使用纯文本编辑器编辑和查看。比如，我们可以规定一种语法，需要加粗显示的文本用圆括号括起来，需要斜体强调的文本用方括号括起来等等。那么上边的文本就会以下面这样的字符被记录。
(小熊猫)并不是幼年的大熊猫。
Have you watched [Modern Times] by Charlie Chaplin?
如上，我们就用“格式标签”完成了对文本的标记。当我们按我们制定好的规则去解读上边这段文本，就能还原我们记录的格式信息了。
而我们标记文本所使用的语法中遇到的字符或者语法，如果在普通文本中使用到了，为了避免歧义，就需要对齐进行转义。转义的英文叫做“escape”，意为“逃脱；避开”，是不是很形象？所以，我们还需要规定一种用来转义字符的语法。比如，我们可以规定“反斜线 \（back slash）”之后的符号不参与到标记语法中。
We need to avoid using \(or escape\) those
characters we used to mark up our text in
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> | 你好 |
事实上，实际情况中我们更应该使用
<strong>来标记要着重显示的文本，用<em>来标记需要强调（emphasis）的文本。使用<b>标记仅为加粗（bold）显示，而<i>表示以斜体（italic）来显示。<b>和<i>表示的是“样式（style）”，而<strong>和<em>表示的是一种语义，即该段标记的内容该以何种形式被理解。当然，常见的情况是用增加字重（加粗显示）来表示<strong>语义，用斜体来表示<em>语义。不过，对于不能看到文本的用户来说，增加字重是没有意义的；而在移动设备上，由于屏幕分辨率较低，增加字体的字重往往会使得字体之间的笔画难以分辨。
我们通常说的网页（之后会在“网络”中介绍），就是一个 HTML 文档。当然，网页常常还包含样式信息。而浏览器的作用之一，就是根据 HTML 的标记（以及对应的样式信息），将网页展示在用户使用的设备（计算机）的屏幕上。
我们也能通过路径在 HTML 中引用外部的图片，或者链接到其他的 HTML 文件（网页）。引用时，一般会使用相对路径，这样，当网页及其相关文件整体发生移动（相对位置不变）时，链接关系不会受到影响。
我们将这种联系到其他文件或网页的链接称作“超链接（Hyper Link）”，也简称作“链接（Link）”。链接一般会以不同于一般文本的颜色（有时是下划线，或者两者都有）展现出来，比如 这段文本 就是一个链接。通过链接，用户可以方便的在内容之间跳转。
事实上，通过设置在 HTML 文档中设置若干标记（锚点），我们也可以实现在同一个文本的内部跳转。
当用户浏览网页时，将鼠标指针悬浮在链接上，一般就可以看到链接指向的地址（在移动端，用户可以尝试长按链接触发这个操作）；点击链接就可以跳转到对应的地址。比如，下面这个链接指向微软的搜索引擎—— 必应 Bing。
上面链接显示出来的文本“必应 Bing”叫做链接文本，点击链接后的跳转到的地址“https://bing.com”称为链接地址。
上面的链接地址中的
https://称为协议头，表示了协议头后面地址所对应的内容的传输方式——“HTTPS“。HTTP（超文本传输协议，Hyper Text Transfer Protocol）就是一种传递超文本的协议，我们平时访问网页使用的一般就是这种协议。而 HTTPS 是一种更安全的协议，HTTPS 下建立的连接能够在一定程度上保证用户访问的是真实而不是仿造的网站。“
bing.com”称为域名（domain）。域名代表了一个网站，是一个网站实际地址的代称，我们需要通过“域名解析”获取到网页提供方在互联网上实际的地址。域名中的“com”段称为顶级域名，“com”表明这是一个商业网站。每个国家有其相应的顶级域名，中国的顶级域名为“cn”。网站下一般有若干网页和内容。如果我们要指定某一个网站下某个具体的内容，可以将内容的路径表示出来，比如：“
http://www.gov.cn/xinwen/2021-07/09/content_5623856.htm”。这就像我们之前介绍的在本地索引文件那样，相对路径和绝对路径的概念也是相通的。用户通过在浏览器中输入这段文本，就可以直接访问到对应的页面或内容。这种唯一确定了内容的文本称作“URL（统一资源定位器）”；更确切的说，在 HTTP 语境下，我们将 URL 称之为“链接”“网址”。也就是说，URL 的概念同样可以存在于本地计算机或者其他任何地方。在链接后添加加
#和一个标签名，可以跳转到一个页面内部对应的标记点处。URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（并在以后处理它）。
我们会在下一节继续介绍网址、域名、域名解析等概念。
参考资料：What is a URL? - Learn web development - MDN (mozilla.org)
网页在本地也是可以使用的。由于 HTML 文档本身只记录链接，所以，如果用户想要将一个包含图像以及其他网页的内容发送给其他用户，则可能需要将内容一并打包。用户也可以将网页发布在网上（也就是将信息从本地计算机迁移到互联网上），这样，其他用户只需要具有网络连接，并且拥有定位到该内容的链接，就可以访问对应的内容。
考虑到网页可能被印刷在纸张上（点击印刷在在纸张上的文字肯定不会出现跳转），或者复制粘贴时文本格式的丢失，有些时候，链接文本即为链接的地址。比如：bing.com。或者，我们也可以同时给出文本和链接，并将超链接设置在文本或链接上。但事实上，使用屏幕阅读器（Screen Reader）的读者通常是遍历页面上的每个超链接；此外，用户速览页面时，也会被特殊显示出的超链接而吸引。因此，链接文本应当恰当地说明链接的目的。
由于编写 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\) |
CommonMark 是一个对 Markdown 的规范化的语法标准，“Common”表示其兼顾了广泛的 Markdown 使用习惯，读者可以访问 commonmark.org 查看 Markdown 的介绍以及其“60 秒快速入门教程”。
关于 Markdown 语法的教程，读者可以访问下面的网页：
- Markdown 的基本语法及注意事项：markdownguide.org/basic-syntax
- Markdown 语法速查表：markdownguide.org/cheat-sheet
- Markdown 语法教程：markdown.com.cn
- Makrdown Guide 中文站：markdown.xyz
Markdown 文档的文件后缀名一般为 .md 或 .markdown。
本教程还会在之后继续介绍 Markdown。
富文本编辑器
Windows 系统曾经附带有“写字板”应用，其支持对内容的排版。
另外，针对 Markdown 语言，有一款好用的应用 Typora。
我们会在后边介绍如何从互联网获取应用程序，以及如何在计算机上安装软件。
在富文本编辑器中，我们可以轻松的使用组合键或者鼠标的点击轻松地为内容应用样式。
比如，选中一段文本，按下 Ctrl + B（Bold），即能完成对语言的标记。而在“所见即所得”的编辑器中，按下上述按键的时候，用户看到的，就是文本变成了粗体。
所见即所得：What You See Is What You Get。维基百科：WYSISWYG
图床
前面我们说到，HTML 文档中不能嵌入图片。那么为了其他用户能够方便的查看我们的图片，我们除了将文件一并打包，或者将文档转换为支持嵌入文件的其他格式，也可以将图片上传到一个许多用户都能访问的地方。
普通用户一般没有时间和精力搭建自己的服务器，但是我们可以使用一类叫做“图床”的网站。用户可以将图片上传到图床，这会获得到一个指向这个图像的链接。用户可以使用这个链接代替自己本地的图片路径，就能方便的与其他用户分享自己编写的网页或文档（只分享文档而不用分享图片）。
标记语言有什么用
显而易见，标记语言使得我们可以在任何可以键入文本的地方表示富文本，这使得计算机的使用者可以方便的用富文本进行交流——很多网站支持用户使用标记语言进行沟通（当然，也有的网站会直接提供富文本编辑器）。
同时，用户可以使用标记语言方便的在计算机中录入文档，而不一定需要专用的编辑器。熟练使用标记语言的用户，可能能够对内容和样式进行更精细的调整。此外，有诸多现成的工具能够根据我们的标记语言生成美观的文档或者网页，同时允许用户应用任意喜欢的样式。
参考链接：