【Markdown简单语法练习】

Markdown语法简单练习

1.Markdown简介
2.六级标题及空格
- 2.1 六级标题#开头
- 2.2 六级标题h标签
- 2.3 空格(四种空格三种代码风格)
- - 2.3.1 插入细空格
  - 2.3.2 单个空格
  - 2.3.3 两个空格
  - 2.3.4 四个空格
  - 2.3.5 细+1+2+4
3.字体样式，分割线与段落
- 3.1 字体样式
- - 3.1.1 字体大小
  - 3.1.2 字体
  - 3.1.3 字体颜色
  - 3.1.4 修饰
  - - 3.1.4.1斜体
    - 3.1.4.2加粗
    - 3.1.4.3粗斜体
- 3.2 分割线
- - 3.2.1 ~~删除线~~
  - 3.2.2 下划线u标签
  - 3.2.3 脚注（插入文献时可使用）
- 3.3 段落
4.链接与图片
- 4.1链接
- 4.2图片
5.表格
6.代码
7.列表及制作待办事项To-do List
- 7.1列表
- 7.2制作待办事项To-do List
8.流程图、序列图、甘特图
- - 8.1.2横向流程图
  - 8.1.3标准流程图源码格式（竖向）
  - 8.1.4标准流程图源码格式（横向）
- 8.2序列图
- 8.3甘特图
9.Markdown高级技巧（内嵌HTML+共识+对齐方式）
- 9.1支持的HTML元素
- 9.2公式
- 9.3对齐方式
- 9.3.1居中
- 9.3.2左对齐
- 9.3.3右对齐
- 9.3.4居中

[转载加练习声明]
————————————————
版权声明：本文为CSDN博主「云疏不知数」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接

1.Markdown简介

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯(英语：John Gruber)。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

2.六级标题及空格

2.1 六级标题#开头

#一级标签
##二级标签
###三级标签
####四级标签
#####五级标签
######六级标签

2.2 六级标题h标签

一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

2.3 空格(四种空格三种代码风格)

2.3.1 插入细空格

- -
- -
- -

2.3.2 单个空格

- -
- -
- -

2.3.3 两个空格

- -
- -
- -

2.3.4 四个空格

- -
- -
- -

2.3.5 细+1+2+4

- -
- -
- -
- -

3.字体样式，分割线与段落

3.1 字体样式

3.1.1 字体大小

字体大小通过font标签的size属性限制，取值[1,7]
font标签实际上也是内嵌的HTML标签

字体大小

字体大小也可以通过内嵌html的sapn标签的font-size属性修改，理论上没有大小限制，因为是像素取值
'font-size:24px’和size = 5几乎一样大

字体大小

3.1.2 字体

通过font标签的face属性限制，常用字体演示：

我是黑体
我是宋体
我是微软雅黑
我是华文彩云

字体也可以通过内嵌html的span标签的font-family属性修改
英文：Arial，‘Times New Roman’
中文：微软雅黑（Microsoft YaHei），宋体（SimSun）
例如：宋体是衬线体，微软雅黑是非衬线体

宋体微软雅黑

3.1.3 字体颜色

CSDN中只支持渲染font标签的文字颜色（而且标题颜色不能被font修改），在有道云笔记中都是支持的

CSDN标题颜色不能被font标签修改，可以这样弄

字体颜色通过font标签的color的取值可以是颜色的英文单词也可以是16进制色彩取值范围：[#000000,#FFFFFF]

三个16进制颜色网站传送门:

16进制颜色RUNOOB传送门
16进制颜色W3school
16进制颜色参考网站传送门

red
orange
yellow
gree
blue
purple
靛

字体也可以通过内嵌html的span标签的color属性修改，取值也是颜色的英文单词也可以是16进制色彩值

字体颜色红

字体颜色靛

3.1.4 修饰

3.1.4.1斜体

斜体

在p标签中的文字不能用**加粗，可以使用i标签限制加粗

双向链表

3.1.4.2加粗

加粗

在p标签中的文字不能用****加粗，可以使用strong标签限制加粗

双向链表

3.1.4.3粗斜体

粗斜体

在p标签中的文字不能用******同时加粗和斜体，可以使用strong标签限制加粗

双向链表

3.2 分割线

你好

你好

3.2.1 删除线

删除线

3.2.2 下划线u标签

带下划线文本

3.2.3 脚注（插入文献时可使用）

淡泊明志¹
宁静致远²

3.3 段落

段落的换行是使用两个以上空格机上回车，也可以使用br标签换行，或者使用内置HTML的p标签保留段落格式，首行缩进用空格

第一段…
第二段…

第一段… 第二段…

以上是直接书写段落手动控制段落方式，也可以直接用内嵌HTML的P
标签，p表示paragraph段落的意思，避免了段落间手动换行的麻烦

第一段第二段

4.链接与图片

4.1链接

链接其实和超链接差不多，支持本地文件目录路径及去网络URL

链接名
CSDN用户远山青青
直接使用链接地址
https://blog.csdn.net/qq_40448131?type=blog

很明显链接名的方式更为美观
也可以使用内嵌HTML的a标签

CDSN用户远山青青

4.2图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hKrvFNJk-1649345302300)(链接)]

还可以利用内嵌HTML的img标签，这里不讨论HTML样式，MD不支持
src指"source"，源属性的值是图像的URL地址
alt属性用来为图像定义一串预备的可替换的文本
width属性用来指定图像宽度
height属性用来指定图像高度

5.表格

Tables Are Cool

col 3 is right-aligned $1600

col 2 is centered $12

zebra stripes are neat $1

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Tables a b

1 2222222 3333

1111111 22 333333

Tables	a	b
1	2222222	3333
1111111	22	333333

也可以使用HTML的table

异常描述

std::exception 该异常是所有标准C++异常的父类

std::bad_alloc 该异常可以通过new抛出

std::bad_cast 该异常可以通过dynamic_cast抛出

std::bad_typeid 理论上可以通过读取代码来检测到的异常

std::logic_error 当使用了一个无效的数学域时，会抛出该异常

std::domain_error 当使用了无效的参数时，会抛出该异常

异常	描述
std::exception	该异常是所有标准C++异常的父类
std::bad_alloc	该异常可以通过new抛出
std::bad_cast	该异常可以通过dynamic_cast抛出
std::bad_typeid	理论上可以通过读取代码来检测到的异常
std::logic_error	当使用了一个无效的数学域时，会抛出该异常
std::domain_error	当使用了无效的参数时，会抛出该异常

6.代码

代码高亮使用一对限制起来就行，必须是英文符号并且后面还可以加代码语言限制，cpp,java,python,css…等等，加上在CSDN显示的代码风格和高亮是不同的(可不加)

# include <iostream>
......
...

class A{}

7.列表及制作待办事项To-do List

7.1列表

列表目录

六级标题及空格

字体样式与段落

链接与图片

表格

代码

7.2制作待办事项To-do List

本质上还是列表，只不过在列表基础上加了[]

[x] 表示已做
[ ] 表示未做，不能漏掉中间的空格
不在代码行里写才有正常效果

项目1
- 任务1
- 任务2
项目2
- 项目2
- 项目3

8.流程图、序列图、甘特图

>流程图、序列图、甘特图需要一对```限制，有的markdown内核，需要在第一个···后加mermaid才能正确识别 #### 8.1流程图 ##### 8.1.1竖向流程图

#mermaid-svg-PdnOV1l46H25UMD5 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-PdnOV1l46H25UMD5 .error-icon{fill:#552222;}#mermaid-svg-PdnOV1l46H25UMD5 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-PdnOV1l46H25UMD5 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-PdnOV1l46H25UMD5 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-PdnOV1l46H25UMD5 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-PdnOV1l46H25UMD5 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-PdnOV1l46H25UMD5 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-PdnOV1l46H25UMD5 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-PdnOV1l46H25UMD5 .marker.cross{stroke:#333333;}#mermaid-svg-PdnOV1l46H25UMD5 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-PdnOV1l46H25UMD5 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-PdnOV1l46H25UMD5 .cluster-label text{fill:#333;}#mermaid-svg-PdnOV1l46H25UMD5 .cluster-label span{color:#333;}#mermaid-svg-PdnOV1l46H25UMD5 .label text,#mermaid-svg-PdnOV1l46H25UMD5 span{fill:#333;color:#333;}#mermaid-svg-PdnOV1l46H25UMD5 .node rect,#mermaid-svg-PdnOV1l46H25UMD5 .node circle,#mermaid-svg-PdnOV1l46H25UMD5 .node ellipse,#mermaid-svg-PdnOV1l46H25UMD5 .node polygon,#mermaid-svg-PdnOV1l46H25UMD5 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-PdnOV1l46H25UMD5 .node .label{text-align:center;}#mermaid-svg-PdnOV1l46H25UMD5 .node.clickable{cursor:pointer;}#mermaid-svg-PdnOV1l46H25UMD5 .arrowheadPath{fill:#333333;}#mermaid-svg-PdnOV1l46H25UMD5 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-PdnOV1l46H25UMD5 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-PdnOV1l46H25UMD5 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-PdnOV1l46H25UMD5 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-PdnOV1l46H25UMD5 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-PdnOV1l46H25UMD5 .cluster text{fill:#333;}#mermaid-svg-PdnOV1l46H25UMD5 .cluster span{color:#333;}#mermaid-svg-PdnOV1l46H25UMD5 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-PdnOV1l46H25UMD5 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

条件1

条件2

条件3

start

步骤一

条件决策

情况1

情况2

情况3

8.1.2横向流程图

#mermaid-svg-97FLRbfmDP7ngvYM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-97FLRbfmDP7ngvYM .error-icon{fill:#552222;}#mermaid-svg-97FLRbfmDP7ngvYM .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-97FLRbfmDP7ngvYM .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-97FLRbfmDP7ngvYM .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-97FLRbfmDP7ngvYM .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-97FLRbfmDP7ngvYM .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-97FLRbfmDP7ngvYM .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-97FLRbfmDP7ngvYM .marker{fill:#333333;stroke:#333333;}#mermaid-svg-97FLRbfmDP7ngvYM .marker.cross{stroke:#333333;}#mermaid-svg-97FLRbfmDP7ngvYM svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-97FLRbfmDP7ngvYM .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-97FLRbfmDP7ngvYM .cluster-label text{fill:#333;}#mermaid-svg-97FLRbfmDP7ngvYM .cluster-label span{color:#333;}#mermaid-svg-97FLRbfmDP7ngvYM .label text,#mermaid-svg-97FLRbfmDP7ngvYM span{fill:#333;color:#333;}#mermaid-svg-97FLRbfmDP7ngvYM .node rect,#mermaid-svg-97FLRbfmDP7ngvYM .node circle,#mermaid-svg-97FLRbfmDP7ngvYM .node ellipse,#mermaid-svg-97FLRbfmDP7ngvYM .node polygon,#mermaid-svg-97FLRbfmDP7ngvYM .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-97FLRbfmDP7ngvYM .node .label{text-align:center;}#mermaid-svg-97FLRbfmDP7ngvYM .node.clickable{cursor:pointer;}#mermaid-svg-97FLRbfmDP7ngvYM .arrowheadPath{fill:#333333;}#mermaid-svg-97FLRbfmDP7ngvYM .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-97FLRbfmDP7ngvYM .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-97FLRbfmDP7ngvYM .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-97FLRbfmDP7ngvYM .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-97FLRbfmDP7ngvYM .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-97FLRbfmDP7ngvYM .cluster text{fill:#333;}#mermaid-svg-97FLRbfmDP7ngvYM .cluster span{color:#333;}#mermaid-svg-97FLRbfmDP7ngvYM div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-97FLRbfmDP7ngvYM :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

a=1

a=2

方形

圆角

条件a

结果1

结果2

横向流程图

8.1.3标准流程图源码格式（竖向）

Created with Raphaël 2.3.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno

8.1.4标准流程图源码格式（横向）

Created with Raphaël 2.3.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno

8.2序列图

CSDN的序列图UML要在```后加mermaid

#mermaid-svg-p3CGPaQ7tIrpeb8z {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-p3CGPaQ7tIrpeb8z .error-icon{fill:#552222;}#mermaid-svg-p3CGPaQ7tIrpeb8z .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-p3CGPaQ7tIrpeb8z .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-p3CGPaQ7tIrpeb8z .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-p3CGPaQ7tIrpeb8z .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-p3CGPaQ7tIrpeb8z .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-p3CGPaQ7tIrpeb8z .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-p3CGPaQ7tIrpeb8z .marker{fill:#333333;stroke:#333333;}#mermaid-svg-p3CGPaQ7tIrpeb8z .marker.cross{stroke:#333333;}#mermaid-svg-p3CGPaQ7tIrpeb8z svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-p3CGPaQ7tIrpeb8z .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-p3CGPaQ7tIrpeb8z text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-p3CGPaQ7tIrpeb8z .actor-line{stroke:grey;}#mermaid-svg-p3CGPaQ7tIrpeb8z .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-p3CGPaQ7tIrpeb8z .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-p3CGPaQ7tIrpeb8z #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-p3CGPaQ7tIrpeb8z .sequenceNumber{fill:white;}#mermaid-svg-p3CGPaQ7tIrpeb8z #sequencenumber{fill:#333;}#mermaid-svg-p3CGPaQ7tIrpeb8z #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-p3CGPaQ7tIrpeb8z .messageText{fill:#333;stroke:#333;}#mermaid-svg-p3CGPaQ7tIrpeb8z .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-p3CGPaQ7tIrpeb8z .labelText,#mermaid-svg-p3CGPaQ7tIrpeb8z .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-p3CGPaQ7tIrpeb8z .loopText,#mermaid-svg-p3CGPaQ7tIrpeb8z .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-p3CGPaQ7tIrpeb8z .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-p3CGPaQ7tIrpeb8z .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-p3CGPaQ7tIrpeb8z .noteText,#mermaid-svg-p3CGPaQ7tIrpeb8z .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-p3CGPaQ7tIrpeb8z .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-p3CGPaQ7tIrpeb8z .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-p3CGPaQ7tIrpeb8z .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-p3CGPaQ7tIrpeb8z .actorPopupMenu{position:absolute;}#mermaid-svg-p3CGPaQ7tIrpeb8z .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-p3CGPaQ7tIrpeb8z .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-p3CGPaQ7tIrpeb8z .actor-man circle,#mermaid-svg-p3CGPaQ7tIrpeb8z line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-p3CGPaQ7tIrpeb8z :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}studyreviewhave you done and Are you ready to be boss?I have a high grasp of knowladge.loop[每天]studyreview

8.3甘特图

CSDN甘特图需要在```后加上mermaid

Mon 07Mon 14Mon 21Mon 28明确需求更进开发走查测试初期阶段中期阶段后期阶段产品计划表

9.Markdown高级技巧（内嵌HTML+共识+对齐方式）

9.1支持的HTML元素

CSDN 支持 kbd 标签，有道云目前不支持

使用 Ctrl+Alt+Del 重启电脑

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号

\反斜线
`反引号
*星号
_下划线
{} 花括号
[] 方括号
() 小括号
#井字号
+加号
-减号
.英文句点
! 感叹号

9.2公式

f(x)=\int_{2}^{+\infty} \frac{dx}{x\cdot \sqrt[3]{x^2-3x+2}}

9.3对齐方式

段落，使用align属性限制，align取值“center”，“left”和“right”字符串分别为中左右。文字居中还可以使用center标签限制。

9.3.1居中

中

9.3.2左对齐

左

9.3.3右对齐

右

9.3.4居中

诶嘿

align取值：

值	描述
left	把图像对齐到左边
right	把图像对齐到右边
middle	把图像与中央对齐
top	把图像与顶部对齐
bottom	把图像与底部对齐

图片加链接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ppNsSiT-1649345302321)(图片地址)]

小白 ↩︎
新锐 ↩︎