腦圖和MarkDown

使用腦圖整理前端體系

根據以下網址整理
http://web.jobbole.com/84062/
http://naotu.baidu.com/

學習MarkDown語法格式

（一） 標題

在首行插入1-6個#，對應1到6階標題
例如：
#這是H1標題
##這是H2標題
######這是H6標題

（二） 列表

無序列表可以使用*（星號），+（加號），-（減號）來作為無序列表的標記
* Red
* Green
* Blue
等同於：
+ Red
+ Green
+ Blue
也等同於：
- Red
- Green
- Blue
產生結果是一樣的：
• Red
• Green
• Blue
有序列表用數字挨着一個英文句點再加一個空格表示：

1. Bird 
2. McHale 
3. Parish

標記上的數字和順序不會影響產生的結果
等同於：

 1. Bird 
 1. McHale 
 1. Parish

或甚至是：

 3. Bird 
 1. McHale 
 8. Parish

以上三種輸出結果都是：

 1. Bird 
 2. McHale 
 3. Parish

三、鏈接
方法一：
加入鏈接的文字用[方括號]來標記,后面緊跟圓括號來插入網址鏈接如果你還想要加上鏈接的 title 文字，只要在網址后面，用雙引號把 title 文字包起來即可，例如：

[This is the link](http://example.net/  “Title”)

同樣的主機資源的時候，可以使用相對路徑
方法二：
參考式的鏈接是在鏈接文字的括號后面再接上另一個方括號，而在第二個方括號里面要填入用以辨識鏈接的標記：

[This is the link][id]

兩個括號之間有沒有空格都可以
在文件的任意處把這個標記的鏈接內容定義出來：

[id]: http://example.net/  “Title”.

鏈接內容定義的形式為：
• 方括號（前面可以選擇性地加上至多三個空格來縮進），里面輸入鏈接文字
• 接着一個冒號
• 接着一個以上的空格或制表符
• 接着鏈接的網址
• 選擇性地接着 title 內容，可以用單引號、雙引號或是括弧包着
下面這三種鏈接的定義都是相同：

[foo]: http://example.com/ "Optional Title Here" 
[foo]: http://example.com/ 'Optional Title Here' 
[foo]: http://example.com/ (Optional Title Here)

方法三：
隱式鏈接標記功能讓你可以省略指定鏈接標記，這種情形下，鏈接標記會視為等同於鏈接文字，要用隱式鏈接標記只要在鏈接文字后面加上一個空的方括號，如果你要讓 "Google" 鏈接到 google.com，你可以簡化成：

[Google][]

空白的[]里面可以任意加內容，不受影響。
然后定義鏈接內容：

[Google]: http://google.com/

四、強調
Markdown 使用星號（*）和底線（_）作為標記強調字詞的符號，被* 或 _ 包圍的字詞會被轉成用 <em> 標簽包圍，用兩個 * 或_ 包起來的話，則會被轉成 <strong>，例如：

*single asterisks* 
_single underscores_ 
**double asterisks** 
__double underscores__

會轉成：

<em>single asterisks</em> 
<em>single underscores</em> 
<strong>double asterisks</strong> 
<strong>double underscores</strong>

你可以隨便用你喜歡的樣式，唯一的限制是，你用什么符號開啟標簽，就要用什么符號結束。
強調也可以直接插在文字中間：

un*frigging*believable

但是如果你的 * 和 _ 兩邊都有空白的話，它們就只會被當成普通的符號。
如果要在文字前后直接插入普通的星號或底線，你可以用反斜線：

\*this text is surrounded by literal asterisks\*

五、代碼
如果要標記一小段行內代碼，你可以用反引號把它包起來（`），例如：

Use the `printf()` function.

會產生：
``

Use the printf() function.

`` 如果要在代碼區段內插入反引號，你可以用多個反引號來開啟和結束代碼區段： ``` ``There is a literal backtick (`) here.`` ``` 這段語法會產生： ```

There is a literal backtick (`) here.

``` 代碼區段的起始和結束端都可以放入一個空白，起始端后面一個，結束端前面一個，這樣你就可以在區段的一開始就插入反引號： ``` A single backtick in a code span: `` ` `` A backtick-delimited string in a code span: `` `foo` `` ``` 會產生： ```

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

``` 在代碼區段內，& 和方括號都會被自動地轉成 HTML 實體，這使得插入 HTML 原始碼變得很容易，Markdown 會把下面這段： ``` Please don't use any ` ` tags. ``` 轉為： ```

Please don't use any tags.

``` 你也可以這樣寫： ``` `—` is the decimal-encoded equivalent of `—`. ``` 以產生： ```

— is the decimal-encoded equivalent of —.

```

六、分割線
你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號中間插入空格。減號必須有空格。下面每種寫法都可以建立分隔線：

* * * 
*** 
***** 
- - - 用減號表示的時候必須有空格
---------------------------------------這個是底線，之間可以沒有空格

七、引用：

> The overriding design goal for Markdown's
> formatting syntax is to make it as readable
> as possible. The idea is that a
> Markdown-formatted document should be
> publishable as-is, as plain text, without
> looking like it's been marked up with tags
> or formatting instructions.

轉化成：

The overriding design goal for Markdown's
formatting syntax is to make it as readable
as possible. The idea is that a
Markdown-formatted document should be
publishable as-is, as plain text, without
looking like it's been marked up with tags
or formatting instructions.

八、圖片
很明顯地，要在純文字應用中設計一個「自然」的語法來插入圖片是有一定難度的。
Markdown 使用一種和鏈接很相似的語法來標記圖片，同樣也允許兩種樣式： 行內式和參考式。
行內式的圖片語法：

![Alt text](/path/to/img.jpg) 
![Alt text](/path/to/img.jpg "Optional title")

詳細敘述如下：
• 一個驚嘆號 !
• 接着一個方括號，里面放上圖片的替代文字
• 接着一個普通括號，里面放上圖片的網址，最后還可以用引號包住並加上 選擇性的 'title' 文字。
參考式的圖片語法則長得像這樣：

![Alt text][id]

「id」是圖片參考的名稱，圖片參考的定義方式則和連結參考一樣：

[id]: url/to/image "Optional title attribute"

到目前為止， Markdown 還沒有辦法指定圖片的寬高，如果你需要的話，你可以使用普通的<img> 標簽

九、反斜杠
Markdown 可以利用反斜杠來插入一些在語法中有其它意義的符號，例如：如果你想要用星號加在文字旁邊的方式來做出強調效果（但不用 <em> 標簽），你可以在星號的前面加上反斜杠：
\*literal asterisks\*
Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號：

\ 反斜線
` 反引號
* 星號
_ 底線
{} 花括號
[] 方括號
() 括弧
# 井字號
+ 加號
- 減號
. 英文句點
! 驚嘆號

例如：
\*加油\* 轉為 *加油*