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前端开发互动1946bv1946、原创1946bv1946伟德游戏下载、资源分享、疑难解答、最新技术、招聘信息等,旨在为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://开头,仅在前端网中有效,其他平台均无效。 上传图片的视频1946bv1946伟德游戏下载:
图片格式:
上传演示:
附件上传后,点击对应的按钮即可插入下载地址到文档中。同样,附件地址用的是前端网自定义协议,attach://开头,仅在前端网文章内容中有效,其他位置均无效。具体操作请看下方视频1946bv1946伟德游戏下载:
插入脚注非常简单,只要你会引用式链接,脚注就会写。首先格式和引用式一样,只不过中括号[]里必须是必须是^开始,在加注的地方,只需要写脚注名称即可,然后在文本的任意位置(一般在最后)添加脚注说明,脚注前必须有对应的脚注名字。案例如下:
这里有没有内容都行,这个随便,主要的是后面的中括号[^脚注名称1] 这里有没有内容都行,这个随便,主要的是后面的中括号[^脚注名称2] 这里有没有内容都行,这个随便,主要的是后面的中括号[^脚注名称3] [^脚注名称1]: 这里就是脚注内容了,随便写点什么吧 [^脚注名称2]: 这是第二个脚注内容 [^脚注名称3]: 不用说,这里就是第三个脚注内容了 注意:脚注内容之间必须空一行,不然会将所有的脚注内容视为1个。成功后会1946bv1946伟德备用地址,即使你没有把注脚写在文末,经转换显示后,也会自动归类到文章的最后。建议这种脚注之类的引用都放到正文最后,方便统一管理。
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特殊字符,具体请点击编辑器工具栏对应图标即可。