Markdown与富文本语法对照全解析

原文：Markdown 与富文本语法对照全解析 | w3cschool笔记

Markdown 和富文本是两种广泛应用的文本格式。Markdown 以简洁易读的语法著称，而富文本则凭借其丰富的样式和强大的功能深受用户喜爱。本文将对 Markdown 和富文本的语法进行详细对照，帮助大家更好地理解和使用这两种文本格式。

Markdown 简介

Markdown 是一种轻量级标记语言，它以简洁易读的语法著称。通过使用简单的符号，如# 表示标题、* 表示列表等，Markdown 让用户能够轻松地编写出格式化的文本。它非常适合用于快速记录笔记、撰写博客文章或创建文档。Markdown 的文件通常是纯文本格式（.md ），可以方便地转换为 HTML，从而在网页上展示。由于其简单性，Markdown 成为了许多开发者和内容创作者的首选工具。

富文本简介

富文本是一种包含丰富格式的文本格式，它支持多种样式和功能，如加粗、斜体、颜色、图片插入、表格等。富文本通常使用 HTML（超文本标记语言）来实现，能够在网页上呈现出复杂的排版效果。与 Markdown 不同，富文本更适合需要精细控制内容展示的场景，如网页设计、文档编辑等。富文本的编辑通常需要使用专门的富文本编辑器，这些编辑器提供了直观的界面，让用户可以轻松地添加和调整各种格式。

一、文本格式 （一）加粗 Markdown ：使用两个星号（**）或下划线（__）包围文本。例如：**加粗文本** 或 __加粗文本__。 你好，欢迎来到**编程狮**！ 你好，欢迎来到__编程狮__！ 尝试一下 »富文本 ：使用 HTML 标签 <strong> 或 <b>。例如：<strong>加粗文本</strong> 或 <b>加粗文本</b>。 <p>你好，欢迎来到<strong>编程狮</strong>！</p> <p>你好，欢迎来到<b>编程狮</b>！</p>

效果如下：

“你好，欢迎来到编程狮！”

（二）斜体 Markdown ：使用 一个 星号（*）或下划线（_）包围文本。例如：*斜体文本* 或 _斜体文本_。 你好，欢迎来到*编程狮*！ 你好，欢迎来到_编程狮_！ 尝试一下 »富文本 ：使用 HTML 标签 <em> 或 <i>。例如：<em>斜体文本</em> 或 <i>斜体文本</i>。 <p>你好，欢迎来到<em>编程狮</em>！</p> <p>你好，欢迎来到<i>编程狮</em>！</i>

效果如下：

“你好，欢迎来到编程狮！”

二、标题

Markdown ：使用数字符号（#）表示标题级别，一个 # 表示最高级标题，最多可以有六个层级。例如：

# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 尝试一下 »

富文本 ：使用 HTML 的 <h1> 到 <h6> 标签，分别表示从最大一级标题到第六级标题。例如：

<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>

效果如下：

三、列表 （一）无序列表

Markdown ：使用星号（*）、加号（+）或者减号（-）来表示无序列表项。例如：

* 列表项 1 * 列表项 2 * 列表项 3

富文本 ：使用 HTML 的 <ul> 和 <li> 标签。例如：

<ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul> 尝试一下 »

效果如下：

“

列表项 1列表项 2列表项 3

”

（二）有序列表

Markdown ：使用数字加上英文句点（.）来表示有序列表项。例如：

1. 列表项 1 2. 列表项 2 3. 列表项 3 尝试一下 »

富文本 ：使用 HTML 的 <ol> 和 <li> 标签。例如：

<ol> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ol>

四、超链接 Markdown ：使用方括号包围链接文本，用括号包围链接的 URL 地址。例如：[链接文本](URL 地址)。 编程狮[编程实战训练营]( .w3cschool /codecamp)像玩游戏一样学习编程。 尝试一下 »富文本 ：使用 HTML 的 <a> 标签和其 href 属性。例如：<a href="URL 地址">链接文本</a>。 编程狮<a href=" .w3cschool /codecamp">编程实战训练营</a>像玩游戏一样学习编程。

五、图片 Markdown ：使用感叹号（!）引导，然后是方括号指定图片描述，括号后是括号包围的图片 URL 地址。例如：。  尝试一下 »富文本 ：使用 HTML 的 <img> 标签。例如：<img src="图片 URL 地址" alt="图片描述">。 <img src=" atts.w3cschool /attachments/image/20201126/1606377797590612.png" alt="编程狮logo" > 六、代码 （一）行内代码块 Markdown ：使用反引号（​`​​​）包围文本。例如：​​​`这是一段行内代码块`​。 Markdown 的行内代码块使用反引号（`​`​​​`）包围文本。 富文本 ：使用 HTML 的 <code> 标签。例如：<code>这是一段行内代码块</code>。 富文本 的行内代码块使用 HTML 的 <code><code></code> 标签。

七、块引用

Markdown ：使用右箭头（>）引导块引用。例如：

> 这是一段块引用的文本。 这是同一块引用的文本。 尝试一下 »

富文本 ：使用 HTML 的 <blockquote> 标签。例如：

<blockquote> <p>这是一段块引用的文本。</p> <p>这是同一块引用的文本。</p> </blockquote>

八、表格

Markdown ：使用竖线（|）来分隔列，用破折号（-）创建分隔线。例如：

| 表头 1 | 表头 2 | 表头 3 | |------|-------|------| | 单元格 1 | 单元格 2 | 单元格 3 | | 单元格 4 | 单元格 5 | 单元格 6 |

富文本 ：使用 HTML 的 <table>、<tr>、<th>、<td> 等标签。例如：

<table> <tr> <th>表头 1</th> <th>表头 2</th> <th>表头 3</th> </tr> <tr> <td>单元格 1</td> <td>单元格 2</td> <td>单元格 3</td> </tr> <tr> <td>单元格 4</td> <td>单元格 5</td> <td>单元格 6</td> </tr> </table>

九、脚注

Markdown ：使用符号 ^ 来创建脚注，例如：这段文字有一个脚注[^1]。[^1]: 这是脚注的内容。 

这段文字有一个脚注[^1]。[^1]: 这是脚注的内容。

尝试一下 »

富文本 ：需要手动创建脚注标记和链接，或者使用专门的样式来定义脚注。例如：

<p>这段文字有一个脚注^{<a href="#fn1" id="fnref1">1</a>}。</p> <p id="fn1">这是脚注的内容^{<a href="#fnref1">↩</a>}</p>

十、符号 Markdown ：使用 HTML 实体来插入符号，例如： &nbsp;（无宽度空格） &copy;（版权符号） &trade;（商标符号） 富文本 ：同样使用 HTML 实体，例如： &nbsp; &copy; &trade;

十一、表情符号 Markdown ：使用简短的代码来插入表情符号，例如：​​富文本 ：通常需要直接使用表情符号的 Unicode 字符，或者使用 HTML 实体，例如：​​

十二、行重新 Markdown ：在文本的末尾添加两个或多个空格，然后按下回车键，可以实现硬换行。例如： 这是一段文本 这是下一行文本 富文本 ：不需要特殊语法，直接按下回车键即可换行。 十三、任务列表

Markdown ：使用符号 - [ ] 或者 * [ ] 来创建任务列表。例如：

- [x] 已完成的任务 - [ ] 未完成的任务 * [x] 已完成的任务 * [ ] 未完成的任务

富文本 ：通常需要手动添加对勾符号或使用 CSS 样式来模拟任务列表。

通过以上对照，我们可以看到 Markdown 和富文本各有其特点和优势。Markdown 语法简洁，易于学习和使用，适合快速编写和排版文本；而富文本则在样式和功能上更为丰富，能够满足更复杂的排版需求。在实际应用中，我们可以根据具体需求选择合适的文本格式，以达到最佳的效果。