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

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

反饋

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

Markdown 簡介

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

富文本簡介

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

一、文本格式

（一）加粗

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 ：使用數(shù)字符號（#）表示標題級別，一個 # 表示最高級標題，最多可以有六個層級。例如：
- ```
# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題
```
  嘗試一下 ?

富文本 ：使用 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 ：使用數(shù)字加上英文句點（.）來表示有序列表項。例如：
- ```
1. 列表項 1
2. 列表項 2
3. 列表項 3
```
嘗試一下 ?

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

<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> 標簽和其 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> 標簽。例如：<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> 標簽。例如：<code>這是一段行內(nèi)代碼塊</code>。

富文本  的行內(nèi)代碼塊使用 HTML 的 <code><code></code> 標簽。

七、塊引用

Markdown ：使用右箭頭（>）引導(dǎo)塊引用。例如：
- ```
> 這是一段塊引用的文本。
這是同一塊引用的文本。
```
嘗試一下 ?

富文本 ：使用 HTML 的 <blockquote> 標簽。例如：

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

八、表格

Markdown ：使用豎線（|）來分隔列，用破折號（-）創(chuàng)建分隔線。例如：

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

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

嘗試一下 ?

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

<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;（商標符號）

富文本 ：同樣使用 HTML 實體，例如：

十一、表情符號

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ù)具體需求選擇合適的文本格式，以達到最佳的效果。

編程基礎(chǔ)

0 人點贊

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

Markdown 簡介

富文本簡介

一、文本格式

（一）加粗

（二）斜體

二、標題

三、列表

（一）無序列表

（二）有序列表

四、超鏈接

五、圖片

六、代碼

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

七、塊引用

八、表格

九、腳注

十、符號

十一、表情符號

十二、行重新

十三、任務(wù)列表

一、文本格式

二、標題

三、列表

四、超鏈接

五、圖片

六、代碼

七、塊引用

八、表格

九、腳注

十、符號

十一、表情符號

十二、行重新

十三、任務(wù)列表