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

编程狮 2025-02-19 18:11:56 浏览数 (139)
反馈

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
      尝试一下 »
    1. 富文本 :使用 HTML 的 <ol><li> 标签。例如:

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


    四、超链接

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


    五、图片

    • Markdown :使用感叹号(!)引导,然后是方括号指定图片描述,括号后是括号包围的图片 URL 地址。例如:![图片描述](图片 URL 地址)
    • ![编程狮logo](https://atts.w3cschool.cn/attachments/image/20201126/1606377797590612.png)
      尝试一下 »
    • 富文本 :使用 HTML 的 <img> 标签。例如:<img src="图片 URL 地址" alt="图片描述">
    • <img src="https://atts.w3cschool.cn/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>这段文字有一个脚注<sup><a href="#fn1" id="fnref1">1</a></sup></p>
        <p id="fn1">这是脚注的内容<sup><a href="#fnref1"></a></sup></p>


    十、符号

    • Markdown :使用 HTML 实体来插入符号,例如:
    • &nbsp;(无宽度空格) &copy;(版权符号) &trade;(商标符号)

    • 富文本 :同样使用 HTML 实体,例如:
    • &nbsp; &copy; &trade;


    十一、表情符号

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


    十二、行重新

    • Markdown :在文本的末尾添加两个或多个空格,然后按下回车键,可以实现硬换行。例如:
    • 这是一段文本  
      这是下一行文本

    • 富文本 :不需要特殊语法,直接按下回车键即可换行。

    十三、任务列表

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

      • - [x] 已完成的任务
        - [ ] 未完成的任务
        
        * [x] 已完成的任务
        * [ ] 未完成的任务
    • 富文本 :通常需要手动添加对勾符号或使用 CSS 样式来模拟任务列表。

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


    0 人点赞