App下載

Markdown 與富文本語法對照全解析

編程獅 2025-02-19 18:11:56 瀏覽數(shù) (158)
反饋

Markdown 和富文本是兩種廣泛應(yīng)用的文本格式。Markdown 以簡潔易讀的語法著稱,而富文本則憑借其豐富的樣式和強大的功能深受用戶喜愛。本文將對 Markdown 和富文本的語法進行詳細(xì)對照,幫助大家更好地理解和使用這兩種文本格式。


Markdown 簡介

Markdown 是一種輕量級標(biāo)記語言,它以簡潔易讀的語法著稱。通過使用簡單的符號,如# 表示標(biāo)題、* 表示列表等,Markdown 讓用戶能夠輕松地編寫出格式化的文本。它非常適合用于快速記錄筆記、撰寫博客文章或創(chuàng)建文檔。Markdown 的文件通常是純文本格式(.md ),可以方便地轉(zhuǎn)換為 HTML,從而在網(wǎng)頁上展示。由于其簡單性,Markdown 成為了許多開發(fā)者和內(nèi)容創(chuàng)作者的首選工具。


富文本簡介

富文本是一種包含豐富格式的文本格式,它支持多種樣式和功能,如加粗、斜體、顏色、圖片插入、表格等。富文本通常使用 HTML(超文本標(biāo)記語言)來實現(xiàn),能夠在網(wǎng)頁上呈現(xiàn)出復(fù)雜的排版效果。與 Markdown 不同,富文本更適合需要精細(xì)控制內(nèi)容展示的場景,如網(wǎng)頁設(shè)計、文檔編輯等。富文本的編輯通常需要使用專門的富文本編輯器,這些編輯器提供了直觀的界面,讓用戶可以輕松地添加和調(diào)整各種格式。


一、文本格式

(一)加粗

  • Markdown :使用兩個星號(**)或下劃線(__)包圍文本。例如:**加粗文本**__加粗文本__。
  • 你好,歡迎來到**編程獅**!
    
    你好,歡迎來到__編程獅__!
    嘗試一下 ?
  • 富文本 :使用 HTML 標(biāo)簽 <strong><b>。例如:<strong>加粗文本</strong><b>加粗文本</b>。
  • <p>你好,歡迎來到<strong>編程獅</strong></p>
    
    <p>你好,歡迎來到<b>編程獅</b></p>

效果如下:

“你好,歡迎來到編程獅!”

(二)斜體

  • Markdown :使用 一個 星號(*)或下劃線(_)包圍文本。例如:*斜體文本*_斜體文本_
  • 你好,歡迎來到*編程獅*!
    
    你好,歡迎來到_編程獅_!
    嘗試一下 ?
  • 富文本 :使用 HTML 標(biāo)簽 <em><i>。例如:<em>斜體文本</em><i>斜體文本</i>。
  • <p>你好,歡迎來到<em>編程獅</em>!</p>
    
    <p>你好,歡迎來到<i>編程獅</em>!</i>

效果如下:

“你好,歡迎來到編程獅!”


二、標(biāo)題

  • Markdown :使用數(shù)字符號(#)表示標(biāo)題級別,一個 # 表示最高級標(biāo)題,最多可以有六個層級。例如:

    • # 一級標(biāo)題
      ## 二級標(biāo)題
      ### 三級標(biāo)題
      #### 四級標(biāo)題
      ##### 五級標(biāo)題
      ###### 六級標(biāo)題
      嘗試一下 ?
  • 富文本 :使用 HTML 的 <h1><h6> 標(biāo)簽,分別表示從最大一級標(biāo)題到第六級標(biāo)題。例如:

    • <h1>一級標(biāo)題</h1>
      <h2>二級標(biāo)題</h2>
      <h3>三級標(biāo)題</h3>
      <h4>四級標(biāo)題</h4>
      <h5>五級標(biāo)題</h5>
      <h6>六級標(biāo)題</h6>
      

效果如下:

一到六級標(biāo)題顯示效果


三、列表

(一)無序列表

  • Markdown :使用星號(*)、加號(+)或者減號(-)來表示無序列表項。例如:

    • * 列表項 1
      * 列表項 2
      * 列表項 3
  • 富文本 :使用 HTML 的 <ul><li> 標(biāo)簽。例如:

    • <ul>
          <li>列表項 1</li> 
          <li>列表項 2</li> 
          <li>列表項 3</li> 
      </ul>
  • 嘗試一下 ?

效果如下:

  • 列表項 1
  • 列表項 2
  • 列表項 3


(二)有序列表

  • Markdown :使用數(shù)字加上英文句點(.)來表示有序列表項。例如:

    • 1. 列表項 1
      2. 列表項 2
      3. 列表項 3
      嘗試一下 ?
    1. 富文本 :使用 HTML 的 <ol><li> 標(biāo)簽。例如:

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


    四、超鏈接

    • Markdown :使用方括號包圍鏈接文本,用括號包圍鏈接的 URL 地址。例如:[鏈接文本](URL 地址)。
    • 編程獅[編程實戰(zhàn)訓(xùn)練營](https://www.o2fo.com/codecamp)像玩游戲一樣學(xué)習(xí)編程。
      嘗試一下 ?
    • 富文本 :使用 HTML 的 <a> 標(biāo)簽和其 href 屬性。例如:<a href="URL 地址">鏈接文本</a>。
    • 編程獅<a href="http://www.o2fo.com/codecamp">編程實戰(zhàn)訓(xùn)練營</a>像玩游戲一樣學(xué)習(xí)編程。


    五、圖片

    • Markdown :使用感嘆號(!)引導(dǎo),然后是方括號指定圖片描述,括號后是括號包圍的圖片 URL 地址。例如:![圖片描述](圖片 URL 地址)。
    • ![編程獅logo](https://atts.w3cschool.cn/attachments/image/20201126/1606377797590612.png)
      嘗試一下 ?
    • 富文本 :使用 HTML 的 <img> 標(biāo)簽。例如:<img src="圖片 URL 地址" alt="圖片描述">。
    • <img src="https://atts.w3cschool.cn/attachments/image/20201126/1606377797590612.png" alt="編程獅logo" >

    六、代碼

    (一)行內(nèi)代碼塊

    • Markdown :使用反引號(?`???)包圍文本。例如:???`這是一段行內(nèi)代碼塊`?。
    • Markdown 的行內(nèi)代碼塊使用反引號(`?`???`)包圍文本。

    • 富文本 :使用 HTML 的 <code> 標(biāo)簽。例如:<code>這是一段行內(nèi)代碼塊</code>。
    • 富文本  的行內(nèi)代碼塊使用 HTML 的 <code><code></code> 標(biāo)簽。


    七、塊引用

    • Markdown :使用右箭頭(>)引導(dǎo)塊引用。例如:

      • > 這是一段塊引用的文本。
        這是同一塊引用的文本。
      嘗試一下 ?
    • 富文本 :使用 HTML 的 <blockquote> 標(biāo)簽。例如:

      • <blockquote>
        <p>這是一段塊引用的文本。</p>
        <p>這是同一塊引用的文本。</p>
        </blockquote>



    八、表格

    • Markdown :使用豎線(|)來分隔列,用破折號(-)創(chuàng)建分隔線。例如:

      • | 表頭 1 | 表頭 2 | 表頭 3 |
        |------|-------|------|
        | 單元格 1 | 單元格 2 | 單元格 3 |
        | 單元格 4 | 單元格 5 | 單元格 6 |
    • 富文本 :使用 HTML 的 <table>、<tr><th>、<td> 等標(biāo)簽。例如:

      • <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 :使用符號 ^ 來創(chuàng)建腳注,例如:這段文字有一個腳注[^1]。[^1]: 這是腳注的內(nèi)容。

    • 這段文字有一個腳注[^1]。[^1]: 這是腳注的內(nèi)容。

      嘗試一下 ?

    • 富文本 :需要手動創(chuàng)建腳注標(biāo)記和鏈接,或者使用專門的樣式來定義腳注。例如:

      • <p>這段文字有一個腳注<sup><a href="#fn1" id="fnref1">1</a></sup>。</p>
        <p id="fn1">這是腳注的內(nèi)容<sup><a href="#fnref1">?</a></sup></p>


    十、符號

    • Markdown :使用 HTML 實體來插入符號,例如:
    • &nbsp;(無寬度空格) &copy;(版權(quán)符號) &trade;(商標(biāo)符號)

    • 富文本 :同樣使用 HTML 實體,例如:
    • &nbsp; &copy; &trade;


    十一、表情符號

    • Markdown :使用簡短的代碼來插入表情符號,例如:??
    • 富文本 :通常需要直接使用表情符號的 Unicode 字符,或者使用 HTML 實體,例如:??


    十二、行重新

    • Markdown :在文本的末尾添加兩個或多個空格,然后按下回車鍵,可以實現(xiàn)硬換行。例如:
    • 這是一段文本  
      這是下一行文本

    • 富文本 :不需要特殊語法,直接按下回車鍵即可換行。

    十三、任務(wù)列表

    • Markdown :使用符號 - [ ] 或者 * [ ] 來創(chuàng)建任務(wù)列表。例如:

      • - [x] 已完成的任務(wù)
        - [ ] 未完成的任務(wù)
        
        * [x] 已完成的任務(wù)
        * [ ] 未完成的任務(wù)
    • 富文本 :通常需要手動添加對勾符號或使用 CSS 樣式來模擬任務(wù)列表。

    通過以上對照,我們可以看到 Markdown 和富文本各有其特點和優(yōu)勢。Markdown 語法簡潔,易于學(xué)習(xí)和使用,適合快速編寫和排版文本;而富文本則在樣式和功能上更為豐富,能夠滿足更復(fù)雜的排版需求。在實際應(yīng)用中,我們可以根據(jù)具體需求選擇合適的文本格式,以達(dá)到最佳的效果。


    0 人點贊