宽容厚德 發表於 2025-12-28 21:15:00

Markdown 常用语法详解（图文并茂）

<h1>一、序言</h1>
<p>当你看到这篇文章时，很可能已经在使用 Markdown 了——无论你是否意识到。那些在 GitHub 上简洁的 README、技术博客里的优雅排版、甚至 AI 回复中清晰的结构，背后都是同一套轻巧的标记语言。</p>
<p>它诞生于 2004 年，初衷只是“让人们更专注于写作而非排版”。二十多年后的今天，这个用几个符号就能定义结构的纯文本格式，却意外成为了数字时代最高效的通用语。</p>
<p>从代码文档到日常笔记，从团队协作到 AI 对话，Markdown 正在重新定义我们组织思想的方式。它不捆绑任何软件，却能在任何设备上生存；它简单到十分钟就能掌握，却强大到足以构建整个知识体系。</p>
<h1>二、常用语法详解</h1>
<h2>1、标题语法</h2>
<h3>1.1、标题语法（推荐）</h3>
<p>要创建标题，请在单词或短语前面添加井号 (<strong><span style="color: rgba(255, 0, 0, 1)">#</span></strong>) 。<strong><span style="color: rgba(255, 0, 0, 1)">#</span></strong> 的数量代表了标题的级别。例如，添加三个 <strong><span style="color: rgba(255, 0, 0, 1)">#</span></strong> 表示创建一个三级标题 (&lt;h3&gt;) (例如：### My Header)。&nbsp;</p>
<p>示例：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"># 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226222551331-1261480354.png" alt="image" loading="lazy"></p>
<h3>1.2、可选语法（不推荐）</h3>
<p>还可以在文本下方添加任意数量的 <strong><span style="color: rgba(255, 0, 0, 1)">=</span></strong> 号来标识一级标题，或者 <strong><span style="color: rgba(255, 0, 0, 1)">-</span></strong> 号来标识二级标题。&nbsp;</p>
<p>示例：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">这是一级标题
</span>==<span style="color: rgba(0, 0, 0, 1)">

这是二级标题
</span>---</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226222935432-1159229137.png" alt="image" loading="lazy"></p>
<h3>1.3、最佳实践</h3>
<p>不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。&nbsp;</p>
<h2>2、列表语法</h2>
<h3>2.1、有序列表&nbsp;</h3>
<p>要创建有序列表，请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列，但是列表应当以数字 1 起始。</p>
<p>示例1：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">. First item
</span><span style="color: rgba(128, 0, 128, 1)">2</span><span style="color: rgba(0, 0, 0, 1)">. Second item
</span><span style="color: rgba(128, 0, 128, 1)">3</span><span style="color: rgba(0, 0, 0, 1)">. Third item
</span><span style="color: rgba(128, 0, 128, 1)">4</span>. Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226224026281-627384574.png" alt="image" loading="lazy"></p>
<p>示例2：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">. First item
</span><span style="color: rgba(128, 0, 128, 1)">8</span><span style="color: rgba(0, 0, 0, 1)">. Second item
</span><span style="color: rgba(128, 0, 128, 1)">3</span><span style="color: rgba(0, 0, 0, 1)">. Third item
</span><span style="color: rgba(128, 0, 128, 1)">5</span>. Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226224229176-862630409.png" alt="image" loading="lazy"></p>
<p>示例3：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">. First item
</span><span style="color: rgba(128, 0, 128, 1)">2</span><span style="color: rgba(0, 0, 0, 1)">. Second item
</span><span style="color: rgba(128, 0, 128, 1)">3</span><span style="color: rgba(0, 0, 0, 1)">. Third item
    </span><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">. Indented item
    </span><span style="color: rgba(128, 0, 128, 1)">2</span><span style="color: rgba(0, 0, 0, 1)">. Indented item
</span><span style="color: rgba(128, 0, 128, 1)">4</span>. Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226224453537-1254013227.png" alt="image" loading="lazy"></p>
<h3>2.2、无序列表</h3>
<p>要创建无序列表，请在每个列表项前面添加 减号 (<span style="color: rgba(255, 0, 0, 1)"><strong>-</strong></span>)、星号 (<strong><span style="color: rgba(255, 0, 0, 1)">*</span></strong>) 或加号 (<strong><span style="color: rgba(255, 0, 0, 1)">+</span></strong>) 。个人推荐使用减号 (<span style="color: rgba(255, 0, 0, 1)"><strong>-</strong></span>) 来创建无序列表。缩进一个或多个列表项可创建嵌套列表。</p>
<p>示例1：</p>
<div class="cnblogs_code">
<pre>-<span style="color: rgba(0, 0, 0, 1)"> First item
</span>-<span style="color: rgba(0, 0, 0, 1)"> Second item
</span>-<span style="color: rgba(0, 0, 0, 1)"> Third item
</span>- Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226224917582-1910670802.png" alt="image" loading="lazy"></p>
<p>示例2：</p>
<div class="cnblogs_code">
<pre>*<span style="color: rgba(0, 0, 0, 1)"> First item
</span>*<span style="color: rgba(0, 0, 0, 1)"> Second item
</span>*<span style="color: rgba(0, 0, 0, 1)"> Third item
</span>* Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226225012663-1434842944.png" alt="image" loading="lazy"></p>
<p>示例3：</p>
<div class="cnblogs_code">
<pre>+<span style="color: rgba(0, 0, 0, 1)"> First item
</span>+<span style="color: rgba(0, 0, 0, 1)"> Second item
</span>+<span style="color: rgba(0, 0, 0, 1)"> Third item
</span>+ Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226225053734-1969544941.png" alt="image" loading="lazy"></p>
<p>示例4：&nbsp;</p>
<div class="cnblogs_code">
<pre>-<span style="color: rgba(0, 0, 0, 1)"> First item
</span>-<span style="color: rgba(0, 0, 0, 1)"> Second item
</span>-<span style="color: rgba(0, 0, 0, 1)"> Third item
    </span>-<span style="color: rgba(0, 0, 0, 1)"> Indented item
    </span>-<span style="color: rgba(0, 0, 0, 1)"> Indented item
</span>- Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226225235872-244977989.png" alt="image" loading="lazy"></p>
<h3>2.3、在列表中嵌套其他元素</h3>
<p>要在保留列表连续性的同时在列表中添加另一种元素，请将该元素缩进四个空格或一个制表符，如下例所示：</p>
<h4>2.3.1、段落</h4>
<div class="cnblogs_code">
<pre>*   This <span style="color: rgba(0, 0, 255, 1)">is</span><span style="color: rgba(0, 0, 0, 1)"> the first list item.
</span>*   Here<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">s the second list item.</span>
<span style="color: rgba(0, 0, 0, 1)">
    I need to add another paragraph below the second list item.

</span>*   And here<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">s the third list item.</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226231458084-251787595.png" alt="image" loading="lazy"></p>
<h4>2.3.2、引用块</h4>
<div class="cnblogs_code">
<pre>*   This <span style="color: rgba(0, 0, 255, 1)">is</span><span style="color: rgba(0, 0, 0, 1)"> the first list item.
</span>*   Here<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">s the second list item.</span>

    &gt;<span style="color: rgba(0, 0, 0, 1)"> A blockquote would look great below the second list item.

</span>*   And here<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">s the third list item.</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226231633194-1018654968.png" alt="image" loading="lazy"></p>
<h4>2.3.3、列表</h4>
<p>你可以在有序列表中嵌套一个无序列表，反之亦然。</p>
<p>示例：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">. First item
</span><span style="color: rgba(128, 0, 128, 1)">2</span><span style="color: rgba(0, 0, 0, 1)">. Second item
</span><span style="color: rgba(128, 0, 128, 1)">3</span><span style="color: rgba(0, 0, 0, 1)">. Third item
    </span>-<span style="color: rgba(0, 0, 0, 1)"> Indented item
    </span>-<span style="color: rgba(0, 0, 0, 1)"> Indented item
</span><span style="color: rgba(128, 0, 128, 1)">4</span>. Fourth item</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251226231139343-374143197.png" alt="image" loading="lazy"></p>
<h4>2.3.4、代码块</h4>
<p>代码块通常采用四个空格或一个制表符缩进。当它们被放在列表中时，请将它们缩进八个空格或两个制表符。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">.Open the file.
</span><span style="color: rgba(128, 0, 128, 1)">2</span>.Find the following code block on line <span style="color: rgba(128, 0, 128, 1)">21</span><span style="color: rgba(0, 0, 0, 1)">:

      </span>&amp;lt;html&gt;
          &amp;lt;head&gt;
            &amp;lt;title&gt;Test&amp;lt;/title&gt;
          &amp;lt;/head&gt;

<span style="color: rgba(128, 0, 128, 1)">3</span>.Update the title to match the name of your website.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228174954311-351297722.png" alt="image" loading="lazy"></p>
<h4>2.3.5、图片</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">.Open the file containing the Linux mascot.
</span><span style="color: rgba(128, 0, 128, 1)">2</span><span style="color: rgba(0, 0, 0, 1)">.Marvel at its beauty.

    </span>![博客园logo](https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">www.cnblogs.com/images/logo_small.gif)</span>

<span style="color: rgba(128, 0, 128, 1)">3</span>.Close the file.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228210456798-69217071.png" alt="image" loading="lazy"></p>
<h2>3、段落语法</h2>
<p>要创建段落，请使用空白行将一行或多行文本进行分隔。</p>
<div class="cnblogs_code">
<pre>I really like <span style="color: rgba(0, 0, 255, 1)">using</span><span style="color: rgba(0, 0, 0, 1)"> Markdown.

I think I</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">ll use it to format all of my documents from now on.</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227224848244-1230875489.png" alt="image" loading="lazy"></p>
<p><strong>段落（Paragraph）用法的最佳实践：<br></strong></p>
<p>不要用空格（spaces）或制表符（ tabs）缩进段落。</p>
<h2>4、换行语法</h2>
<p>在一行的末尾添加两个或多个空格，然后按回车键，即可创建一个换行(&lt;br&gt;)。</p>
<div class="cnblogs_code">
<pre>This <span style="color: rgba(0, 0, 255, 1)">is</span> the first line.&lt;br&gt;<span style="color: rgba(0, 0, 0, 1)">
And </span><span style="color: rgba(0, 0, 255, 1)">this</span> <span style="color: rgba(0, 0, 255, 1)">is</span> the second line.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227225235225-745944025.png" alt="image" loading="lazy"></p>
<p><strong>换行（Line Break）用法的最佳实践：</strong></p>
<p>几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为 结尾空格（trailing whitespace) 的方式，但这是有争议的，因为很难在编辑器中直接看到空格，并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因，你可能要使用除结尾空格以外的其它方式来换行。幸运的是，几乎每个 Markdown 应用程序都支持另一种换行方式：HTML 的 &lt;br&gt; 标签。</p>
<p>为了兼容性，请在行尾添加“<span style="color: rgba(255, 0, 0, 1)"><strong>结尾空格</strong></span>”或 HTML 的 <span style="color: rgba(255, 0, 0, 1)"><strong>&lt;br&gt;</strong></span> 标签来实现换行。</p>
<h2>5、强调语法</h2>
<p>通过将文本设置为<strong>粗体</strong>或<strong>斜体</strong>来强调其重要性。&nbsp;</p>
<h3>5.1、粗体（Bold）&nbsp;</h3>
<p>要加粗文本，请在单词或短语的前后各添加<span style="color: rgba(255, 0, 0, 1)"><strong>两个星号</strong></span>（asterisks）或<span style="color: rgba(255, 0, 0, 1)"><strong>两个下划线</strong></span>（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加<span style="color: rgba(255, 0, 0, 1)"><strong>两个星号</strong></span>（asterisks）。&nbsp;</p>
<div class="cnblogs_code">
<pre>I just love **bold text**<span style="color: rgba(0, 0, 0, 1)">.

I just love __bold text__.

Love</span>**<span style="color: rgba(0, 0, 255, 1)">is</span>**bold</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227230148671-2089209846.png" alt="image" loading="lazy"></p>
<p><strong>粗体（Bold）用法最佳实践：&nbsp;</strong></p>
<p>Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑，在单词或短语中间部分加粗的话，请<span style="color: rgba(255, 0, 0, 1)"><strong>使用星号</strong></span>（asterisks）。&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227230436283-885269224.png" alt="image" loading="lazy"></p>
<h3>5.2、斜体（Italic）</h3>
<p>要用斜体显示文本，请在单词或短语前后添加<span style="color: rgba(255, 0, 0, 1)"><strong>一个星号</strong></span>（asterisk）或<strong><span style="color: rgba(255, 0, 0, 1)">一个下划线</span></strong>（underscore）。要斜体突出单词的中间部分，请在字母前后各添加<span style="color: rgba(255, 0, 0, 1)"><strong>一个星号</strong></span>，中间不要带空格。</p>
<div class="cnblogs_code">
<pre>Italicized text <span style="color: rgba(0, 0, 255, 1)">is</span> the *cat<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">s meow*.</span>
<span style="color: rgba(0, 0, 0, 1)">
Italicized text </span><span style="color: rgba(0, 0, 255, 1)">is</span> the _cat<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">s meow_.</span>
<span style="color: rgba(0, 0, 0, 1)">
A</span>*cat*meow</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227230748574-1158005247.png" alt="image" loading="lazy"></p>
<p><strong>斜体（Italic）用法的最佳实践：&nbsp;</strong></p>
<p>要同时用粗体和斜体突出显示文本，请在单词或短语的前后各添加<span style="color: rgba(255, 0, 0, 1)"><strong>三个星号</strong></span>或<strong><span style="color: rgba(255, 0, 0, 1)">三个下划线</span></strong>。要加粗并用斜体显示单词或短语的中间部分，请在要突出显示的部分前后各添加<span style="color: rgba(255, 0, 0, 1)"><strong>三个星号</strong></span>，中间不要带空格。</p>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227231457650-1793146367.png" alt="image" loading="lazy"></p>
<h3>5.3、粗体（Bold）和斜体（Italic）</h3>
<p>要同时用粗体和斜体突出显示文本，请在单词或短语的前后各添加<span style="color: rgba(255, 0, 0, 1)"><strong>三个星号</strong></span>或<span style="color: rgba(255, 0, 0, 1)"><strong>三个下划线</strong></span>。要加粗并用斜体显示单词或短语的中间部分，请在要突出显示的部分前后各添加<span style="color: rgba(255, 0, 0, 1)"><strong>三个星号</strong></span>，中间不要带空格。&nbsp;</p>
<div class="cnblogs_code">
<pre>This text <span style="color: rgba(0, 0, 255, 1)">is</span> ***really important***<span style="color: rgba(0, 0, 0, 1)">.

This text </span><span style="color: rgba(0, 0, 255, 1)">is</span><span style="color: rgba(0, 0, 0, 1)"> ___really important___.

This text </span><span style="color: rgba(0, 0, 255, 1)">is</span> __*really important*<span style="color: rgba(0, 0, 0, 1)">__.

This text </span><span style="color: rgba(0, 0, 255, 1)">is</span> **_really important_**<span style="color: rgba(0, 0, 0, 1)">.

This </span><span style="color: rgba(0, 0, 255, 1)">is</span> really***very***important text.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227231859947-211862089.png" alt="image" loading="lazy"></p>
<p><strong>粗体（Bold）和斜体（Italic）用法的最佳实践：&nbsp;</strong></p>
<p>Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性，请<span style="color: rgba(255, 0, 0, 1)"><strong>使用星号</strong></span>将单词或短语的中间部分加粗并以斜体显示，以示重要。&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251227232148167-1998492709.png" alt="image" loading="lazy"></p>
<h2>6、区块引用语法</h2>
<h3>6.1、单个段落的块引用</h3>
<p>要创建块引用，请在段落前添加一个 <strong><span style="color: rgba(255, 0, 0, 1)">&gt;</span></strong> 符号。&nbsp;</p>
<div class="cnblogs_code">
<pre>&gt; Dorothy followed her through many of the beautiful rooms <span style="color: rgba(0, 0, 255, 1)">in</span> her castle.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228173546877-1474590103.png" alt="image" loading="lazy"></p>
<h3>6.2、多个段落的块引用</h3>
<p>块引用可以包含多个段落。为段落之间的空白行添加一个 <strong><span style="color: rgba(255, 0, 0, 1)">&gt;</span></strong> 符号。</p>
<div class="cnblogs_code">
<pre>&gt; Dorothy followed her through many of the beautiful rooms <span style="color: rgba(0, 0, 255, 1)">in</span><span style="color: rgba(0, 0, 0, 1)"> her castle.
</span>&gt;
&gt; The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228173924344-1557991665.png" alt="image" loading="lazy"></p>
<h3>6.3、嵌套块引用</h3>
<p>块引用可以嵌套。在要嵌套的段落前添加一个 <span style="color: rgba(255, 0, 0, 1)"><strong>&gt;&gt;</strong></span> 符号。&nbsp;</p>
<div class="cnblogs_code">
<pre>&gt; Dorothy followed her through many of the beautiful rooms <span style="color: rgba(0, 0, 255, 1)">in</span><span style="color: rgba(0, 0, 0, 1)"> her castle.
</span>&gt;
&gt;&gt; The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228174110886-961134286.png" alt="image" loading="lazy"></p>
<h3>6.4、带有其它元素的块引用</h3>
<p>块引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用，你需要进行实验以查看哪些元素有效。</p>
<div class="cnblogs_code">
<pre>&gt; #### The quarterly results look great!
&gt;
&gt; -<span style="color: rgba(0, 0, 0, 1)"> Revenue was off the chart.
</span>&gt; -<span style="color: rgba(0, 0, 0, 1)"> Profits were higher than ever.
</span>&gt;
&gt;*Everything* <span style="color: rgba(0, 0, 255, 1)">is</span> going according to **plan**.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228174422689-1610510800.png" alt="image" loading="lazy"></p>
<h2>7、代码语法</h2>
<h3>7.1、行内代码</h3>
<p>要将单词或短语表示为代码，请将其包裹在反引号 (<strong><span style="color: rgba(255, 0, 0, 1)">`</span></strong>) 中。</p>
<div class="cnblogs_code">
<pre>At the command prompt, type `nano`.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228180122165-1479328027.png" alt="image" loading="lazy"></p>
<h3>7.2、转义反引号</h3>
<p>如果你要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号(<span style="color: rgba(255, 0, 0, 1)"><strong>``</strong></span>)中。&nbsp;</p>
<div class="cnblogs_code">
<pre>``Use `code` <span style="color: rgba(0, 0, 255, 1)">in</span> your Markdown file.``</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228180324172-1636082748.png" alt="image" loading="lazy"></p>
<h3>7.3、代码块</h3>
<p>Markdown基本语法允许您通过将行缩进四个空格或一个制表符来创建代码块。如果发现不方便，请尝试使用受保护的代码块。根据Markdown处理器或编辑器的不同，您将在代码块之前和之后的行上使用三个反引号（<strong><span style="color: rgba(255, 0, 0, 1)">```</span></strong>）或三个波浪号（<strong><span style="color: rgba(255, 0, 0, 1)">~~~</span></strong>）。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">```
{
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">firstName</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">John</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">lastName</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Smith</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">age</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 128, 1)">25</span><span style="color: rgba(0, 0, 0, 1)">
}
```</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228180724491-1448029668.png" alt="image" loading="lazy"></p>
<p><strong>语法高亮：</strong></p>
<p>许多Markdown处理器都支持受围栏代码块的语法突出显示。使用此功能，您可以为编写代码的任何语言添加颜色突出显示。要添加语法突出显示，请在受防护的代码块之前的<span style="color: rgba(255, 0, 0, 1)"><strong>反引号旁边指定一种语言</strong></span>。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">```json
{
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">firstName</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">John</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">lastName</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Smith</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">age</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 128, 1)">25</span><span style="color: rgba(0, 0, 0, 1)">
}
```</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228180926306-1899209072.png" alt="image" loading="lazy"></p>
<h2>8、分隔线语法</h2>
<p>要创建分隔线，请在单独一行上使用三个或多个星号 (<span style="color: rgba(255, 0, 0, 1)"><strong>***</strong></span>)、破折号 (<strong><span style="color: rgba(255, 0, 0, 1)">---</span></strong>) 或下划线 (<strong><span style="color: rgba(255, 0, 0, 1)">___</span></strong>) ，并且不能包含其他内容。</p>
<div class="cnblogs_code">
<pre>***
---<span style="color: rgba(0, 0, 0, 1)">
___</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228181726066-1265724898.png" alt="image" loading="lazy"></p>
<p><strong>分隔线（Horizontal Rule）用法最佳实践：</strong></p>
<p>为了兼容性，请在分隔线的前后均添加空白行。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Try to put a blank line before...

</span>---<span style="color: rgba(0, 0, 0, 1)">

...and after a horizontal rule.</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228182011625-1772783708.png" alt="image" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228182028828-135521323.png" alt="image" loading="lazy"></p>
<h2>9、链接语法</h2>
<h3>9.1、链接语法</h3>
<p>链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。</p>
<p><strong>超链接Markdown语法代码：</strong>[超链接显示名](超链接地址 "超链接title")</p>
<p>对应的HTML代码：&lt;a href="超链接地址" title="超链接title"&gt;超链接显示名&lt;/a&gt;</p>
<div class="cnblogs_code">
<pre>这是一个链接 (https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">markdown.com.cn)。</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228183821383-803578984.png" alt="image" loading="lazy"></p>
<h3>9.2、给链接增加 Title</h3>
<p>链接title是当鼠标悬停在链接上时会出现的文字，这个title是可选的，它放在圆括号中链接地址后面，跟链接地址之间以空格分隔。</p>
<div class="cnblogs_code">
<pre>这是一个链接 (https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">markdown.com.cn "最好的markdown教程")。</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228183955438-2015917330.png" alt="image" loading="lazy"></p>
<h3>9.3、网址和Email地址</h3>
<p>使用尖括号可以很方便地把URL或者email地址变成可点击的链接。</p>
<div class="cnblogs_code">
<pre>&lt;https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">markdown.com.cn&gt;</span>

&lt;fake@example.com&gt;</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228184207486-961640450.png" alt="image" loading="lazy"></p>
<h3>9.4、带格式化的链接</h3>
<p>强调 链接, 在链接语法前后增加星号。 要将链接表示为代码，请在方括号中添加反引号。</p>
<div class="cnblogs_code">
<pre>I love supporting the **(https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">eff.org)**.&lt;br&gt;</span>
This <span style="color: rgba(0, 0, 255, 1)">is</span> the *(https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">www.markdownguide.org)*.&lt;br&gt;</span>
See the section on [`code`](#code).</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228184559324-1102179637.png" alt="image" loading="lazy"></p>
<h2>10、图片语法</h2>
<h3>10.1、图片语法</h3>
<p>要添加图像，请使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。</p>
<p><strong>插入图片Markdown语法代码：</strong>![图片alt](图片链接 "图片title")。</p>
<p>对应的HTML代码：&lt;img src="图片链接" alt="图片alt" title="图片title"&gt;</p>
<div class="cnblogs_code">
<pre>![这是图片](/assets/img/philly-magic-garden.jpg <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Magic Gardens</span><span style="color: rgba(128, 0, 0, 1)">"</span>)</pre>
</div>
<h3>10.2、链接图片</h3>
<p>给图片增加链接，请将图片的 Markdown部分 括在方括号中，然后将链接添加在圆括号中。</p>
<div class="cnblogs_code">
<pre>[![沙漠中的岩石图片](/assets/img/shiprock.jpg <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Shiprock</span><span style="color: rgba(128, 0, 0, 1)">"</span>)](https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">markdown.com.cn)</span></pre>
</div>
<div class="cnblogs_code">
<pre>[![博客园logo](https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">www.cnblogs.com/images/logo_small.gif "logo_small")](</span><span style="color: rgba(0, 128, 0, 1); text-decoration: underline">https://markdown.com.cn</span><span style="color: rgba(0, 128, 0, 1)">)</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228204626742-1625544328.png" alt="image" loading="lazy"></p>
<h2>11、转义字符语法</h2>
<p>要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符 <span style="color: rgba(255, 0, 0, 1)"><strong>\</strong></span> 。</p>
<div class="cnblogs_code">
<pre>\* Without the backslash, <span style="color: rgba(0, 0, 255, 1)">this</span> would be a bullet <span style="color: rgba(0, 0, 255, 1)">in</span> an unordered list.</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228192606986-995721603.png" alt="image" loading="lazy"></p>
<h3>11.1、可做转义的字符</h3>
<p>以下列出的字符都可以通过使用反斜杠字符（<span style="color: rgba(255, 0, 0, 1)"><strong>\</strong></span>）从而达到转义目的。</p>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228193058611-1012079619.png" alt="image" loading="lazy"></p>
<h3>11.2、特殊字符自动转义</h3>
<p>在 HTML 文件中，有两个字符需要特殊处理：&nbsp;<code>&lt;</code>&nbsp;和&nbsp;<code>&amp;</code>&nbsp;。&nbsp;<code>&lt;</code>&nbsp;符号用于起始标签，<code>&amp;</code>&nbsp;符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是&nbsp;<code>&amp;lt;</code>&nbsp;和&nbsp;<code>&amp;amp;</code>。</p>
<p><span style="color: rgba(255, 0, 0, 1)">Markdown 允许你直接使用这些符号，它帮你自动转义字符。</span></p>
<div class="cnblogs_code">
<pre>http:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">images.google.com/images?num=30&amp;q=larry+bird</span>

<span style="color: rgba(128, 0, 128, 1)">4</span> &lt; <span style="color: rgba(128, 0, 128, 1)">5</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228193949480-1482935614.png" alt="image" loading="lazy"></p>
<h2>12、删除线语法</h2>
<p>您可以通过在单词中心放置一条水平线来删除单词。结果看起来像这样。此功能使您可以指示某些单词是一个错误，要从文档中删除。若要删除单词，请在单词前后使用两个波浪号<strong><span style="color: rgba(255, 0, 0, 1)">~~</span></strong>。</p>
<div class="cnblogs_code">
<pre>~~世界是平坦的。~~ 我们现在知道世界是圆的。</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228195307740-1455117030.png" alt="image" loading="lazy"></p>
<h2>13、网址链接语法</h2>
<h3>13.1、自动网址链接</h3>
<p>许多Markdown处理器会自动将URL转换为链接。这意味着如果您输入http://www.example.com，即使您未使用方括号，您的Markdown处理器也会自动将其转换为链接。</p>
<div class="cnblogs_code">
<pre>http:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">www.example.com</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228195607050-1803688565.png" alt="image" loading="lazy"></p>
<h3>13.2、禁用自动URL链接</h3>
<p>如果您不希望自动链接URL，则可以通过将URL表示为带反引号的代码来删除该链接。</p>
<div class="cnblogs_code">
<pre>`http:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">www.example.com`</span></pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228195808971-1418795201.png" alt="image" loading="lazy"></p>
<h2>14、表格语法</h2>
<p>要添加表，请使用三个或多个连字符（<strong><span style="color: rgba(255, 0, 0, 1)"><code>---</code></span></strong>）创建每列的标题，并使用管道（<strong><span style="color: rgba(255, 0, 0, 1)"><code>|</code></span></strong>）分隔每列。您可以选择在表的任一端添加管道。</p>
<div class="cnblogs_code">
<pre>| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text      |</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228200749222-2086863068.png" alt="image" loading="lazy"></p>
<p>单元格宽度可以变化，如下所示。呈现的输出将看起来相同。</p>
<div class="cnblogs_code">
<pre>| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text      |

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228200905578-1518890612.png" alt="image" loading="lazy"></p>
<h3>14.1、对齐</h3>
<p>您可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（<strong><span style="color: rgba(255, 0, 0, 1)"><code>:</code></span></strong>），将列中的文本对齐到左侧，右侧或中心。</p>
<div class="cnblogs_code">
<pre>| Syntax      | Description | Test Text   |
| :---      |    :----:   |          ---: |
| Header      | Title       | Here<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">s this   |</span>
| Paragraph   | Text      | And more      |</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251228201434100-1801880468.png" alt="image" loading="lazy"></p>
<h3>14.2、格式化表格中的文字</h3>
<p>您可以在表格中设置文本格式。例如，您可以添加链接，代码（仅反引号（<strong><span style="color: rgba(255, 0, 0, 1)">`</span></strong>）中的单词或短语，而不是代码块）和强调。&nbsp;</p>
<p>您不能添加标题，块引用，列表，水平规则，图像或HTML标签。&nbsp;</p>
<h3>14.3、在表中转义管道字符</h3>
<p>您可以使用表格的HTML字符代码（<strong><span style="color: rgba(255, 0, 0, 1)"><code>&amp;#124;</code></span></strong>）在表中显示竖线（<strong><span style="color: rgba(255, 0, 0, 1)"><code>|</code></span></strong>）字符。&nbsp;</p>
<p>&nbsp;</p>
<p>本文用的演示工具为：<strong><span style="color: rgba(255, 0, 0, 1)">DevToys</span></strong></p>
<p><img src="https://img2024.cnblogs.com/blog/1755789/202512/1755789-20251222234835082-1512584364.png" alt="image" loading="lazy"></p>
<p>这是一款开发人员工具，非常契合开发者的日常使用需要，可以直接去微软应用商店下载。</p>
<p>Markdown 在线编辑器：https://markdown.com.cn/editor/</p>
<p>&nbsp;</p>
<p><strong>本文大部分内容摘录自 Markdown 教程：</strong>https://markdown.com.cn/basic-syntax/</p>
<p><strong>参考文献：</strong></p>
<p>Markdown 教程：https://markdown.com.cn/basic-syntax/</p>
<p>Markdown 中文网：https://www.markdown.cn/docs/tutorial-basics/basic-syntax</p>
<p>&nbsp;</p>
<p><span style="color: rgba(255, 0, 0, 1)"><strong>此文由博主精心撰写转载请保留此原文链接</strong><span style="color: rgba(0, 0, 0, 1)">：https://www.cnblogs.com/xyh9039/p/19373821</span></span></p>
<p><span style="color: rgba(255, 0, 0, 1); font-size: 18px"><strong>版权声明：如有雷同纯属巧合，如有侵权请及时联系本人修改，谢谢！！！</strong></span></p><br><br>
来源：https://www.cnblogs.com/xyh9039/p/19373821
頁: [1]
查看完整版本: Markdown 常用语法详解（图文并茂）