Markdown 练习
Markdown 练习
标题
h1 标题1
h2 标题2
h3 标题3
h4 标题4
h5 标题5
h6 标题6
一级标题
二级标题
段落
段落换行是使用 两个空格加回车
test Enter
test Enter
或者在句子的结尾加上 <br/[即支持html 标签]
test
水平线/分割线
语法:
___
---
***
文本样式
加粗
语法:
**加粗的文字**
__加粗的文字__
加粗的文字
加粗的文字
斜体
语法:
*斜体文字*
_斜体文字_
斜体文字
斜体文字
自带删除线&下划线
删除线文字
~~删除线文字~~
下划线文字
<u>下划线文字</u>
删除线文字
下划线文字
高亮
==高亮文字==
高亮文字
键盘样式
<kbd>Ctrl</kbd>
Ctrl
上标 /下标
1^2^ = 1
2^2^ = 4
100~$~
12 = 1
22 = 4
100$
注释
居中
<center>这一行需要居中</center>
脚注
通过使用脚注的方式,为一些特定的文字,在鼠标悬浮时,显示注明的解释信息
格式:
...注明的文字[^脚注名]...
[^脚注名]:注明的信息
鲁迅[1]先生是我国著名的文学家...
列表
无序列表
使用 星号[*] ,加号[+]或者是减号[-] 作为列表标记:
- 第一项
- 第二项
- 第三项
- 第一项
- 第二项
- 第三项
- 第一项
- 第二项
- 第三项
有序列表
使用数字加上 . 号来表示:
- 第一项
- 第二项
- 第三项
列表嵌套
列表嵌套只需要在子列表中的选项前添加四个空格即可
- 第一项
- 第一项嵌套的第一个元素
- 第二项嵌套的第一个元素
- ...
- 第二项
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
- ...
区块
区块引用是在段落的开头使用 > 符号,然后后面紧跟一个空格符号:
> 区块引用内容
区块引用
百度一下
百度一下,你就知道
区块嵌套
区块是可以嵌套的,一个 >符号表示最外层,两个> 符号表示第一层的第一层嵌套,以此类推:
语法:
> 最外层
> > 第一层嵌套
> > > 第二层嵌套
> > > > ...以此类推
最外层
第一层嵌套
第二层嵌套
...以此类推
区块中使用列表
语法:
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> * 第三项
> + 第四项
> - 第五项
最外层
第一层嵌套
第二层嵌套
...以此类推
列表中使用区块
如果要在列表项目中放进区块,那么需要在>前添加四个空格的缩进
语法:
* 第一项
> markdown 区块1
> markdown 区块2
+ 第二项
> markdown 区块1
> markdown 区块2
- 第一项
markdown 区块1
markdown 区块2
- 第二项
markdown 区块1
markdown 区块2
Markdown 代码
如果段落上有一个函数或者片段的代码,可以用反引号(`)把它包起来,例如:
`printf()` 函数
printf() 函数
代码区块
使用四个空格或者一个制表符(Tab键).
例如:
public static void mian(String[] args){
System.out.println("Hello,World!");
}
也可以使用``` 包裹一段代码,并指定一种语言,也可以不指定:
```java
//java代码
```
```
//代码内容
```
$(document).ready(function(){
alert('javascript代码');
})
Markdown 链接
语法:
[链接名称](链接地址)
或者
<链接地址>
这是个链接指向-->百度一下
这是个链接指向-->https://baidu.com
高级链接
链接可以使用变量来替代,文档末尾附带变量地址:
这个链接用 **百度地址** 作为网址变量[baidu][百度地址]
[百度地址]:https://baidu.com
这个链接用 百度地址 作为网址变量baidu
链接索引
<span id='test'> 锚点 </span>
[跳转至锚点](#test)
锚点
跳转至锚点
Markdown 图片
Markdown 图片语法格式如下:
-
-
 -
图片显示错误
图片网址变量
也可以像网址一样对图片网址使用变量
这个链接 用 `image` 作为网址变量![百度logo][image]
然后在文档的结尾为变量赋值(网址)
[image]: https://www.baidu.com/img/baidu_jgylogo3.gif
这个链接 用 image 作为网址变量
然后在文档的结尾为变量赋值(网址)
图片<img>标签
也可以使用 html 的img标签为图片设置更多样式:宽度,高度 等等
<img
src='图片url'
title='鼠标悬浮文字'
alt='图片加载错误文字'
widht='宽度 px/百分比' height='高度 px/百分比'
style='更多css 样式 如: zoom =[比例缩放]80%'
/>
Markdown 表格
markdown 制作表格使用 | 来分隔不同的单元格,使用 -来分隔表头和其他行
语法格式如下:
| 表头 | 表头 |
| ------ | ------ |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
简便方式:
|表头|表头|
|-|-|
|单元格|单元格|
|单元格|单元格|
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
简便方式:
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
| 单元格 | 单元格 |
| ... |
对齐方式
可以设置表格的对齐方式:
-:设置内容和标题栏居右对齐:-设置内容和标题栏局左对齐:-:设置内容和标题栏居中对齐
|左对齐|居中对齐|右对齐|
|:-|:-:|-:|
|左|中|右|
| 左对齐 | 居中对齐 | 右对齐 |
|---|---|---|
| 左 | 中 | 右 |
表格 <table> 标签
markdown 对于一些复杂的表格操作无法支撑,如合并单元格等,这时可以使用 html 标签中的 table 标签 配合使用
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td colspan='2'> 使用 <strong>colspan</strong> 合并两个横行单元格</td>
</tr>
<tr>
<td rowspan="2">使用 <strong>rowspan</strong> 合并两列单元格</td>
<td>单元格</td>
</tr>
<tr>
<td> 使用 <strong> < br /> </strong> <br/> 换行</td>
</tr>
</table>
| 表头1 | 表头2 |
|---|---|
| 单元格 | 单元格 |
| 使用 colspan 合并两个横行单元格 | |
| 使用 rowspan 合并两列单元格 | 单元格 |
| 使用 < br /> 换行 |
|
Markdown 勾选项
可以通过 - [ ] 使用勾选框, 例如:
- [ ] 北京
- [ ] 上海
- [ ] 广州
- [ ] 深圳
- [x] 表示默认选中
- [ ] 表示默认不选中
Markdown 高级技巧
支持html 元素
不在Markdown涵盖范围之内的标签,都可以直接在文档里面使用html 撰写
目前支持的HTML元素有: <kbd> , <b> , <i> , <em> , <sup> ,<sub> , <br> 等....
如:
使用 <kbd> Ctrl</kbd> + <kbd> Alt </kbd> + <kbd> Del </kbd> 重启电脑
加粗: <b> 加粗 </b>
斜体: <i> 斜体i </i> , <em> 斜体em </em>
上缀: 10 <sup> sup </sup>
下缀: 10 <sub> sub </sub>
...
使用 Ctrl + Alt + Del 重启电脑
加粗: 加粗
斜体: 斜体i , 斜体em
上缀: 10 sup
下缀: 10 sub
iframe 窗体嵌套
<iframe
height='高度px'
title='窗体标题'
src='窗体内显示的页面网址'
style='width:宽度px'
...
>
</iframe>
音视频标签支持
video标签
<video
controls='控制元件显示 true|false'
autoplay='自动播放 false|true'
src='资源路径'
type='资源类型'
width='宽度px'
height='高度px'
...
>
</video>
<video
controls='false'
autoplay='false'
src='http://qukufile2.qianqian.com/data2/video/57390cc4d50c0b9417d12dbf77ebc463/670071317/670071317.mp4'
type='voideo/mp4'
width='100%'
height='500px'
embed&audio标签
<embed
height="高度px"
width="宽度"
autostart='自动播放 true|false'
src="资源路径"
hidden="是否隐藏面板 no|true"
/>
<audio controls>
<source
src="资源路径"
type="资源类型 [audio/mpeg]"
>
</audio>
转义
markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符, markdown使用 反斜杠 转义特殊字符
**文本加粗**
\*\*正常显示星号\*\*
文本加粗
**正常显示星号**
markdown 支持以下符号前面加上反斜杠来帮助插入普通符号:
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
数学公式支持
当需要插入数学公式是,可以使用两个美元符号 $$ 包裹 Tex 或 LaTex格式的数学公式来实现 具体可以参考LaTeX数学公式
LaTeX 数学公式
Gamma公式展示 $ \Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通过 Euler integral
图表支持
插入甘特图
插入顺序图 - sequenceDiagram
插入Mermaid流程图
流程图 graph
该语句声明一个新图和图布局的方向。
这声明了一个从上到下（
TD或TB）定向的图形。graph TD Strat --> Stop
- TB-顶底
- BT-底顶
- RL-右左
- LR-左右
- TD-与TB相同
图形
节点之间的链接
节点可以通过链接/边缘连接。可以具有不同类型的链接，也可以将文本字符串附加到链接。
类图 UML classDiagram
在软件工程中，统一建模语言（UML）中的类图是一种静态结构图，它通过显示系统的类，其属性，操作（或方法）以及对象之间的关系来描述系统的结构
示例
句法
类
UML 提供了 表示类成员的机制, 例如 属性 和方法, 以及有关它们的其他信息. 图中一个类的单个实例包含三个部分:
-
顶部 包含 类的名称, 它以粗体和居中打印, 并且第一个字母大小, 它可能还包含描述类性质的可选注释文本
-
中部部分, 包含类的属性, 它们左对齐, 第一个字母为小写.
-
底部 包含类可执行的操作, 它们也左对齐, 首字母为小写
classDiagram class BankAccount // 以 class 开头, 后跟自定义 类名 BankAccount : +String owner BankAccount : +Bigdecimal balance BankAccount : +deposit(amount) // 以"()"区分 类的 属性和函数/方法, 以"()"结尾的为 类的函数/方法, 其他都认为是属性 BankAccount : +withdrawl(amount)
定义一个 Class
定义类有两种方法:
- 使用 关键字
class明确定义一个 类, 如class Animal这定义了一个 Animal 的 class - 通过定义两个 类的关系, 同时定义两个类 , 如
Vehicle <|-- Car, 这定义了两个类Vehicle和Car及其关系。
classDiagram
class Animal
Vehicle <|-- Car
class 学生
命名约定:类名应该由字母数字(允许unicode: 允许使用双字节字符, 如中文)和下划线组成。
定义 Class 成员
UML 提供了 表示类成员的机制, 例如 属性和方法, 以及有关它们的其他信息
根据 括号 () 是否存在 来区分 属性和 函数/方法, 结尾 为 ()被视为 函数和方法 , 而其他被视为 属性.
有两种定义类成员的方法, 无论使用哪种语法定义成员. 输出都将相同. 两种不同的方式是:
-
使用: (冒号
:) 后跟成员名称来关联一个类的成员, 这有助于一次定义一成员.classDiagram class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance BankAccount : +deposit(amount) BankAccount : +withdrawal(amount)classDiagram class BankAccount BankAccount : +String owner BankAccount : +BigDecimal balance BankAccount : +deposit(amount) BankAccount : +withdrawal(amount) -
使用
{}括号 将类的成员相关联, 其中成员分组在大括号中, 适用于一次定义多个成员.classDiagram class BankAccount{ +String owner +BigDecimal balance +bool deposit(amount) +int withdrawl(amount) }classDiagram class BankAccount{ +String owner +BigDecimal balance + bool deposit(amount) + int withdrawl(amount) }可见性 (Visibility):
指定类成员(即任何属性或方法)的可见性, 这些符号可以放在成员名称的前面，但是它是可选的：
+: public-: private#: protected~: package / internal
定义关系
关系是一个通用术语，涵盖了在类和对象图中发现的特定逻辑连接类型
当前支持在UML下为类定义的不同类型的关系：
| 类型 | 描述 | 作用 |
|---|---|---|
| <|-- | Inheritance (继承), 实粗线+实心三角形 | 箭头指向类, 指 子类继承父类, 箭头指向 父类, A类 继承 目标类 |
| *-- | Composition( 组合/合成), 实粗线 + 实心 菱形 | 箭头指向整体 , 指 A类 作为 目标类的成员变量, 且 是 目标类的 构造参数, 与目标类拥有共同的生命周期. A列 组合 目标类 , 目标类 关联 A类 |
| o-- | Aggregation ( 聚合 ) , 实线 + 空心菱形 | 箭头指向整体 , 指 目标类 包含 A类, 但是 A类 不是 目标类 的一部分, A类 可能作为 目标类的 函数/方法 返回值 A类 聚合 目标类 , 目标类 关联 A类 |
| <-- | Association ( 关联 ) , 实线 + 箭头 | 箭头指向被包含类, 目标类为 A类的 成员变量 |
| -- | Link(联合) , 实线, 无箭头 | A类与B类, 与 C类 有同样的 关系 如, A列和B类,同时作为 C类的 成员变量, 或 A类 与 B类 同为 继承 C类 |
| <.. | Dependency (依赖) , 虚线 + 箭头 | 箭头指向整体 指目标类为A类的 方法/函数参数 , A类中使用了 目标类 |
| <|.. | Realization( 实现) , 虚线 + 实心三角形 | 箭头指向接口 , 指 子类 实现接口, 箭头指向 被实现的接口 A类 实现目标类 |
| .. | Link(联合), 虚线 | A类与B类, 与 C类 有同样的 关系 如, A列和B类,同时作为 C类的 函数/方法 参数 |
组合关系和聚合关系可理解为：
聚合关系多你一个不多，少你一个不少。
组合关系是有严格的整体，缺一不可！
如: 大雁群众少一个大雁无伤大雅，但鸟没有了翅膀就不行了
classDiagram
classA <|-- classB : 继承
classC *-- classD : 组合
classE o-- classF : 聚合
classG <-- classH : 关联
classI -- classJ : 联合
classK <.. classL : 依赖
classM <|.. classN : 实现
classO .. classP : 联合
我们可以使用标签来描述两个类之间关系的性质。此外，箭头也可以用在相反的方向
classDiagram
classA --|> classB : 继承
classC --* classD : 组合
classE --o classF : 聚合
classG --> classH : 关联
classI -- classJ : 联合
classK ..> classL : 依赖
classM ..|> classN : 实现
classO .. classP : 关联
classA1 o--> classB1 : 聚合/关联
关系标签
可以在关系中 添加标签文本 :
[classA][Arrow][ClassB] : label Text
classDiagram
classA <|-- classB : 继承
classC *-- classD : 组合
classE o-- classF : 聚合
关系的基数/多重性
类图中的多重性或基数表示链接到另一类的一个实例的一个类的实例数。例如，一个公司将有一个或多个员工，但是每个员工只为一个公司工作。
多重符号位于关联的结尾附近。
不同的基数选项是：
0..1零或一1只有1个0..1零或一1..*一个或多个*许多nn0..nzeor到n1..n一对一
通过将基数文本放在"给定箭头的qoutes 之前（可选）和之后（可选），可以轻松定义基数。
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
类注释
可以使用特定的标记文本为类添加注释. 该标记文本类似于该类的员数据, 可以清楚地只是其性质, 一些常见的注释示例可能是:
<<Interface>>表示 一个接口类<<abstract>>表示一个抽象类<<Service>>表示一个业务类<<enumeration>>表示一个 枚举类
注释在开始 << 和结束中定义 >> . 有两种向类添加注释的方法, 无论使用哪种语法, 输出都将相同
-
定义类后，在单独的一行中。
classDiagram class Shape <<interface>> ShapeclassDiagram class Shape <<interface>> Shape -
与类定义一起在嵌套结构中
classDiagram class Shape{ <<interface>> noOfVertices draw() } class Color{ <<enumeration>> RED BLUE GREEN WHITE BLACK }classDiagram class Shape{ <<interface>> noOfVertices draw() } class Color{ <<enumeration>> RED BLUE GREEN WHITE BLACK }
插入Flowchart流程图
```flow
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？
st->op->cond
cond(yes)->e
cond(no)->op
```
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？
st->op->cond
cond(yes)->e
cond(no)->op
饼状图
原名周树人,浙江绍兴人.... ↩︎
浙公网安备 33010602011771号