1、前端网(QDFuns)(以下简称“本站”、“QDFuns” 或 “前端网”,网址:www.qdfuns.com),使用的MarkDown语法并非标准的MarkDown语法,因为标准语法虽然满足大部分书写需求,但还有不足,咱们对其进行了 “升级”,并兼容标准语法。也就是说标准的MarkDown代码,在本站100%能够解析使用;而升级的语法,在标准语法中也能够正常显示,并不影响原来的排版。

2、这份文档部分内容派生于 《Markdown 语法说明 (简体中文版)》,前端网对其内容进行了修改。

以下文档内容,如有侵权,请 联系我们 ,我们将第一时间修改或删除侵权内容。
标准的目录语法是[TOC]独占一行,本站暂时不支持此语法且会过滤此标签,因为文章页面会在设计好的位置根据标题自动生成目录。

Markdown 支持两种标题的语法,类似于 Setextatx 形式。

这是H1
========
这是 H2
--------

任何数量的 =- 都可以有效果,这种方式只能表示H1和H2。类 Atx 形式则是在行首插入 1 到 6 个# ,对应到标题 1 到 6 阶,例如:

# 这是 H1
## 这是 H2
###### 这是 H6

你可以选择性地「闭合」类 atx 样式的标题,这纯粹只是美观用的,若是觉得这样看起来比较舒适,你就可以在行尾加上 #,而行尾的 # 数量也不用和开头一样(行首的井字符数量决定标题的阶数):

# 这是 H1 # 
## 这是 H2 ## 
### 这是 H3 ##### #

一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行。比方说,若某一行只包含空格和制表符,则该行也会被视为空行)。

前端网是一个专注于Web前端开发行业的综合性门户网站,以"互联网标准化"为目标,致力于推动前端开发在互联网的发展,通过众多专业的服务形式,服务于中国互联网产业,以推动Web标准在中国的发展。自创建以来吸引了众多Web前端开发工程师的加盟,引领着中国互联网的标准化潮流。

如何想要段落缩进两个字,只需要在每个段落前打2个或2个以上的空格即可。

  内容涵盖Web前端开发互动笔记、原创教程、资源分享、疑难解答、最新技术、招聘信息等,旨在为Web前端开发工程师及爱好者提供一个信息交流、经验分享、互帮互助的平台,不断追求更完善的用户体验,打造国内Web前端开发行业最专业的一站式服务平台!

你可以在一行中用3个或以上的星号*、中横线- 或 下划线_来建立一个分隔线,行内不能有其他东西,空格除外。下面每种写法都可以建立分隔线:

* * *

***

*****

- - -

---

---------------------------------------

MarkDown本不支持添加 文字颜色背景色,有些编辑器只能通过写HTML才能使其加入颜色,目前咱们继承了 BBCODE 颜色设置形式,这种形式与MarkDown较为接近。

[color=#ff0000]这是红色文字[/color] 
[bgcolor=#ff0000]这是红色背景颜色[/bgcolor]

颜色可以简写,同我们写CSS颜色值一样,例如:

[color=#f00]这是红色文字 简写方式[/color] 
[bgcolor=#f00]这是红色背景颜色 简写方式[/bgcolor]

语法也可以混搭,例如文字黑底白字,代码如下:

[bgcolor=#000][color=#fff]黑底白字[/color][/bgcolor] 

标签谁包裹谁都一样: 
[color=#fff][bgcolor=#000]黑底白字[/bgcolor][/color] 

大部分MD内容均支持颜色包裹,比如标题: 
# [color=#f00]红色的 H1 标题[/color] 
## [color=#f00]红色的 H2 标题[/color] ##

有些标签不支持文字颜色或背景色,比如图片、代码或流程图等

Markdown 使用星号*和下划线_作为标记强调字词的符号,被*_包裹的字词会被转成用 <em>两个*_包起来的话,则会被转成 <strong>,例如:

__这是加粗字体__ 
**这个也是加粗** 

*这是斜体* 
_这个也是斜体_

强调也可以直接插在文字中间:

你可以随便用 **你喜欢的样式**,唯一的限制是,_你用什么符号开启标签,就要用什么符号结束_。另外为了保证文章中语法 __一致性__,推荐加粗或斜体使用 **统一语法**,避免造成混乱。就像刚才这句话中的加粗,有的使用两个星号,有的使用两个下划线,虽然都能加粗,但并不推荐这种写法。

如果标记两边都有* 空白 *的话,它们就只会被当成 * 普通 * 的符号,就像现在这样。

\*如果要在文字前后直接插入普通的星号或底线,你可以用反斜线就像现在这样。\*

语法超简单,使用 两个~包裹的字词会转换为 <del> 标签包裹。

华妃:“这段代码好像Bug不少啊...”
颂芝:“奴才听说,这代码好像要删掉才行。”
华妃:“周宁海...,去,把标记好的这段代码删掉!”
~~var fuZi = new People();~~
周宁海:“喳!”

开头使用 >的内容均为引用,例如:

>这里开始引用了
就算换行,这里还是算引用内容
无论多少行

直到,有其他块级别元素,如表格或空两行为止

一般为了美观,为了美观,通常在>之后加入1个空格并每一行都加入一个>

> 床前明月光,
> 疑是地上霜。
> 举头邀明月,
> 低头思故乡。

多个>引用的内容就形成了嵌套:

>>>>> 这是嵌套的引用内容

图片的创建方式与超链接相似,而且格式和超链接极为接近。支持两种写法,行内式(链接语法是:[链接标题](URL),图片语法是![alt配置属性][URL]) 和 引用式(参考式)(链接语法是:[链接标题][标记],图片语法是![alt配置属性][标记])。这两种在那个写法直接在参考链接即可。

现在,我们主要说一下图片独有的配置选项,这些选项在标准的MarkDown中是没有的,因为这些配置选项都在alt属性中,因此就算把文章复制到其他不支持此写法的MarkDown编辑器中,视觉效果也不受一丝影响。

![图片ALT配置](https://cdn.static.qdfuns.com/images/about/markdown/demo2.jpg)

#### 引用式 且 图片尺寸强制设置为 100x40:
![图片ALT配置|100x40][flag]

#### 图片居中
![图片说明|center](https://cdn.static.qdfuns.com/images/about/markdown/demo1.jpg)
![图片说明|center|100xauto](https://cdn.static.qdfuns.com/images/about/markdown/demo2.jpg)

#### 文字左环绕 且 宽度固定,高度自适应:
![图片说明|left textwrap|100xauto](https://cdn.static.qdfuns.com/images/about/markdown/demo2.jpg)书屋正中的墙上挂着一幅画,画着一棵古松,树底下卧着一只梅花鹿。画前面是先生的座位,一张八仙桌,一把高背椅子,桌子上照从前的样子,放着笔墨纸砚和一把戒尺。学生的书桌是从自己家里搬来的,分列在四面,鲁迅的那一张在东北角上。当年鲁迅就在那里读书、习字。有时还画画,把纸蒙在《西游记》一类的小说上描绣像。

#### 引用式 文字右环绕 且 高度固定,宽度自适应:
![图片说明|autox100|right textwrap][flag]鲁迅的书桌上刻着一个小小的“早”字。字横着,很像一个还没开放的花骨朵,又像一支小小的火把。这个“早”字有一段来历∶鲁迅的父亲害了病,鲁迅一面上书塾读书,一面帮着母亲料理家务,几乎天天奔走于当铺和药铺之间,把家里的东西拿到当铺去换了钱,再到药铺去给父亲买药。有一天早晨,鲁迅上学迟到了。教书认真的寿镜吾老先生严厉地对他说∶“以后要早到!”鲁迅默默地回到座位上,就在那张旧书桌上刻了个“早”字,也把一个坚定的信念深深地刻在心里。从那以后,鲁迅上学再没有迟到过,而且时时早,事事早,毫不松弛地奋斗了一生。

[flag]: https://cdn.static.qdfuns.com/images/about/markdown/demo1.jpg

通过上面的代码,我们可以了解到在标准语法的alt位置,进行图片设置:图片说明|left textwrap|100xauto,可以配置图片的alt属性,尺寸和文字环绕(left textwrap,textwarp left,right textwrap 和 textwrap right),这三个位置都不固定,没有顺序,谁在前后都一样,通过|分割配置

注意:通过编辑器上传的图片,用的是前端网自定义协议,attimg://开头,仅在前端网中有效,其他平台均无效。

上传图片的视频教程:

图片格式:
上传演示:

附件上传后,点击对应的按钮即可插入下载地址到文档中。同样,附件地址用的是前端网自定义协议,attach://开头,仅在前端网文章内容中有效,其他位置均无效。具体操作请看下方视频教程:

插入脚注非常简单,只要你会引用式链接,脚注就会写。首先格式和引用式一样,只不过中括号[]里必须是必须是^开始,在加注的地方,只需要写脚注名称即可,然后在文本的任意位置(一般在最后)添加脚注说明,脚注前必须有对应的脚注名字。案例如下:

这里有没有内容都行,这个随便,主要的是后面的中括号[^脚注名称1]
这里有没有内容都行,这个随便,主要的是后面的中括号[^脚注名称2]
这里有没有内容都行,这个随便,主要的是后面的中括号[^脚注名称3]

[^脚注名称1]: 这里就是脚注内容了,随便写点什么吧

[^脚注名称2]: 这是第二个脚注内容

[^脚注名称3]: 不用说,这里就是第三个脚注内容了

注意:脚注内容之间必须空一行,不然会将所有的脚注内容视为1个。成功后会发现,即使你没有把注脚写在文末,经转换显示后,也会自动归类到文章的最后。建议这种脚注之类的引用都放到正文最后,方便统一管理。

Markdown 支持 有序列表无序列表待办事项

无序列表:

无序列表使用星号*、加号+或是减号-作为列表标记,接着在后方加入1个或n个空格后写内容即可,例如:

* 前端网
* 谷歌
* 苹果
* 优酷
* 土豆
* 阿里巴巴

等同于

+ 前端网
+ 谷歌
+ 苹果
+ 优酷
+ 土豆
+ 阿里巴巴

也等同于

- 前端网
- 谷歌
- 苹果
- 优酷
- 土豆
- 阿里巴巴
有序列表:

有序列表跟无序列表格式几乎一样,只不过把符号换成了正整数(以下简称数字),并紧跟着一个英文句点和1...n个空格后,再写内容即可,例如:

1. 第一条列表内容
2. 第二条列表内容
3. 第三条列表内容

有趣但很重要的一点是,你在列表标记上使用的数字并不会影响输出的 HTML 结果,无论你用数字几编号,都是按照1 2 3这样编号,请看下方几个案例:

3. 第一条列表内容
2. 第二条列表内容
1. 第三条列表内容

等同于

100. 第一条列表内容
500. 第二条列表内容
900. 第三条列表内容

上面这两个例子的最终输出结果都是:
1 第一条列表内容
2 第二条列表内容
3 第三条列表内容

待办事项:

同样,待办事项跟无序列表格式几乎一样,只不过把符号换成了- [ ]- [x],并紧跟着1...n个空格后,再写内容即可,前面的-可以是-+*均可,例如:

- [x] 任务1
+ [x] 任务2
- [x] 任务3
* [ ] 任务4
- [ ] 任务5

待办事项列表前面符号是[x]的项目将会有一个选中的复选框样式,反之如果是[ ],那么就是一个未选中的复选框样式。

注意:[ ] 不能写成 [],中括号里必须是1个空格。

在MarkDown中创建表格,非常简单,先来一个4行3列的表格代码瞅瞅:

|  姓名   |年龄     |    性别|
| - | -|- |
|小王|20|男 |
|小红| 18|女|
| 小明|22 |男|

等同于

| 姓名 | 年龄 | 性别 |
| --- | --- | --- |
| 小王 | 20 | 男 |
| 小红 | 18 | 女 |
| 小明 | 22 | 男 |

也等同于

| 姓名 | 年龄 | 性别 |
| --------------- | --------- | ------------------ |
| 小王 | 20 | 男 |
| 小红 | 18 | 女 |
| 小明 | 22 | 男 |
显示结果:
姓名 年龄 性别
小王 20
小红 18
小明 22

第一行为表头,第二行分隔表头和主体部分,期间的中横线-必须1...n个,第三行开始每一行为一个表格行。

想要让表格内容实现左对齐,水平居中或右对齐,很简单,就是1...n个中横线-的左边、右边或两边各一个英文冒号:即可,比如:-是左对齐,-:是右对齐,:-:表示水平居中,例子如下

| 姓名 | 年龄 | 性别 |
| :--- | :---: | ---: |
| 小王 | 20 | 男 |
| 小红 | 18 | 女 |
| 小明 | 22 | 男 |
显示结果:
姓名 年龄 性别
小王 20
小红 18
小明 22

代码有两种展现方式,分别是 行内式代码区,前者多用于单行代码,使用一对儿重音符`(键盘左上角,ESC键下方的~键,同一个键)包含;后者多用于多行代码,有更丰富的功能,使用6个`,前面3个后面3个包含。

行内式:
大家帮我看一下 `var obj = new Object();` 这句代码,不知道是什么意思,
代码区:
```
function Foo(){
    getName = function(){alert(1);};
    return this;
}

var getName;//只提升变量声明
function getName(){alert(5);}//提升函数声明,覆盖var的声明

Foo.getName = function(){alert(2);};
Foo.prototype.getName = function(){alert(3);};
getName = function(){alert(4);};//最终的赋值再次覆盖function getName声明

getName();//最终输出4
```

上面这段代码的格式没有指定语言(如JavaScript),也没有标注为可运行,因此只能用于显示,且只有一个复制代码的按钮,具体可以看后面的视频或在编辑器中查看演示。下面的例子,就指定了语言,但没有指定可运行。

```javascript
function Foo(){
    getName = function(){alert(1);};
    return this;
}

var getName;//只提升变量声明
function getName(){alert(5);}//提升函数声明,覆盖var的声明

Foo.getName = function(){alert(2);};
Foo.prototype.getName = function(){alert(3);};
getName = function(){alert(4);};//最终的赋值再次覆盖function getName声明

getName();//最终输出4
```

如何想要其可运行,只需要在名称后面跟上一个:run即可。

```js:run
function Foo(){
    getName = function(){alert(1);};
    return this;
}

var getName;//只提升变量声明
function getName(){alert(5);}//提升函数声明,覆盖var的声明

Foo.getName = function(){alert(2);};
Foo.prototype.getName = function(){alert(3);};
getName = function(){alert(4);};//最终的赋值再次覆盖function getName声明

getName();//最终输出4
```

注意:如果您的代码只有js,且有一些console.logalert之类的输出,就是用javascript:run 即可。代码类型写js和javascript都是一样的。

支持QQ、Emoji表情 和 HTML特殊字符,具体请点击编辑器工具栏对应图标即可。