MarkDown（+HTML）寫作小結

阿新 • • 發佈：2019-01-10

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose.HTML is a publishing

format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed inplain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. —must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented withtabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

Daring Fireball創始人John Gruber關於Markdown的設計初衷的闡述可以看出，Markdown 是為了更簡單方便地書寫 HTML ，使我們更加專注於內容寫作本身。
Markdown 提煉出日常記錄行文所需的一套簡單的格式標籤集，使用純文字符號標記即可進行快速排版，將我們從繁重的格式排版中解放出來，可作為日常筆記、速記的輕量級寫作工具（Lightweight markup language）。
在 GitHub, Reddit, StackOverflow、JianShu 等一大批網站的影響下，Markdown在網際網路上應用廣泛，已經成為事實上的網路寫作標準。例如，專為印象筆記（Evernote）打造的Markdown編輯器——馬克飛象，配合印象筆記強大的儲存和同步功能，帶來前所未有的書寫體驗；GitHub 上每個工程要求提供Markdown格式的README.md檔案，作為專案首頁的說明文件。
Markdown教程可參考《Markdown Tutorials》；Markdown編輯器可參考《Markdown Editors》。

Markdown差不多可以滿足日常筆記、速記、寫作以及撰寫部落格需求，若某些文字需要以富文字形式渲染，可以直接在 Markdown 中嵌入 HTML 。
本文在開源免費的 macdown 下編輯完成，梳理 markdown 和 HTML 對應標籤及日常撰寫部落格時可能用到的 HTML 補充富文字實現。內容由 markdown + HTML 混排，只能先匯出為 HTML 檔案，再貼過來，有些格式損失。

1 HTML 註釋：

HTML 以\<!--開頭，以--\>結尾的閉包定義註釋，不在正文中顯示。
下面這句註釋你是看不到的：

2 markdown 空格

由於在markdown中空格大部分時候都是起著排版控制作用，因此沒法在行首或格式控制符之後輸入空格。
此時，可直接輸入HTML entities中的空格佔位符：

en space, U+2002 ISOpub
半方大的空白&ensp;或 
em space, U+2003 ISOpub
全方大的空白&emsp;或 
no-break space = non-breaking space, U+00A0 ISOnum
不斷行的空白格 或

一般行首輸入兩個全形空格（&emsp;）或四個半形空格（ ）進行縮排即可。

3 HTML 超連結

3.1 錨點：<a>...</a>

定義和用法
<a> 標籤用來實現跳轉到指定錨點(anchor)或超連結（hyperlink）。
<a> 元素最重要的屬性是 href 屬性，它指示連結的目標，可以是頁內錨點，也可以是另一個站點頁面。

markdown對應標記

Inline超鏈
markdown採用[]()來定義超連結，中括號內是超連結文字標題，小括號內是超連結地址：[title](href)。我們稱這種為Inline方式超鏈。
Reference超鏈
與頁內錨點對應的另一種是Reference方式的索引超鏈：
兩個中括號[title][anchor]，第二個中括號中定義頁內錨點名稱（索引）；然後在其他地方採用[anchor]:href的格式定義anchor實際指向的錨點位置（href）。
自動超鏈
用尖括號包裹url，這樣生成的url錨文字就是url本身，例如部落格、郵箱地址。

示例

3.2 圖片：<img />

定義和用法
img 元素向網頁中嵌入一幅影象。
請注意，從技術上講，<img> 標籤並不會在網頁中插入影象，而是從網頁上鍊接影象。
<img> 標籤建立的是被引用影象的佔位空間。
<img> 標籤有兩個必需的屬性：src 屬性和 alt 屬性。

屬性	值	描述
alt	text	規定影象的替代文字。
src	URL	規定顯示影象的 URL。

markdown對應標記
markdown插入圖片與插入連線的語法很像，區別在一個!號。
markdown採用![]()來插入圖片，中括號內是圖片替代的文字，小括號內是圖片地址：![alt](src)。

示例

4 HTML 標題：<h1> - <h6>

定義和用法
標題（Heading）是通過 <h1> - <h6> 標籤進行定義的。
<h1> 定義最大的標題，<h6> 定義最小的標題。
因為使用者可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文件結構是很重要的，搜尋引擎則使用標題為您的網頁的結構和內容編制索引。
一般論文或部落格文件結構到3級即可，可參考《畢業論文的國家標準格式與通用格式》、《發表論文通用格式》和《期刊論文格式》。

markdown對應標記
markdown一行文字開頭以#標記1級標題，以##標記2級標題，...，以######標記6級標題。

如果一行文字下面一行為三個或以上等號（===），則該行文字升級為1級標題（#）；

This is an H1

如果一行文字下面一行為三個或以上減號（---），則該行文字升級為2級標題（##）。

This is an H2

示例
以下是典型的HTML body內容文件結構：

title

1

1.1

1.1.1

（1）

（2）

*

1.1.2

（1）

（2）

*

2

2.1

2.1.1

（1）

*

5 HTML 文字格式

5.1 強調文字：<em>...</em>

This text is emphasized

斜體：<i>
- 定義和用法
  <i> 標籤顯示斜體文字效果。
  <i> 標籤和基於內容的樣式標籤 <em> 類似。它告訴瀏覽器將包含其中的文字以斜體字（italic）或者傾斜（oblique）字型顯示。如果這種斜體字對該瀏覽器不可用的話，可以使用高亮、反白或加下劃線等樣式。
- 示例
  This text is italic
- markdown對應標記
  markdown中採用星號（*）或下劃線（_）對包圍的文字進行斜體化。
  This text is italic

5.2 重要文字：<strong>...</strong>

This text is strong

粗體：<b>
- 定義和用法
  <b> 標籤規定粗體文字。
- 示例
  This text is bold
- markdown對應標記
  markdown中採用雙星號（**）或雙下劃線（__）對包圍的文字進行粗體化。
  This text is bold
  使用<b><i>巢狀（對應markdown三星號包圍）可設定粗斜體：
  This text is italic bold

5.3 突出顯示文字：<mark>...</mark>

This text is mark

5.4 改變字號

5.4.1 加大字號：<big>...</big>

定義和用法
<big> 標籤呈現大<big>號字型效果，使用 <big> 標籤可以很容易地放大字型。
瀏覽器顯示包含在 <big> 標籤和其相應的 </big> 標籤之間的文字時，其字型比周圍的文字要大一號。但是，如果文字已經是最大號字型，這個 <big> 標籤將不起任何作用。
更妙的是，可以巢狀 <big> 標籤來放大文字。每一個 <big> 標籤都可以使字型大一號，直到上限 7 號文字。

示例
This text is normal.
This text is big.
This text is normal.

5.4.2 減小字號：<small>...</small>

定義和用法
<small> 標籤呈現小號字型效果。<small> 標籤和它所對應的 <big> 標籤一樣，但它是縮小字型而不是放大。
如果被包圍的字型已經是字型模型所支援的最小字號，那麼 <small> 標籤將不起任何作用。
與 <big> 標籤類似，<small> 標籤也可以巢狀，從而連續地把文字縮小。每個 <small> 標籤都把文字的字型變小一號，直到達到下限的一號字。

示例
This text is normal.
This text is small.
This text is normal.

5.5 腳標

5.5.1 上腳標：<sup>...</sup>

指數冪示例：
2⁰=1;
2¹=2;
2²=4;
...

5.5.2 下腳標：<sub>...</sub>

分步計數原理公式：
N=m₁ x m₁ x m₁ x ... x m_n

5.6 下劃線：<u>...</u>

定義和用法
<u> 標籤可定義下劃線文字。

HTML 與 XHTML 之間的差異
在 HTML 4.01 中，u 元素是不被推薦使用的。
在 XHTML 1.0 Strict DTD 中，u 元素是不被支援的。
提示和註釋：
註釋：請儘量避免為文字加下劃線 - 使用者會把它混淆為一個超連結！

示例
This text is underline.

5.7 刪除線：<del>...</del>

定義和用法
定義文件中已被刪除的文字。

提示和註釋：註釋：請與 <ins> 標籤配合使用，來描述文件中的更新和修正。

示例

一打有二十十二件。

6 HTML 排版控制

6.1 HTML 水平線：<hr>

定義和用法
<hr> 標籤在 HTML 頁面中建立用於分隔內容的水平線，無需閉合。

示例

HTML: 這段文字上下各有一條水平線（<hr>）分割。

markdown對應標記
markdown行若只有三個連續的星號（***）或下劃線（___）則表示橫線。

markdown: 這段文字上下各有一條水平線分割（上行***/下行___）。

注意
markdown中三個連續減號（---）上面一行如果是空行，則也繪製分割線；如果上面一行有文字，則上面一行升級為2級標題（##）。

6.2 HTML 換行：<br />

定義和用法
<br> 可插入一個簡單的換行符。
標籤是空標籤，意味著它沒有結束標籤，因此這是錯誤的：<br></br>。
在 XHTML 中，把結束標籤放在開始標籤中，也就是 <br />。
請注意，<br> 標籤只是簡單地開始新的一行，而當瀏覽器遇到

標籤時，通常會在相鄰的段落之間插入一些垂直的間距。

markdown對應標記
markdown在文字末尾連續輸入兩個空格即可換行，否則預設和下一行連在一起。

示例

這是第一行.
這是第二行.
這是第三行.

6.3 HTML 段落：<p>...</p>

定義和用法

標籤定義段落。
p 元素會自動在其前後建立一些空白。瀏覽器會自動新增這些空間，您也可以在樣式表中規定。

示例

我胯下的白馬疾如閃電，那是遠古的曠野。

我從你的眼前掠過，甚至你看不清我的容顏。
只有我背上銀色的劍鞘，在陽光下瞬間閃耀的光芒。

我一定要在黃昏之前到達，我要看看你，我的愛人。
在夕陽裡嬌豔的容顏，和風鈴響起時迎風曼舞的衣裙。

6.4 HTML 分割槽/節：<div>...</div>

定義和用法
<div> 可定義文件中的分割槽或節（division/section）。<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。

用法
<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。
實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。

示例
以下示範將三級標題著色為紅色，內容段落著色為藍色：

3.5.1 紅色的標題

藍色的文字

6.5 HTML 對齊：align屬性

定義和用法
align 屬性規定元素（<h1> - <h6>、<div>）的水平對齊方式。

瀏覽器支援
儘管不推薦使用 align 屬性，但是所有瀏覽器都支援該屬性。
相容性註釋
在 HTML 4.01 中，不推薦使用 <h1> - <h6> 元素的 align 屬性；在 XHTML 1.0 Strict DTD 中，不支援 <h1> - <h6> 元素的 align 屬性。請使用 CSS 代替。
CSS 語法：<h1 style="text-align:right">

這段文字居左顯示。這段文字居中顯示。這段文字居右顯示。

7 HTML 引用

7.1 作品標題：<cite>...</cite>

定義和用法
<cite> 標籤通常表示它所包含的文字對某個參考文獻的引用，比如書籍或者雜誌的標題。
按照慣例，引用的文字將以斜體顯示。
用 <cite> 標籤把指向其他文件的引用分離出來，尤其是分離那些傳統媒體中的文件，如書籍、雜誌、期刊，等等。如果引用的這些文件有聯機版本，還應該把引用包括在一個 <a> 標籤中，從而把一個超連結指向該聯機版本。

示例

《富春山居圖》由黃公望始畫於至正七年(1347)，於至正十年完成。

7.2 短引用：<q>...</q>

定義和用法
<q> 標籤定義不需要段落分隔的短引用（行內引用）。
瀏覽器經常在引用的內容周圍新增引號。

示例
毛澤東說過：帝國主義都是紙老虎 ...

cite屬性
q 元素中的 cite 屬性指定了引用的來源，但主流瀏覽器均不支援 cite 屬性，可以當做註釋用：

Here is a quote from WWF's website:

WWF's ultimate goal is to build a future where people live in harmony with nature.

We hope that they succeed.

7.3 塊引用：<blockquote>...</blockquote>

定義和用法
<blockquote> 標籤定義摘自另一個源的塊引用。<blockquote> 與 </blockquote> 之間的所有文字都會從常規文字中分離出來，經常會在左、右兩邊進行縮排，而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。

示例

愛上一個人
戀上一座城

cite屬性
同 q 元素中的 cite 屬性。

markdown對應標記
markdown中以>開始的文字為塊引用：

//
// main.m
// HelloWorld
//
// Created by faner on 15/8/30.
// Copyright © 2015年 faner. All rights reserved.
//

#import

int main(int argc, const char * argv[]) {
@autoreleasepool {
// insert code here...
NSLog(@"Hello, World!");
}
return 0;
}

注意：

每行後面需要新增兩個空格斷行。
#號前面要加\轉義。
直接複製過來的程式碼，行首的縮排格式丟失，需要自行補充空格佔位符。故一般不建議使用blockquote（>）標籤來引用原始碼。

引用標記可以巢狀使用：

夢

夢中夢

盜夢空間

<q> 與 <blockquote> 的區別
<q> 標籤在本質上與 <blockquote> 是一樣的。不同之處在於它們的顯示和應用。<q> 標籤用於簡短的行內引用。如果需要從周圍內容分離出來比較長的部分（通常顯示為縮排的塊），請使用 <blockquote> 標籤。

7.4 程式碼塊

以下是w3school中給出的“計算機輸出”標籤示例：

Computer code
Keyboard input
Teletype text
Sample text
Computer variable

註釋：這些標籤常用於顯示計算機/程式設計程式碼。

7.4.1 程式碼塊：<code>...</code>

定義和用法
<code> 標籤通常只是把文字變成等寬字型，但它暗示著這段文字是源程式程式碼。
如果只是希望使用等寬字型的效果，請使用 <tt> 標籤。
或者，如果想要在嚴格限制為等寬字型格式的文字中顯示程式設計程式碼，請使用 <pre> 標籤。

markdown對應標記
markdown對應`...`。

示例
心若沒有棲息的地方到哪裡都是流浪

#import <Foundation/Foundation.h>

int main(int argc, const char * argv[]) {
@autoreleasepool {
// insert code here...
NSLog(@"Hello, World!");
}
return 0;
}

注意：

每行後面需要新增兩個空格斷行。
#號前面要加\轉義；標頭檔案包含的尖括號也需要加\轉義。
markdown的`...`中間的兩個空格斷行無效：
心若沒有棲息的地方到哪裡都是流浪
直接複製過來的程式碼，行首的縮排格式丟失，需要自行補充空格佔位符。故一般也不建議使用code（``）標籤來引用原始碼。

7.4.2 程式碼塊：<pre>...</pre>

定義和用法
pre 元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。
<pre> 標籤的一個常見應用就是用來表示計算機的原始碼。
可以導致段落斷開的標籤（例如標題、<p> 和 <address> 標籤）絕不能包含在 <pre> 所定義的塊裡。
pre 元素中允許的文字可以包括物理樣式和基於內容的樣式變化，還有連結、影象和水平分隔線。當把其他標籤（比如 <a> 標籤）放到 <pre> 塊中時，就像放在 HTML/XHTML 文件的其他部分中一樣即可。

提示和註釋
提示：製表符（tab）在 <pre> 標籤定義的塊當中可以起到應有的作用，每個製表符佔據 8 個字元的位置。但是我們不推薦使用它，因為在不同的瀏覽器中，Tab 的實現各不相同。在用 <pre> 標籤格式化的文件段中使用空格，可以確保文字正確的水平位置。
提示：如果您希望使用 <pre> 標籤來定義計算機原始碼，比如 HTML 原始碼，請使用符號實體來表示特殊字元，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。
提示：在 W3School 中，非常多頁面中的原始碼例項都是通過 <pre> 標籤定義的。

markdown對應標記
markdown行首輸入四個連續空格即可實現<pre>對應的效果。

markdown行首輸入四個空格的效果：

那一年 你正年輕
總覺得明天肯定會很美

以下是使用<pre>...</pre>引用程式碼塊的示例：

//
//  main.m
//  EmptyApplication
//
//  Created by faner on 15/9/5.
//  Copyright © 2015年 faner. All rights reserved.
//

#import 
#import "AppDelegate.h"

int main(int argc, char * argv[]) {
    @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
    }
}

MarkDown（+HTML）寫作小結

1 HTML 註釋：

2 markdown 空格

3 HTML 超連結

3.1 錨點：<a>...</a>

3.2 圖片：<img />

4 HTML 標題：<h1> - <h6>

This is an H1

This is an H2

title

1

1.1

1.1.1

（1）

（2）

*

1.1.2

（1）

（2）

*

2

2.1

2.1.1

（1）

*

5 HTML 文字格式

5.1 強調文字：<em>...</em>

5.2 重要文字：<strong>...</strong>

5.3 突出顯示文字：<mark>...</mark>

5.4 改變字號

5.4.1 加大字號：<big>...</big>

5.4.2 減小字號：<small>...</small>

5.5 腳標

5.5.1 上腳標：<sup>...</sup>

5.5.2 下腳標：<sub>...</sub>

5.6 下劃線：<u>...</u>

5.7 刪除線：<del>...</del>

6 HTML 排版控制

6.1 HTML 水平線：<hr>

6.2 HTML 換行：<br />

6.3 HTML 段落：<p>...</p>

6.4 HTML 分割槽/節：<div>...</div>

3.5.1 紅色的標題

6.5 HTML 對齊：align屬性

7 HTML 引用

7.1 作品標題：<cite>...</cite>

7.2 短引用：<q>...</q>

7.3 塊引用：<blockquote>...</blockquote>

7.4 程式碼塊

7.4.1 程式碼塊：<code>...</code>

7.4.2 程式碼塊：<pre>...</pre>

相關推薦