4.2.2.0 从 Markdown 到 HTML
之前在导读中提到，HTML 是一个文档格式。那么，为了理解 HTML 的文档，我们先从一个完全是文档的语言开始，掌握 “文本文档格式” 的理念，看看纯文本是如何用来表示格式的。
这个语言我们选择 Markdown, 因为 Markdown 的理念有受到 HTML 的影响，并且 Markdown 格式表示的内容可以被完整地转换为 HTML，这样我们可以通过相对简单的格式学会相对复杂的格式的理念。
理解这些概念后，我们会对映地了解 HTML，看看 HTML 是如何用 XML 表示这些东西的，并且介绍一些 HTML 比 Markdown 更强大的功能。
Markdown 超级速通
TIP
这里需要大家跟着教程敲一遍。直接使用 VSCode 即可。VSCode 自带 Markdown 编辑器，同时还有预览功能。
如果已经学会 Markdown 的同学可以直接跳过。
WARNING
这个教程的节奏很快，内容也比较多。如果没有看懂，可以参考网上的其他 Markdown 教程，确保学会基础用法即可。
Markdown 是一门在程序员当中十分流行的文档语言。它非常的简洁易懂，看过就会，会了就能用，广泛用于各类文本工作。他最大的特点是纯文本形式，格式简单易懂，并且贴近自然语言，适合编写简单的文档（而不是用 Word，用 Word 是程序员最讨厌的事情之一）。
写一般文档时，Markdown 可以让你在写内容的同时完成排版，而非额外设置 “字号、加粗、列表”， 让你可以忘掉 Word 那些烦人格式以及他们导致的各种奇葩问题。
让我们从使用 VSCode 新建一个 .md 文件开始。
元素
TIP
Markdown 不是纯文本，它是一门标记语言，你所看到的文本不是最终渲染的文本，而是包括你需要显示的文本和告诉 Markdown 渲染器如何处理这些文本的标记。
如果你看到一些不符合纯文本文档的编辑直觉的渲染方式，比如我们马上就会遇到的段落与换行问题，你就要想起这一点。
用 VSCode 打开一个 .md 文件，就可以使用 VSCode 自带的 Markdown 预览功能，实时看到你用 Markdown 语言写的文本文档是怎么被解析并渲染为最终版本的文档的。
INFO
有很多软件或者平台都为 Markdown 做了拓展语法，支持 Markdown 没有规定的各种元素。我们的教程只会提到 Markdown 标准中的语法。对于一些私有的格式不会提及。
在编写过程中，为了保证阅读效果，文章通常有这类结构：
- 文章主题
- 引言、正文、结尾（各个部分）的标题
- 各个部分的内容
- 普通段落
- 图片（本文不确定是否会用）
- 列表（分为排序的和不排序的）
- 强调项
- 表格
- 引用
- 如有必要，各个部分中也可以有子部分（不断嵌套）
Markdown 将这些结构再次强调，以符号标记的方式直接让文本结构化。
这里我们要说明一下不同点：在 Word 中编辑文章，我们遇到一级二级三级标题时，要用区别的字号去选中文本，来让它们改变字号。这是一种繁琐的方式，而且是用样式而不是语义的方式， Word 软件只知道你设置了一个黑体，加粗，三号的文本，而不知道那个是标题。
而在 Markdown 中，我们会在在标题前加上 # (注意有空格)，你会发现你的标题被渲染成了大字号，并且 Markdown 可以明确地了解到这是个标题，并且按照预设的标题样式去渲染（你还可以更改这种样式）。这样有明确语义的文本，我们管他叫元素。接下来我们会逐步介绍各个元素。
而且基于这种以元素为单位的语法，Markdown 中可能会有非常多的空行来分开各个元素。所以看到段落之间的空行不要感到奇怪。
注意我接下来只讲最常用的元素，而且在多种语法中只选择。关于 Markdown 的更多语法可以在用到之后查手册。
标题
- 标题：数个本行前无任何其他字符的 "#" + 1 个 " "(space) + 标题内容。"#" 越多，字号越小，常见渲染中最小是七级标题
# 一级标题
## 二极标题
### 三级标题
## 第二个二极标题
###### 六级标题段落与换行
Markdown 中有段落这个概念，因此换行存在两种方式，一种是段落之间的换行，通过一个分隔段落的空行，分开各个段落。另一种是段落内部的换行，通过在行尾添加两个空格，Markdown 将单纯换行，但是前后仍被视为同一个段落。多个空行不会产生多次换行，因为 Markdown 是以元素为单位渲染的，而空行并不是元素。
我是第一段。
我是第二段。后面有多个空行，但是 Markdown 不会渲染这些空行，只会把这些当成段落的分隔，并正常渲染段落。
我是第三段。
我也是第三段, 而且没有换行。
我是第四段。注意这里有两个行尾空格:
我也是第四段，你会发现这个换行一般比段落之间的换行行距短。我是第一段。
我是第二段。后面有多个空行，但是 Markdown 不会渲染这些空行，只会把这些当成段落的分隔。
我是第三段。 我也是第三段，而且没有换行。
我是第四段。注意这里有两个行尾空格:
我也是第四段，你会发现这个换行一般比段落之间的换行行距短。
加粗、斜体、行内代码
加粗：使用一对
**包裹md本文有很多**加粗**本文有很多加粗
斜体：使用一对
*包裹md这是*斜体*这是斜体
行内代码：使用一对
`包裹mdJS 中不推荐使用 `var` 关键字声明变量，推荐使用 `let` 或 `const` 关键字。JS 中不推荐使用
var关键字声明变量，推荐使用let或const关键字。
引用
引用：引用的段落前添加 1 个前面无任何其他字符的 > (注意有空格)
> 这是引用
> 这是引用块的第二行，不要忘记前面的行尾空格这是引用
这是引用块的第二行，不要忘记前面的行尾空格
跨行代码块
使用单行 ``` 开始和结束，可以加上代码的语言标注。
``` js
const a = 1;
console.log('Hello, world!');
```const a = 1;
console.log('Hello, world!');列表
Markdown 示例:
1. 无序列表：对于列表中的每个元素，在前面添加`-`，接上一个空格
- 对于嵌套列表，添加空格来缩进
- 嵌套无序元素的第二个元素
2. 有序列表：对于列表中的每个元素，在前面添加类似 `1.` `2.` 的数字，接上空格。
1. 第一个
2. 第二个
3. 第三个
3. 嵌套列表，这个示例已经提及。显示效果:
- 无序列表：对于列表中的每个元素，在前面添加
-，接上一个空格- 对于嵌套列表，添加空格来缩进
- 嵌套无序元素的第二个元素
- 有序列表：对于列表中的每个元素，在前面添加类似
1.2.的数字，接上空格。- 第一个
- 第二个
- 第三个
- 嵌套列表，这个示例已经提及。
链接与图片
链接：
[]()，在方括号中填入名称，在括号中填入链接。md我们的 [wiki 首页](https://hdu-cs.wiki/)，点击链接直达。我们的 wiki 首页，点击链接直达。
无名链接：用
<>包裹一个链接:md我们 wiki 的连接是 <https://hdu-cs.wiki/>我们 wiki 的连接是 https://hdu-cs.wiki/
图片：
![]()，在方括号中填入这个图片的 alt name (如果图片显示不出来会展示的替代文字)，在括号中填入链接或者文件路径。md下面是我们 wiki 的图标  图片推荐自己一个段落，而不是写在一段里面，这样会很乱。下面是我们 wiki 的图标
图片推荐自己一个段落，而不是写在一段里面
，这样会很乱。
转义
在 Markdown 中，转义让那些有特殊渲染意义的字符被当作正常字符使用，而不是被渲染。在要转义的字符前打一个 \ 就可以防止特殊渲染，这个专门取消转义用的 \ 在网页中不显示
在文章中我们可能会需要键入 \\, \* 等在 Markdown 中拥有语义的字符，这里我们通过在字符前加入 `\` 可以进行转义。在文章中我们可能会需要键入 \, * 等在 Markdown 中拥有语义的字符，这里我们通过在字符前加入 \ 可以进行转义。
其他
- 文档规范：不要忘记标题和段落这类元素中间的分隔空行。
- 缩进：使用空格，在 VSCode 中按
Tab键会自动键入一层缩进需要的空格 - 差异：由于 Markdown 相关的软件很多，可能会有不同的渲染方式，和各自的扩展
- 其他渲染功能：包括但不限于表格、脚注、todolist 等，这些很多都是私有拓展，我们这里不会提及。可以查阅其他文档。
替代教程
INFO
这类模块是我们的原创的地方，旨在利用其他教程资源来帮助读者阅读，确保能理解知识点。
如果我们这个教程还是看不太懂，也可以去看看其他教程，确保学会如何使用 Markdown：
HTML 速通
在了解了 Markdown 之后，我们已经明白了一个 “标记语言” 是怎么一回事，以及这类纯文本格式是如何表示一个文档的语义的。那么我们就会进入 HTML 的学习，来观察 HTML 是如何使用 XML 来描述一个文档的结构的。
INFO
我们的教程会积极引用其他的教程，因为这个前端速通是以理念为核心的，对于具体的知识会引用其他的优秀的教程。
这里的知识点我们将学习 MDN 的教程，请阅读以下教程，顺便完成教程中给定的任务：
MDN 还有提到其他内容，不过由于我们是速通教程，这里就先不学习这么多高级用法 —— 我们会在后面整理给大家。
在完成上文阅读后，完成 MDN: Test your skills: HTML text basics，测试自己是否掌握。
学会了 HTML 的基础用法，我们就可以开始 CSS 的学习了。