个人blog-1: 拾忆生活
个人blog-2: 极简-拾忆生活
欢迎大家来踩,同步更新
markdown基本语法
> (区块,有阴影+有竖线)
tab(代码区块,有阴影+无竖线)
\ (取消转义,无阴影+无竖线)
空格
- 不换行空格
它是按下space键产生的空格,在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个) -   半角空格en
其占据的宽度正好是1/2个中文宽度,1个英文字母,基本不受字体影响 -   全角空格em
其占据的宽度正好是1个中文宽度,2个英文字母,基本不受字体影响。
颜色
方法1
<font color="red">red</font>
演示
red
方法2
$\color{#FF3030}red$
演示
r e d \color{#FF3030}red red
标题
方法1
使用 = 和 - 标记一级和二级标题
演示
我展示的是一级标题
=================
我展示的是二级标题
-----------------
方法2
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
段落
段落的换行:使用两个以上空格加上回车
重新开始一个段落:段落后面使用一个空行
字体
*斜体文本*
**粗体文本**
***粗斜体文本***
_斜体文本_
__粗体文本__
___粗斜体文本___
演示
斜体文本
粗体文本
粗斜体文本
斜体文本
粗体文本
粗斜体文本
分隔线
一行中用三个及以上的星号*、减号-、底线_来建立分隔线
行内不能有其他东西(除了空格)。
***
—
___
演示
删除线
两个波浪线 ~~
演示
文本
下划线
<u>带下划线文本</u>
演示
带下划线文本
脚注
注意:(x必须相同,可以数字等)
这是一段话[^x]。
[^x]: 脚注说明内容,用来说明那段话
这是一段话,看最下面。[^x]
[^x]: 脚注说明内容,用来说明那段话
列表
一、无序列表
无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记
* 第一项
* 第二项
+ 第一项
+ 第二项
- 第一项
- 第二项
演示
- 第一项
- 第二项
- 第一项
- 第二项
- 第一项
- 第二项
二、有序列表
使用数字并加上 ”.“ 号来表示
- 第一项
- 第二项
- 第三项
三、列表嵌套
在子列表中的选项添加四个空格是白色,没有空格是黑色(即没有嵌套)
语法
- 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素 - 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
演示
- 第一项:
- 第一项嵌套的第一个元>素
- 第一项嵌套的第二个元素
- 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
区块
>符号(引用块注释,有阴影+有竖线)
演示1:嵌套区块
一个 > 符号是最外层
两个 > 符号是第一层嵌套
最外层
第一层嵌套
第二层嵌套
演示2:列表中使用区块
- 第一项
菜菜
菜菜 - 第二项
演示3:区块中使用列表
- 第一项
- 第二项
- 第一项
- 第二项
代码
第一种:“ ` ”反引号,代码的前后一共两个反引号包围代码
第二种:用 ```包裹一段代码,并指定一种语言
语法
`printf()` 函数
或
```javascript
$(document).ready(function () {
alert(‘RUNOOB’);
});
```
演示1
printf()
函数
演示2
$(document).ready(function () {
alert('RUNOOB');
});
代码区块
tab键(代码区块,有阴影+无竖线)
演示
这个的外框
链接
方法1:[链接名称](链接地址)
实现:这是一个链接 [百度](https://www.baidu.com)
或者
方法2:<链接地址>
实现:<https://www.baidu.com>
演示1
这是一个链接 百度
演示2
高级链接
链接也可以用变量来代替,文档末尾附带变量地址,然后在文档的结尾为变量赋值(网址): (注意两行之间要空一行)
这个链接用 2 作为网址变量 [Google][1]
[1]: https://www.baidu.com
这个链接用 a 作为网址变量 [Runoob][a]
[a]: https://www.baidu.com
演示1
这个链接用 2 作为网址变量 百度
这个链接用 a 作为网址变量 还是百度
图片
方法1
- 开头一个感叹号 !
- 接着一个方括号,里面放上图片的替代文字
- 接着一个普通括号,里面放上图片的网址
- 实现:
![alt 属性文本](src图片地址)
- 实现:
方法2
- 开头一个感叹号 !
- 接着一个方括号,里面放上图片的替代文字
- 接着一个普通括号,里面放上图片的网址和引号包住的 ‘title’ 属性的文字。
- 实现:
![alt 属性文本](src图片地址 “tltle可选标题”)
- 实现:
演示1
演示2(请鼠标悬停在图片上方)
图片指定宽高
使用普通的 <img> 标签
<img src=“http://static.runoob.com/images/runoob-logo.png” width=“50%”>
演示
表格
- 基本
- 使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行
- :- 设置内容和标题栏居左对齐。
- -: 设置内容和标题栏居右对齐。
- :-: 设置内容和标题栏居中对齐。
- 其他
- 单元格内为空:
- 单元格内换行:<br>
基本表格实现
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
演示
表头 | 表头 |
---|---|
单元格 | 单元格 |
单元格 | 单元格 |
对齐表格实现
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
演示
左对齐 | 居中对齐 | 右对齐 |
---|---|---|
单 | 元 | 格 |
单 | 元 | 格 |
高级技巧
支持的 HTML 元素
<kbd><b><i><em><sup><sub><br>
实现:<kbd>
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
演示
使用 Ctrl+Alt+Del 重启电脑
公式
使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式
实现:x+y=z
$$
x+y=Z
$$
演示
x + y = z x+y=z x+y=z
流程图
实现:横向流程图
```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
```