小白系列003--Typora Markdown语法学习
Markdown语法学习
常用
标题
使用#符号表示标题。一个#表示一级标题，两个#表示二级标题，依此类推，最多支持六级标题。
# 一级标题
## 二级标题
### 三级标题
字体强调
使用*或_符号包围文本来表示斜体。使用双重**或__来表示粗体，使用三重***或___来表示粗斜体。
斜体：*Helloween，world！*（在内容两边各加一个 * ）
斜体：_Helloween，world！_（在内容两边各加一个 _ ）
粗体：**Helloween，world！**（在内容两边各加两个 * ）
粗体：__Helloween，world！__（在内容两边各加两个 * ）
粗体+斜体：***Helloween，world！***（在内容两边各加三个 * ）
粗体+斜体：___Helloween，world！___（在内容两边各加三个 * ）
删除线：~~Helloween，world！~~（在内容两边各加两个 ~ ）
段落换行
在Markdown中，段落之间需要用空行进行分隔，但回车制造的多个空行，会被缩减为一个。
列表
使用*、+或-作为列表标记，可以创建无序列表。使用数字加英文句点.来创建有序列表。
- 无序列表项
+ 无序列表项
* 无序列表项
1. 有序列表项
2. 有序列表项
链接和图片
使用[链接文本](链接地址)来创建链接，使用来插入图片。
[百度](http://www.baidu.com)
引用
使用>符号来表示引用。可以嵌套多层引用。
> 这是一段引用文本。
>> 这是嵌套的引用。
代码块
在这里写的内容，可以选择对应的语言，进行渲染展示。
当需要显示一些特殊信息，而在普通文本内无法正常显示的时候，也可以尝试在代码块内显示。
一个 ` 括起来的内容 ,
以及连续 ` 括起来的内容 （Typora中可以使用连续的三个 ~ 代替，在后面直接写对应的语言格式）。
`行内代码或代码片段`
```
代码块
```
分割线
使用三个及以上的-、*来创建分割线。
---
***
表格
表格的格式相对复杂，一般在软件（Typora）内直接选择插入。
| | | |
| ---- | ---- | ---- |
| | | |
进阶
在使用Typora编写笔记的过程中发现前端标签和Markdown语法是可以混用的。
总结了一部分常用的标签。使用这些标签可以让笔记更加清晰直观。
Markdown与前端代码的联系
Markdown 是一种轻量级标记语言，用于简单和易读的文本格式化。它使用简单的标记符号和约定来表示文本样式和结构，以便于转换为HTML等格式。Markdown 适用于编写文档、记录笔记、撰写博客等情景。
与 Markdown 不同，前端代码是用于创建网页的技术。HTML、CSS 和 JavaScript 是前端开发中最常见的编程语言和技术。HTML 用于定义网页结构和内容，CSS 用于控制网页的样式和布局，JavaScript 用于实现动态交互和功能。
然而，Markdown 在某种程度上可以与前端代码集成。在一些静态网站生成器或博客平台中，Markdown可以用作撰写文章和内容的格式，而将Markdown转换为HTML后显示在网页上。这种转换过程由前端代码负责实现，通常会使用特定的工具或库来将Markdown文件解析并生成相应的HTML代码。
在这种情况下，Markdown 可以在前端开发中扮演一种用于书写内容的角色，而前端代码则负责处理和渲染这些Markdown内容。这使得内容的编辑和管理更加简洁和方便，同时保留了网页的灵活性和交互性。
总结起来，Markdown 是一种用于简化文本格式的标记语言，在前端开发中可以与特定工具或库集成，用于方便地书写和管理网页内容，并通过前端代码将其转换为最终呈现的HTML等格式。
标题
#最多支持六级标题，就是对应的前端h1到h6标签。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
直接写的html标签，在Typora中并不会被当做目录，但字号大小与对应的目录是一致。
字体强调
通过更改style属性，可以更改字体的样式。
通过更改color属性，可以更改字体的颜色。
通过更改style属性，可以更改字体的背景色。
<p>这是一段<span style="font-weight: bold;">加粗文本</span>。</p>
<p>这是一段<span style="font-style: italic;">斜体文本</span>。</p>
<p>这是一段<span style="color: red;">红色文本</span>。</p>
<font color="red">红色字体</font>
<font color="green">绿色字体</font>
**<font color="green">粗体绿色字体</font>**
<span style="background-color: yellow;">文本</span>
段落换行
在Markdown中，可以使用换行符同时显示多个空行。
<p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p>
<br>
<br>
<br>
列表
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
链接和图片
<a href="http://example.com">这是一个链接</a>
<img src="图片.jpg" alt="图片显示失败时，显示的信息。">
Markdown是支持GIF动图的，直接复制图片的链接，放在（）内就可以了。
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.6d7b3f0d19c342878c4d71b2031e2915?rik=2zqTxpgK7rNz9w&riu=http%3a%2f%2fimg0.pconline.com.cn%2fpconline%2f1309%2f12%2f3466082_39.gif&ehk=D8TJxPLlxYk%2bpIfCtfbo%2bhay%2ba1tv1MPNhabh5oS8rw%3d&risl=&pid=ImgRaw&r=0" alt="图片显示失败时，显示的信息。">
分割线
<hr>
表格
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
</table>
总结
Markdown书写的内容最终是会被翻译为前端代码进行展示的。这也就是说你可以在书写Markdown语法的笔记时，使用你所知道的前端代码来书写。
针对编写笔记而言，Markdown其实就是方便非专业人士进行前端代码编写的一种工具，只是发布到博客时被翻译的过程没有展示给用户。
