高逼格寫作Markdown標記詳解

在前面

如果你還不了解 Markdown 是什么，那么現在就是最好的時機去了解它，想象一下你用寫文檔或者說明資料的時候的場景，用txt編寫是非常簡潔且容易的，但是寫出來的格式不夠好看，使用Office軟件寫出來好看，但并不方便（因為你要去調整各種格式），而且對于程序員來說，用Office來插入代碼段簡直是一場噩夢。

那么，你的救世主來了，使用 Markdown 吧，可以讓你像寫 txt 一樣方便，寫出支持代碼段、表格、插入圖片、鏈接、甚至是數學公式，但又有著Office效果的排版，你唯一需要做的，就是記住這篇文章里列出來的這些標記方法。

雖然頭條還未支持 Markdown 格式書寫，但在例如簡書，CSDN等平臺都逐步增加了對Markdown的支持，至于使用什么工具來書寫，在另一篇文章《如何快速寫出高質量文檔（Markdown篇）》里有講述，如果你沒有下載任何軟件，那么創(chuàng)建一個txt文件就可以寫了，最后記得把后綴改為md哦。

標記段落

這里的“段落”是指在你的文章里，顯示的是一種內容的形式，比如標題，正文，圖片，圖表等。

標題

支持2種樣式使用下劃線（= 或 -）?

這是一級標題==========這是二級標題
----------

使用井字符（#）?

# 這是一級標題 
## 這是二級標題 
###### 這是六級標題

另外，你還可以在后面也加上井字符來讓格式看起來更好看?

# 這是一級標題 # 
## 這是二級標題 ## 
###### 這是六級標題 ######

效果圖

6個等級的標題顯示效果

段落和換行符

段落是一個或多個連續(xù)的文本行，由一個或多個空行分隔。
空行可以是任何形式的空行，一個換行符，若干個空格符，或者Tab制表符，任何被認為是空的字符；
可以使用以下2種方式：

使用兩個或多個空格結束，然后敲回車；
使用 <br /> 標記；

不推薦使用無意義的換行來分隔段落，可以使用列表的方式會呈現更好的效果；

引用

使用的方式借鑒了電子郵件中的格式，右尖括號（>）來包括一段文字：

> 這里是一段引用的文字

顯示出來的效果就是本段落標題“引用”2個字的顯示效果；
當引用文字特別長跨越了多行的時候，在每行開頭添加一個標記符號（>）；
引用符號可以嵌套來使用，還可以嵌入其他Markdown標記元素，包括標題，列表，代碼塊等?

> ## 這是內嵌的標題 
> 
> 這是內嵌的列表 
> 1. 第一項 
> 2. 第二項 
> 
> > 內嵌的引用效果

列表

支持有序和無序的兩種列表
無序列表可以使用以下3種方式，他們的效果是一樣的

1. 使用星號（*）?

   * 第一項 
   * 第二項 
   * 第三項

2. 使用加號（+）?

  + 第一項
  + 第二項
  + 第三項

3. 使用連字符（-）?

  - 第一項 
  - 第二項 
  - 第三項

?有序列表則直接使用編號后面加點（.）來表達使用編號（N.）?

  1. 第一項
  2. 第二項
  3. 第三項

?特別的，這里的數字對于輸出的結果并沒有什么影響，如果你先寫3后寫1，或者都寫1，結果都一樣。
列表從最最左邊開始，最多可以縮進3個空格，但標記符號后必須跟一個或多個空格。
如果列表項之間有一個空行，則顯示出來的表單項會被段落標記 <p> 包裹：?

  * 第一項
    (這里至少空了一行，則表示包裹了至少一個段落， 
     它可以包裹多個段落，但每個后續(xù)的段落都必須 
     縮進4個空格，或1個制表符） 
  * 第二項
    (如果包含了一個引用效果，則>符號也要縮進)
  * 第三項 
    (如果是代碼塊，需要縮進2次，即8個空格或者2個
     制表符)

還有一種情況，剛好你的開頭是一個數字，后面是一個句號的圓點（.），會被誤解轉成一個有序列表，這個時候需要使用轉義符（\）?

    1987\. 是一個偉大的年份

效果圖

無序列表和有序列表顯示效果

表格

使用豎線（|）和連字符（-）的組合來顯示
使用連字符分隔表格頭部

   |   標題1   |   標題2   |   標題3 | 
   | --------  | --------  |---------| 
   | 行1內容 | 行1內容 | 行1內容 |
   | 行2內容 | 行2內容 | 行2內容 |

?其中的連字符需要不少于3個，而豎線并不是必須對齊的，使用一定的空格是為了整體效果的好看
表格的寬度是自動適配的
效果圖

表格的顯示效果

代碼塊

使用3個反引號（`）來包裹一段代碼，代碼行的上面和下面都需要3個反引號，在上面3個反引號的后面還可以加上代碼語言，使用小寫字母表達

```javascript
    //實現一個加法邏輯 
    function add(num1, num2) {
            return num1 + num2; 
    }
```

?顯示效果：

代碼根據選擇語言自動高亮

圖片

使用感嘆號（！），中括號（[]）和小括號（()）的組合方式實現

 ![百度logo](https://www.baidu.com/img/logo.gif "提示") 
 ![百度logo](images\logo.gif)

?其中方括號內占位文字，當圖片未加載出來時顯示該文字；
小括號里的是圖片的鏈接，支持2種方式：

使用網絡 url 路徑指向的網絡圖片；
使用文件路徑（全路徑或相對路徑）指向的本地圖片；

使用雙引號可以增加鼠標放在上面的提示效果；
效果圖：

使用本地圖片顯示一張圖

鏈接

鏈接的表達與圖片相似，其實圖片也是一種鏈接，去掉前面的感嘆號后就是一個普通的鏈接了。
使用中括號（[]）和小括號（()）的組合

[點擊打開百度](http://www.baidu.com "顯示標題")

? 方括號中的內容是顯示的文本；
小括號中的內容是鏈接的地址；
小括號鏈接后雙引號內輸入顯示標題；

如果你只是想顯示鏈接的效果，而不是真的跳轉到某個地址，那么可以僅使用一組方括號
還可以定義文檔內的鏈接效果?

這是一個 [鏈接例子][markdown] 參考效果；
[markdown]: http://daringfireball.net/projects/markdown/syntax "作者網站"

注釋

使用HTML語言中的注釋標記，在某些功能如（hexo）中注釋有特殊的功能。

< ! -- 這一行是一行注釋 -- >

公式塊

有些markdown軟件支持公式功能，使用一對美元符號包裹起來，并輸入有效的公式?

$$ 
         f(x)=ax^2 + bx + c 
$$

流程圖

有的軟件還能支持流程圖的效果，如下代碼：

 flow
    st=>start: Start
    op=>operation: Your Operation
    cond=>condition: Yes or No?
    e=>end
    st->op->cond
    cond(yes)->e
    cond(no)->op

效果圖：

自動生成的流程圖

腳注

在書寫論文時，經常需要在合適的地方標注一下詞語的解釋，或者說明來源，此時需要腳注的效果，通過以下格式可以滿足：?

 這是一個來自約翰·格魯伯[^1]的網站 
 
 [^1]:Markdown語言的作者

任務列表

任務列表，就是常用的待辦事項，可以通過列表的變體來顯示，只需要在無序列表后面增加空格和一個中括號即可，注意這里的中括號中間需要有空格

  - [ ] 待辦事項1
  - [ ] 待辦事項2

標記格式

這里的“格式”是指對文章中的內容進行了增強的效果，比如加粗，傾斜，下劃線等。

加粗效果

有2種方式表達加粗的強調效果
使用2個星號（*）包裹，即前后4個?

 這是一個**重要**的內容。

?使用2個下劃線（_）包括，即前后4個?

這也是一個__強調__的內容。

?顯示效果：這是一個重要的內容。

傾斜效果

有2種方式表達加粗的強調效果
使用1個星號（*）包裹，即前后2個?

這是一個*引用*的內容。

使用1個下劃線（_）包括，即前后2個?

這也是一個_歪著_的內容。

顯示效果：這是一個歪著的內容。

下劃線

使用一組 <u> 標記來顯示下劃線效果，其實是使用了HTML的標記?

這是一個<u>下劃線</u>的文字效果。

刪除線

使用2個波浪線（~）來包裹一段文字，呈現出刪除線的效果?

這里顯示了一段~~刪除~~了的文字。

高亮效果

使用1個或者2個反引號包裹起來的部分會顯示出高亮的效果。?

這里有一個 `高亮` 的文字。

標記效果

使用2個等號包括起來的部分可以顯示出標記效果。?

這里有一個==標記==的文字。

分割線

使用以下幾種方式都可以創(chuàng)建一條分割線
使用3個或更多星號（*）
使用3個或更多連字符（-）?

********** 
----------

參考內容

最后，為了方便大家記憶，在另一篇文章《如何快速寫出高質量文檔（Markdown篇）》里有思維導圖可以更便捷的記住這些內容，這里也再貼出來一次。

Query 庫是一個 JavaScript 文件，您可以使用 HTML 的 <script> 標簽引用它：

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

jQuery 入口函數:

$(document).ready(function(){
 // 執(zhí)行代碼
});

或者

$(function(){
 // 執(zhí)行代碼
});

JavaScript 入口函數:

window.onload=function () {
 // 執(zhí)行代碼
}

區(qū)別：

? jQuery 的入口函數是在 html 所有標簽(DOM)都加載之后，就會去執(zhí)行。

? JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完后，才會執(zhí)行。

Query 語法是通過選取 HTML 元素，并對選取的元素執(zhí)行某些操作。

基礎語法： $(selector).action()

美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執(zhí)行對元素的操作

實例:

avaScript概述

1992年Nombas開發(fā)出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).后將其改名ScriptEase.(客戶端執(zhí)行的語言)
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發(fā)出一套livescript的腳本語言.Sun和Netscape共同完成.后改名叫Javascript
微軟隨后模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
為了統(tǒng)一三家,ECMA(歐洲計算機制造協(xié)會)定義了ECMA-262規(guī)范.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規(guī)范.

二 JavaScript的基礎

1 直接編寫
    <script>
        alert('hello yuan')
    </script>
2 導入文件
    <script src="hello.js"></script>

1、聲明變量時不用聲明變量類型. 全都使用var關鍵字;

var a;<br>a=3;

2、一行可以聲明多個變量.并且可以是不同類型

var name="yuan", age=20, job="lecturer";

3、聲明變量時可以不用var. 如果不用var 那么它是全局變量

4、變量命名,首字符只能是字母,下劃線,$美元符三選一，余下的字符可以是下劃線、美元符號或任何字母或數字字符且區(qū)分大小寫，x與X是兩個變量　

常量：直接在程序中出現的數據值

標識符：

由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
常用于表示函數、變量等的名稱
例如：_abc,$abc,abc,abc123是標識符，而1abc不是
JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符

2.3.1 數字類型(number)

不區(qū)分整型數值和浮點型數值;
所有數字都采用64位浮點格式存儲，相當于Java和C語言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±5 x 10 -324

整數：
在JavaScript中10進制的整數由數字的序列組成
精確表達的范圍是-9007199254740992 (-253) 到 9007199254740992 (253)
超出范圍的整數，精確度將受影響
浮點數：
使用小數點記錄數據
例如：3.4，5.6
使用指數記錄數據
例如：4.3e23=4.3 x 1023

16進制和8進制數的表達:
16進制數據前面加上0x，八進制前面加0;16進制數是由0-9,A-F等16個字符組成;8進制數由0-7等8個數字組成

16進制和8進制與2進制的換算:

2.3.2 字符串類型(string)

是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；常用特殊字符在字符串中的表達；
字符串中部分特殊字符必須加上右劃線\；常用的轉義字符 \n:換行 \':單引號 \":雙引號 \:右劃線

2.3.3 布爾類型(boolean)

Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
布爾值也可以看作on/off、yes/no、1/0對應true/false
Boolean值主要用于JavaScript的控制語句，例如：

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

2.3.4 Null & Undefined類型

Undefined類型

Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

當函數無明確返回值時，返回的也是值 "undefined";

Null類型

另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。

盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用于表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那么找不到該對象時，返回的通常是 null

2.4 運算符

算術運算符：
    +   -    *    /     %       ++        -- 

比較運算符：
    >   >=<    <=!======!==邏輯運算符：
     &&   ||   ！

賦值運算符：=+=-=*=/=字符串運算符：
    +  連接，兩邊操作數有一個或兩個是字符串就做連接運算

2.4.1 算術運算符

注意1: 自加自減

假如x=2，那么x++表達式執(zhí)行后的值為3，x--表達式執(zhí)行后的值為1；i++相當于i=i+1，i--相當于i=i-1；
遞增和遞減運算符可以放在變量前也可以放在變量后：--i

var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

注意2: 單元運算符

- 除了可以表示減號還可以表示負號例如：x=-y

+ 除了可以表示加法運算還可以用于字符串的連接例如："abc"+"def"="abcdef"

注意3: NaN

    var d="yuan";
    d=+d;
    alert(d);//NaN:屬于Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會得到一個NaN數據
    alert(typeof(d));//Number

    //NaN特點:
    
    var n=NaN;
    
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    
    alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=

2.4.2 比較運算符

> >=< <=!======!==

2.4.3 邏輯運算符

if (2>1 && [1,2]){
    console.log("條件與")
}

// 思考返回內容?
console.log(1 && 3);
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);

2.5 流程控制

順序結構(從上向下順序執(zhí)行)
分支結構
循環(huán)結構

2.5.1 順序結構

    <script>
        console.log(“星期一”);
        console.log(“星期二”);
        console.log(“星期三”);
    </script>

2.5.1 分支結構

if-else結構：

if (表達式){
   語句１;
   ......
   } else{
   語句２;
   .....
   }

功能說明：如果表達式的值為true則執(zhí)行語句1,否則執(zhí)行語句2

if-elif－else結構：

if (表達式1) {
    語句1;
}else if (表達式2){
    語句2;
}else if (表達式3){
    語句3;
} else{
    語句4;
}

switch-case結構

switch基本格式
switch (表達式) {
    case 值1:語句1;break;
    case 值2:語句2;break;
    case 值3:語句3;break;
    default:語句4;
}

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定義";
}

2.5.2 循環(huán)結構

for循環(huán)：

語法規(guī)則：

    for(初始表達式;條件表達式;自增或自減)
    {
            執(zhí)行語句
            ……
    }

功能說明：實現條件循環(huán)，當條件成立時，執(zhí)行語句1，否則跳出循環(huán)體

for( 變量 in 數組或對象)
    {
        執(zhí)行語句
        ……
    }

while循環(huán)：

語法規(guī)則：

while (條件){
    語句1；
    ...
}

功能說明：運行功能和for類似，當條件成立循環(huán)執(zhí)行語句花括號{}內的語句，否則跳出循環(huán)；同樣支持continue與break語句。

2.5.3 異常處理

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執(zhí)行。
    //e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
     //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執(zhí)行。
}

三 JavaScript的對象

在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創(chuàng)建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基于對象實現的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript"); 
//創(chuàng)建字符串對象
var cc=new Date();
//創(chuàng)建日期對象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//數組對象
</script>

3.1 String對象

字符串對象創(chuàng)建

字符串創(chuàng)建(兩種方式)
① 變量=“字符串”
② 字串對象名稱=new String (字符串)

var str1="hello world";

var str1=new String("hello word");

字符串對象的屬性和函數

       x.length         －－－－獲取字符串的長度

 x.toLowerCase()        －－－－轉為小寫
 x.toUpperCase()        －－－－轉為大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index為要獲取的字符索引

x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，如果沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果為"world"
                        alert(str3);     // 結果為15
                        

－－－－子字符串處理方法

x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置

x.slice(start, end)     －－－－切片操作字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果為"cd"
                            
                            alert(str3); //結果為"efgh"
                            
                            alert(str4); //結果為"cdefg"
                            
                            alert(str5); //結果為"fg"

x.replace(findstr,tostr) －－－－    字符串替換

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果為"二"
                                
x.concat(addstr)         －－－－    拼接字符串

3.2 Array對象

3.2.1 數組創(chuàng)建

創(chuàng)建數組的三種方式：

在線咨詢

上一篇：HTML5移動端的消息提示層
下一篇：更多的全局屬性《HTML5系列教程9》

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商