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

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]{:target = "_blank"}
[5]: http://www.baidu.com

9.序表

注:序列后保持空格
(有序列表)
1. one
2. two
3. three
效果演示
  1. one
  2. two
  3. three
无序列表
* one
* two
* three
效果演示
  • one
  • two
  • three
1. one
    1. one-1
    2. two-1
2. two
    * two-1
    * two-2
效果演示
  1. one
    1.one-1
    1. two-2
  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}. $
效果演示

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,再就是模板,比较麻烦效果也不好。

  1. Markdown是一种纯文本标记语言

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容