0%

Markdown 语法学习笔记

标题语法

要创建标题,请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如,添加三个 # 表示创建一个三级标题 (<h3>) (例如:### My Header)。

|Markdown语法|HTML|预览效果|
|—|—|—|
|# Heading level 1|<h1>Heading level 1</h1>|# Heading level 1|
|## Heading level 2|<h2>Heading level 2</h2>|## Heading level 2|
|### Heading level 3|<h3>Heading level 3</h3>|### Heading level 3|
|#### Heading level 4|<h4>Heading level 4</h4>|#### Heading level 4|
|##### Heading level 5|<h5>Heading level 5</h5>|##### Heading level 5|
|###### Heading level 6|<h6>Heading level 6</h6>|###### Heading level 6|

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题,或者 – 号来标识二级标题。

Markdown语法 HTML 预览效果
Heading level 1 =============== <h1>Heading level 1</h1> # Heading level 1
Heading level 2 --------------- <h2>Heading level 2</h2> ## Heading level 2

最佳实践

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑,请用一个空格在 # 和标题之间进行分隔。

✅ Do this ❌ Don’t do this
# Here's a Heading #Here's a Heading

标题编号

许多Markdown处理器支持标题的自定义ID - 一些Markdown处理器会自动添加它们。添加自定义ID允许您直接链接到标题并使用CSS对其进行修改。要添加自定义标题ID,请在与标题相同的行上用大括号括起该自定义ID。

1
### My Great Heading {#custom-id}

HTML看起来像这样:

1
<h3 id="custom-id">My Great Heading</h3>

链接到标题ID (#headid)

通过创建带有数字符号(#)和自定义标题ID的标准链接,可以链接到文件中具有自定义ID的标题。

Markdown HTML 预览效果
[Heading IDs](#heading-ids) <a href="#heading-ids">Heading IDs</a> Heading IDs

其他网站可以通过将自定义标题ID添加到网页的完整URL(例如[Heading IDs](https://markdown.com.cn/extended-syntax/heading-ids.html#headid))来链接到标题。

段落语法

要创建段落,请使用空白行将一行或多行文本进行分隔。

Markdown语法 HTML 预览效果
I really like using Markdown. I think I'll use it to format all of my documents from now on. <p>I really like using Markdown.</p> <p>I think I'll use it to format all of my documents from now on.</p> I really like using Markdown.

I think I’ll use it to format all of my documents from now on.

段落(Paragraph)用法的最佳实

不要用空格(spaces)或制表符( tabs)缩进段落。

✅ Do this ❌ Don’t do this
Don't put tabs or spaces in front of your paragraphs. Keep lines left-aligned like this. This can result in unexpected formatting problems. Don't add tabs or spaces in front of paragraphs.

图片语法

要添加图像,请使用感叹号 (!), 然后在方括号增加替代文本,图片链接放在圆括号里,括号里的链接后可以增加一个可选的图片标题文本。

插入图片Markdown语法代码:![图片alt](图片链接 "图片title")

对应的HTML代码:<img src="图片链接" alt="图片alt" title="图片title">

1
![这是图片](/assets/img/philly-magic-garden.jpg "Magic Gardens")

渲染效果如下:

这是图片

链接图片

给图片增加链接,请将图像的Markdown 括在方括号中,然后将链接添加在圆括号中。

1
[![沙漠中的岩石图片](/assets/img/shiprock.jpg "Shiprock")](https://maximusarthur.github.io)

渲染效果如下:

沙漠中的岩石图片

换行语法

在一行的末尾添加两个或多个空格,然后按回车键,即可创建一个换行(<br>)。

Markdown语法 HTML 预览效果
This is the first line. And this is the second line. <p>This is the first line.<br> And this is the second line.</p> This is the first line.
And this is the second line.

换行(Line Break)用法的最佳实践

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行,称为 结尾空格(trailing whitespace) 的方式,但这是有争议的,因为很难在编辑器中直接看到空格,并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因,你可能要使用除结尾空格以外的其它方式来换行。幸运的是,几乎每个 Markdown 应用程序都支持另一种换行方式:HTML 的 <br> 标签。

为了兼容性,请在行尾添加“结尾空格”或 HTML 的 <br> 标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\) 的方式实现换行,但是并非所有 Markdown 应用程序都支持此种方式,因此从兼容性的角度来看,不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容,只须键入回车键(return)即可实现换行。

✅ Do this ❌ Don’t do this
First line with two spaces after. And the next line. First line with the HTML tag after.<br> And the next line. First line with a backslash after.\ And the next line. First line with nothing after. And the next line.

表格

要添加表,请使用三个或多个连字符(---)创建每列的标题,并使用管道(|)分隔每列。您可以选择在表的任一端添加管道。

1
2
3
4
| Syntax      | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |

呈现的输出如下所示:

Syntax Description
Header Title
Paragraph Text

单元格宽度可以变化,如下所示。呈现的输出将看起来相同。

1
2
3
4
| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

Tip: 使用连字符和管道创建表可能很麻烦。为了加快该过程,请尝试使用Markdown Tables Generator。使用图形界面构建表,然后将生成的Markdown格式的文本复制到文件中。

对齐

您可以通过在标题行中的连字符的左侧,右侧或两侧添加冒号(:),将列中的文本对齐到左侧,右侧或中心。

1
2
3
4
| Syntax      | Description | Test Text     |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |

呈现的输出如下所示:

Syntax Description Test Text
Header Title Here’s this
Paragraph Text And more

格式化表格中的文字

您可以在表格中设置文本格式。例如,您可以添加链接,代码(仅反引号(`)中的单词或短语,而不是代码块)和强调。

您不能添加标题,块引用,列表,水平规则,图像或HTML标签。

在表中转义管道字符

您可以使用表格的HTML字符代码(&#124;)在表中显示竖线(|)字符。