高逼格写作Markdown标记详解

在前面

如果你还不了解 Markdown 是什么，那么现在就是最好的时机去了解它，想象一下你用写文档或者说明资料的时候的场景，用txt编写是非常简洁且容易的，但是写出来的格式不够好看，使用Office软件写出来好看，但并不方便（因为你要去调整各种格式），而且对于程序员来说，用Office来插入代码段简直是一场噩梦。

那么，你的救世主来了，使用 Markdown 吧，可以让你像写 txt 一样方便，写出支持代码段、表格、插入图片、链接、甚至是数学公式，但又有着Office效果的排版，你唯一需要做的，就是记住这篇文章里列出来的这些标记方法。

虽然头条还未支持 Markdown 格式书写，但在例如简书，CSDN等平台都逐步增加了对Markdown的支持，至于使用什么工具来书写，在另一篇文章《如何快速写出高质量文档（Markdown篇）》里有讲述，如果你没有下载任何软件，那么创建一个txt文件就可以写了，最后记得把后缀改为md哦。

标记段落

这里的“段落”是指在你的文章里，显示的是一种内容的形式，比如标题，正文，图片，图表等。

标题

支持2种样式使用下划线（= 或 -）?

这是一级标题==========这是二级标题
----------

使用井字符（#）?

# 这是一级标题 
## 这是二级标题 
###### 这是六级标题

另外，你还可以在后面也加上井字符来让格式看起来更好看?

# 这是一级标题 # 
## 这是二级标题 ## 
###### 这是六级标题 ######

效果图

6个等级的标题显示效果

段落和换行符

段落是一个或多个连续的文本行，由一个或多个空行分隔。
空行可以是任何形式的空行，一个换行符，若干个空格符，或者Tab制表符，任何被认为是空的字符；
可以使用以下2种方式：

使用两个或多个空格结束，然后敲回车；
使用 <br /> 标记；

不推荐使用无意义的换行来分隔段落，可以使用列表的方式会呈现更好的效果；

引用

使用的方式借鉴了电子邮件中的格式，右尖括号（>）来包括一段文字：

> 这里是一段引用的文字

显示出来的效果就是本段落标题“引用”2个字的显示效果；
当引用文字特别长跨越了多行的时候，在每行开头添加一个标记符号（>）；
引用符号可以嵌套来使用，还可以嵌入其他Markdown标记元素，包括标题，列表，代码块等?

> ## 这是内嵌的标题 
> 
> 这是内嵌的列表 
> 1. 第一项 
> 2. 第二项 
> 
> > 内嵌的引用效果

列表

支持有序和无序的两种列表
无序列表可以使用以下3种方式，他们的效果是一样的

1. 使用星号（*）?

   * 第一项 
   * 第二项 
   * 第三项

2. 使用加号（+）?

  + 第一项
  + 第二项
  + 第三项

3. 使用连字符（-）?

  - 第一项 
  - 第二项 
  - 第三项

?有序列表则直接使用编号后面加点（.）来表达使用编号（N.）?

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

?特别的，这里的数字对于输出的结果并没有什么影响，如果你先写3后写1，或者都写1，结果都一样。
列表从最最左边开始，最多可以缩进3个空格，但标记符号后必须跟一个或多个空格。
如果列表项之间有一个空行，则显示出来的表单项会被段落标记 <p> 包裹：?

  * 第一项
    (这里至少空了一行，则表示包裹了至少一个段落， 
     它可以包裹多个段落，但每个后续的段落都必须 
     缩进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个等号包括起来的部分可以显示出标记效果。?

这里有一个==标记==的文字。

分割线

使用以下几种方式都可以创建一条分割线
使用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(){
 // 执行代码
});

或者

$(function(){
 // 执行代码
});

JavaScript 入口函数:

window.onload=function () {
 // 执行代码
}

区别：

? jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

? JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

Query 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

avaScript概述

1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.

二 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、变量命名,首字符只能是字母,下划线,$美元符三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写，x与X是两个变量　

常量：直接在程序中出现的数据值

标识符：

由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
常用于表示函数、变量等的名称
例如：_abc,$abc,abc,abc123是标识符，而1abc不是
JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符

2.3.1 数字类型(number)

不区分整型数值和浮点型数值;
所有数字都采用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++表达式执行后的值为3，x--表达式执行后的值为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 流程控制

顺序结构(从上向下顺序执行)
分支结构
循环结构

2.5.1 顺序结构

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

2.5.1 分支结构

if-else结构：

if (表达式){
   语句１;
   ......
   } else{
   语句２;
   .....
   }

功能说明：如果表达式的值为true则执行语句1,否则执行语句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 循环结构

for循环：

语法规则：

    for(初始表达式;条件表达式;自增或自减)
    {
            执行语句
            ……
    }

功能说明：实现条件循环，当条件成立时，执行语句1，否则跳出循环体

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

while循环：

语法规则：

while (条件){
    语句1；
    ...
}

功能说明：运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环；同样支持continue与break语句。

2.5.3 异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

三 JavaScript的对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript"); 
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//数组对象
</script>

3.1 String对象

字符串对象创建

字符串创建(两种方式)
① 变量=“字符串”
② 字串对象名称=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 数组创建

创建数组的三种方式：

在线咨询

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

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商