1.VNC连接:
老师IP:10...104 或者 ***.local
密码:123456
2.每天浏览器共享代码和相关文件
3.开发环境用python3.6.5
前期使用sublime编写代码,提高代码基础能力。
4.下载markdown(用于后期写笔记使用)
一、markdown语法学习
1.分级标题
一级标题
=====
二级标题
--
(写完标题后换行输入 =或者-,其中=或-最少可以只写一个,兼容性一般)
2.TOC
代码格式如下
[TOC]
3.引用
代码格式如下
单行引用
>hello word!
多行引用
>hello word!
hello word!
hello word!
或者
>hello word!
>hello word!
hello word!
分层嵌套引用
>aaaa
>>bbb
>>>ccccccc
效果演示
aa
bbb
ccc
4.行内标记
代码格式
aaaa 'hello word' aaaa
效果演示
aaa hello word
aaaaa
aaa<div> <div></div> <div></div> </div>
aaa
5.代码块
代码格式
用```生成块
效果演示
<div>
<div></div>
<div></div>
</div>
Tab缩进
第一阶段学习markdown
<div>
<div></div>
<div></div>
</div>
自定义语法(根据不同的语言配置不同的代码着色)
代码格式
``` javascript
var num = 0;
for(var = 0; i < 5; i++){
num += i;
}
console.log(num);
效果演示
var num = 0;
for(var = 0; i < 5; i++){
num += i;
}
console.log(num);
6.插入链接
代码格式1
> [百度1]{www.baidu.com}
效果演示
[百度1]{www.baidu.com}
代码格式2
> [百度2][2]{:target = "_blank"}
[2]: www.baidu.com/ "百度一下"
效果演示
[百度2][2]{:target = "_blank"}
[2]: www.baidu.com/ "百度一下"
7.插入图片
代码格式1
![](./01.png '描述')
效果演示
8.插入图片带有链接
代码格式
[![](https://upload-images.jianshu.io/upload_images/14187443-ac4fa03ba37ad683.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://www.baidu.com){:target = "_blank"}
[![](https://upload-images.jianshu.io/upload_images/14187443-ac4fa03ba37ad683.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)][5]{:target = "_blank"}
[5]: http://www.baidu.com
效果演示
[
[5]: http://www.baidu.com
9.序表
注:序列后保持空格
(有序列表)
1. one
2. two
3. three
效果演示
- one
- two
- three
无序列表
* one
* two
* three
效果演示
- one
- two
- three
1. one
1. one-1
2. two-1
2. two
* two-1
* two-2
效果演示
- one
1.one-1- two-2
- two
- two-1
- two-2
序表嵌套
注:换行 + 两个Tab
* one
var a = 10;
- one
var a = 10;
10.任务列表
选择框
- [x] 选项一
- [ ] 选项二
- [ ] 选项三
效果演示
- [x] 选项一
- [ ] 选项二
- [ ] [选项三3]
11.表格
注::代表对齐方式,**与 | 之间不要有空格**,否则对齐会有些不兼容。
| a | b | c |
|:----------------|:---------------|---------------|
| 居中 | 居中 | 居中 |
|=========|==========|========|
效果演示
a | b | c |
---|---|---|
居中 | 居中 | 居中 |
======= | ====== | ======== |
简约写法
a | b | c
:-:|:- |-:
居中 | 左对齐 | 右对齐
====|=======|=======
效果演示
a | b | c |
---|---|---|
居中 | 左对齐 | 右对齐 |
==== | ====== | ===== |
特殊表格
注:一般对合并单元格,以及其他特殊格式表格,markdown 是无能为力的
所以常规的做法是使用HTML标签,但是这样的编写效率极低。
但是有了这款工具的话,所有问题都迎刃而解
12.支持内嵌CSS样式
<p style = "color: #AD5D0F";font-size:30px; font-faimly:'宋体';">内联
样式</p>
描述 | 效果 | 代码 |
---|---|---|
斜体 | 斜体 | *斜体* |
斜体 | 斜体 | _斜体_ |
加粗 | 加粗 | **加粗** |
加粗+斜体 | 加粗+斜体 | ***加粗+斜体*** |
加粗+斜体 | 加粗+斜体 | **_加粗+斜体_** |
删除线 | 删除线 | ~~删除线~~ |
13.语义标签
描述 效果 代码
斜体 | <i>斜体</i> | <i>斜体</i> |
---|---|---|
加粗 | <b>加粗</b> | <b>加粗</b> |
强调 | <em>强调</em> | <em>强调</em> |
上标 | Za | Za |
下标 | Za | Za |
键盘文本 | Ctrl | <kbd>Ctrl</kbd> |
换行 |
14.格式化文本
保持输入排版格式不变
注:对内含标签需要破坏结构才能显示
代码格式
<pre>
hello world
hi
hello world
</pre>
效果演示
<pre>
hello world
hi
hello world
</pre>
15.错误解决方法
注:标签内部添加空格 或者 直接使用```标记来处理
<pre>
< div>
< div>< /div>
< div>< div>
< div>< /div>
< /div>
</pre>
效果演示
<pre>
<div>
<div></div>
<div><div>
<div></div>
</div>
</pre>
16.基本公式
注:1个$左对齐,2个居中
$$ x \href{why-equal.html}{=} y^2 + 1
$ x = {-b \pm \sqrt(b^2-4ac) \over 2a}. $
效果演示
17.分割符
注:最少三个 --- 或 ***或 * * *
***
---
* * *
效果演示
18.脚注
Markdown[^1]
[^1]: Martdown是一种纯文本标记语言
效果演示
Markdown[1]
19.锚点
注:只有标题支持锚点,跳转目录方括号后保持空格
[公式标题锚点](#1)
### [需要跳转的目录] {#1} // 方括号后保持空格
效果演示
20.定义型列表
注:解释型定义
Markdown
: 轻量级文本标记语言,可以转换成html,pdf等格式 // 开头一个`:` + `Tab` 或 四个空格
代码块定义
: 代码块定义……
var a = 10; // 保持空一行与 递进缩进
效果演示
Markdown
: 轻量级文本标记语言,可以转换成html,pdf等格式 // 开头一个:
+ Tab
或 四个空格
代码块定义
: 代码块定义……
var a = 10; // 保持空一行与 递进缩进
21.自动邮箱链接
效果演示
22.流程图
flow //流程
str => start: 开始|past:> http://www.baidu.com //开始
e => end: 结束 //结束
c1 =>condition: 条件1:>http://www.baidu.com
c2=>condition: 条件2
c3=>condition: 条件3
io=>inputoutput: 输出
str->c1(yes,right)->c2(yes,right)->(yes,right)->io->e
c1(no)->e
c2(no)->e
c3(no)->e
效果演示
flow
st=>start: 开始|past:> http://www.baidu.com
e=>end: 结束
c1=>condition: 条件1:>http://www.baidu.com[_parent]
c2=>condition: 条件2
c3=>condition: 条件3
io=>inputoutput: 输出
st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
c1(no)->e
c2(no)->e
c3(no)->e
代码详解
流程图分为两个部分: 定义参数 然后 连接参数
代码格式:
tag=>type: content:>url // 形参格式
st=>start: 开始:>http://www.baidu.com[blank] //实参格式
注:** st=>start: 开始 的:后面保持空格**
形参 | 实参 | 含义 |
---|---|---|
tag | st | 标签 (可以自定义) |
=> | => | 赋值 |
type | start | 类型 (6种类型) |
content | 开始 | 描述内容 (可以自定义) |
:>url | http://www.baidu.com[blank] | 链接与跳转方式 兼容性很差 |
6种类型 | 含义 |
---|---|
start | 启动 |
end | 结束 |
operation | 程序 |
subroutine | 子程序 |
condition | 条件 |
inputoutput | 输出 |
形参 | 实参 | 含义 |
---|---|---|
-> | -> | 连接 |
condition | c1 | 条件 |
(布尔值,方向) | (yes,right) | 如果满足向右连接,4种方向:right ,left,up ,down 默认为:down |
注:operation (程序); subroutine (子程序) ;condition (条件),都可以在括号里加入连接方向。
operation(right)
subroutine(left)
condition(yes,right) // 只有条件 才能加布尔值
23.时序图
sequence
A->>B: 你好
Note left of A: 我在左边 // 注释方向,只有左右,没有上下
Note right of B: 我在右边
B-->A: 很高兴认识你
代码解释
注:A->>B: 你好 后面可以不写文字,但是一定要在最后加上:
Note left of A 代表注释在A的左边
符号 | 含义 |
---|---|
- | 实线 |
> | 实心箭头 |
-- | 虚线 |
>> | 空心箭头 |
24.生成侧边栏扩展
注:生成侧边栏一般是插入JS,再就是模板,比较麻烦效果也不好。
-
Markdown是一种纯文本标记语言 ↩