HTML CSS拓展 MarkDown技巧总结

MarkDown是一种纯文本的编辑模式，不仅在VSCode中我们可以借此来记笔记，而且在很多博客（如CSDN）中，就用了这种编辑方法。它操作简单，而且可以让作者能专注于写作不用注重于格式，在这里进行总结。

资料来源

https://www.jianshu.com/p/191d1e21f7ed
https://www.zybuluo.com/mdeditor
https://blog.csdn.net/weixin_41910694/article/details/91629999
https://blog.csdn.net/wangzhibo666/article/details/88731227#%E6%B5%8B%E8%AF%952

快捷键

功能	快捷键
加粗	Ctrl + B
斜体	Ctrl + I
引用	Ctrl + Q
插入链接	Ctrl + L
插入代码	Ctrl + K
插入图片	Ctrl + G
提升标题	Ctrl + H
有序列表	Ctrl + O
无序列表	Ctrl + U
横线	Ctrl + R
撤销	Ctrl + Z
重做	Ctrl + Y

标题

n*井号+空格 是n级空格的表示方法，最高支持六级标题。

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

字体

格式

• 加粗：要加粗的文字左右分别用两个*号包起来
• 斜体：要倾斜的文字左右分别用一个*号包起来
• 斜体加粗：要倾斜和加粗的文字左右分别用三个*号包起来
• 删除线：要加删除线的文字左右分别用两个~~号包起来

示例：

这是加粗的文字
这是倾斜的文字`
这是斜体加粗的文字
这是加删除线的文字

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

字体-字号-颜色-背景色

Markdown本身不支持修改字体、字号与颜色等功能，但是因为Markdown兼容HTML语法，所以我们可以使用HTML标签来设置。

face 表示字体；
color 表示颜色，可取十六进制的值；
size 表示字号，但是要注意取值范围是 1 - 7，浏览器的默认值是 3；
bgcolor 表示背景颜色，需借助 table, tr, td 等表格标签来使用；
示例代码：

<font face="微软雅黑">我是微软雅黑</font>
颜色是<font color=red>红色</font>
字号为<font color=#0099ff size=7>7号</font>
<table><tr><td bgcolor=orange>背景色是：orange</td></tr></table>

我是微软雅黑
颜色是红色

字号为7号

背景色是：orange

引用

在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>
n个，貌似可以一直加下去。

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

示例

这是引用的内容

这是引用的内容

这是引用的内容

这是引用的内容

分割线

三个或者三个以上的 - 或者 * 都可以。

---
----
***
*****

示例：

---

---

---

图片

![图片alt](图片地址 ''图片title'')
图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加

示例：

超链接

语法：

[超链接名](超链接地址 "超链接title")
title可加可不加

<a href="超链接地址" target="_blank">超链接名</a>

效果如下：
简书
百度

列表

无序列表

语法：
无序列表用 - + * 任何一种都可以

- 列表内容
+ 列表内容
* 列表内容

注意：- + * 跟内容之间都要有一个空格

效果如下：

• 列表内容

• 列表内容

• 列表内容

有序列表

语法：
数字加点

1.列表内容
2.列表内容
3.列表内容

注意：序号跟内容之间要有空格

1. 列表内容
2. 列表内容
3. 列表内容

列表嵌套

上一级和下一级之间敲三个空格即可

• 一级无序列表内容

  • 二级无序列表内容

• 一级无序列表内容

  1. 二级有序列表内容

表格

语法：

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行，为了对齐，多加了几个
文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右
注：原生的语法两边都要用 | 包起来。此处省略

示例：

表头	表头	表头
内容	内容	内容
内容	内容	内容

代码

语法：
单行代码：代码之间分别用一个反引号包起来

    `代码内容`

代码内容
代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行

(```)
  代码...
  代码...
  代码...
(```)

  代码...
  代码...
  代码...

#####第一段标题

流程图

代码：

```mermaid
flowchat
st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op

示例：

使用LaTex数学公式:

行内公式：使用两个”$”符号引用公式: $公式$
行间公式：使用两对“$$”符号引用公式： $$公式$$

示例：
行内公式： $公式$
行间公式：$$公式$$

段落格式

换行

方法1: 连续两个以上空格+回车           
方法2：使用html语言换行标签：<br>
首行缩进两个字符：(每个表示一个空格，连续使用两个即可）
&ensp; 半角的空格
&emsp; 全角的空格

emoji表情符号

https://www.webfx.com/tools/emoji-cheat-sheet/
代码示例：

:smile:

😄

Todo 列表

代码：

- [ ] 看书
- [ ] 打篮球

• 看书
• 打篮球

锚点

锚点其实就是页内超链接。比如我这里写下一个锚点，点击回到目录，就能跳转到目录。 在目录中点击这一节，就能跳过来。

注意：在简书中使用锚点时，点击会打开一个新的当前页面，虽然锚点用的不是很舒服，但是可以用注脚实现这个功能。

语法说明：
在你准备跳转到的指定标题后插入锚点{#标记}，然后在文档的其它地方写上连接到锚点的链接。

页面内跳转语法

方法一

1. 实际语法比较简单，在需要跳转的位置添加锚点，语法如下：

<span id="jump">跳转到的地方</span>

2. 在需要点击跳转的位置，使用上面的id，格式类似超链接的形式：

[点击跳转](#jump)

方法二

代码

<a href="#测试2">测试2</a>
h
t
m
l
<a id="测试2">测试2</a>

示例
测试2
h
t
m
l
测试2

注脚

貌似在CSDN中不支持 详情看https://www.cnblogs.com/tocy/p/markdown-footnote_link.html