2018-09-25 day1学习markdown基本语法

作者: MW演员 | 来源:发表于2018-09-25 16:13 被阅读0次

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://img.haomeiwen.com/i14187443/ac4fa03ba37ad683.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://www.baidu.com){:target = "_blank"}

[![](https://img.haomeiwen.com/i14187443/ac4fa03ba37ad683.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)][5]{:target = "_blank"}
[5]: http://www.baidu.com

效果演示

[

][5]{:target = "_blank"}
[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
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	Z^a
下标	Za	Z_a
键盘文本	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>

效果演示

16.基本公式

注：1个$左对齐，2个居中
$$ x \href{why-equal.html}{=} y^2 + 1
$ x = {-b \pm \sqrt(b^2-4ac) \over 2a}. $

效果演示

$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.自动邮箱链接

xxx@outlook.com

效果演示

123@qq.com

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是一种纯文本标记语言 ↩

网友评论

本文标题：2018-09-25 day1学习markdown基本语法

本文链接：https://www.haomeiwen.com/subject/pgsloftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

2018-09-25 day1学习markdown基本语法

1.VNC连接：

2.每天浏览器共享代码和相关文件

3.开发环境用python3.6.5

4.下载markdown（用于后期写笔记使用）

一、markdown语法学习

1.分级标题

2.TOC

代码格式如下

3.引用

代码格式如下

效果演示

4.行内标记

代码格式

效果演示

5.代码块

代码格式

效果演示

Tab缩进

自定义语法（根据不同的语言配置不同的代码着色）

代码格式

效果演示

6.插入链接

代码格式1

效果演示

代码格式2

效果演示

7.插入图片

代码格式1

效果演示

8.插入图片带有链接

代码格式

效果演示

9.序表

注：序列后保持空格

效果演示

效果演示

效果演示

序表嵌套

10.任务列表

效果演示

11.表格

效果演示

简约写法

效果演示

特殊表格

12.支持内嵌CSS样式

13.语义标签

14.格式化文本

效果演示

15.错误解决方法

效果演示

16.基本公式

效果演示

17.分割符

效果演示

18.脚注

效果演示

19.锚点

效果演示

20.定义型列表

效果演示

21.自动邮箱链接

效果演示

22.流程图

效果演示

23.时序图

代码解释

24.生成侧边栏扩展

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读