Featured image of post Markdown 常用语法大全📝

Markdown 常用语法大全📝

Markdown 常用语法大全 📝 本指南详细介绍了 Markdown 的常用语法和高级用法，帮助您创建美观、结构&

Markdown 常用语法大全 📝

本指南详细介绍了 Markdown 的常用语法和高级用法，帮助您创建美观、结构清晰的文档。Markdown 是一种轻量级标记语言，易读易写，可以转换为有效的 HTML 文档。🚀

📖 导航目录

✨ 简介 📖

Markdown 是一种轻量级标记语言，由 John Gruber 于 2004 年创建。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML 文档。

主要特点：

  • 📝 语法简单直观，学习曲线平缓
  • 🔄 纯文本格式，兼容所有文本编辑器
  • 🌐 可转换为 HTML、PDF 等多种格式
  • 💼 广泛应用于文档编写、博客发布、笔记记录等场景
  • 🆓 开源且免费使用

Markdown 示例

🔤 基础文本格式化 ✨

1. 粗体文本 

1
2

**粗体文本**
__粗体文本__

示例效果： 粗体文本 粗体文本

2. 斜体文本 

1
2

*斜体文本*
_斜体文本_

示例效果： 斜体文本 斜体文本

3. 粗斜体文本 

1
2

***粗斜体文本***
___粗斜体文本___

示例效果： 粗斜体文本 粗斜体文本

4. 删除线 

1

~~删除线文本~~

示例效果： 删除线文本

5. 文本高亮 

1

<mark>高亮文本</mark>

示例效果： 高亮文本

6. 下标和上标 

1
2

H<sub>2</sub>O
E = mc<sup>2</sup>

示例效果： H2O E = mc2

📋 标题与分割线 📋

1. 标题级别 

1
2
3
4
5
6

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

2. 替代标题语法 

1
2
3
4
5

一级标题
=========

二级标题
---------

3. 居中对齐标题 

1

# <center>居中标题</center>

示例效果：

居中标题示例

4. 分割线 

1
2
3

---
***
___

示例效果：

5. 带文本的分割线 

1
2
3

[//]: # (---)
* * *
- - -

📝 列表 📝

1. 有序列表 

1
2
3
4
5

1. 第一项
2. 第二项
3. 第三项
   1. 子项一
   2. 子项二

示例效果：

  1. 第一项
  2. 第二项
  3. 第三项
    1. 子项一
    2. 子项二

2. 无序列表 

1
2
3
4
5
6
7
8

- 项目一
- 项目二
- 项目三
  - 子项目一
  - 子项目二

* 另一种方式
+ 又一种方式

示例效果：

  • 项目一
  • 项目二
  • 项目三
    • 子项目一
    • 子项目二

3. 任务列表 

1
2

- [ ] 未完成任务
- [x] 已完成任务

示例效果：

  • 未完成任务
  • 已完成任务

4. 定义列表 

1
2
3
4
5

术语一
:   定义一

术语二
:   定义二
示例效果：
术语一
定义一
术语二
定义二

🌐 链接与图片 🌐

1. 文字链接 

1

[显示文本](链接地址 "提示文字")

示例效果： 百度搜索

2. 引用式链接 

1
2
3

[显示文本][链接标识]

[链接标识]: https://example.com "可选标题"

3. 直接链接 

1
2

<https://www.example.com>
<email@example.com>

示例效果： https://www.example.com email@example.com

4. 图片嵌入 

1

![图片描述](图片链接地址 "可选标题")

示例效果：

示例图片

5. 带链接的图片 

1

[![图片描述](图片链接)](目标链接)

6. 图片大小调整 

1

<img src="图片链接" alt="图片描述" width="200" height="100">

💻 代码相关 💻

1. 行内代码 

1

`行内代码`

示例效果： console.log("Hello World")

2. 代码块 

1
2
3

```语言名称
代码内容
```

示例效果：

1
2
3

function hello() {
  console.log("Hello Markdown!");
}

3. 缩进代码块 

1
2

    缩进的代码块
    每行至少四个空格

4. 语法高亮支持的语言

  • javascript 或 js
  • python 或 py
  • html
  • css
  • java
  • php
  • sql
  • bash 或 sh
  • 等等…

📊 表格 📊

1. 基础表格 

1
2
3
4

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |

示例效果：

年龄 班级 名字
18 二班 凡凡
18 三班 涵涵

2. 表格对齐 

1
2
3

| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:--------:|-------:|
| 数据左 | 数据中 | 数据右 |

示例效果：

左对齐 居中对齐 右对齐
左侧数据 中间数据 右侧数据

3. 复杂表格 

1
2
3
4
5

| 项目 | 价格 | 数量 |
|------|-----:|:----:|
| 苹果 | \$1 | 5 |
| 香蕉 | \$2 | 3 |
| 总计 | \$11 | 8 |

💬 引用与注释 💬

1. 块引用 

1
2
3

> 一级引用
>> 二级引用
>>> 三级引用

示例效果：

一级引用

二级引用

三级引用

2. 带来源的引用 

1
2
3

> 这是一个精彩的引用。
> 
> — <cite>名人姓名</cite>

3. 注释 

1
2

[//]: # (这是注释，不会显示)
<!-- 这也是注释 -->

4. 脚注 

1
2
3

这是一个带有脚注的文本[^1]。

[^1]: 这是脚注的内容。

示例效果： 这是一个带有脚注的文本1。

🚀 高级功能 🚀

1. 自定义文本样式 

1

<font face="黑体" color="#0099ff" size="4">自定义文本</font>

示例效果： 自定义文本

2. 颜色和大小示例 

1
2
3

<font color=#FF6347 size=5>红色文字</font>
<font color=#0099ff size=3>蓝色文字</font>
<font color=#9ACD32 size=6>绿色文字</font>

示例效果： 红色文字 蓝色文字 绿色文字

3. 单选按钮 

1
2

[radio color="blue" checked="checked"]选中项[/radio]
[radio]未选中项[/radio]

示例效果： [radio color=“blue” checked=“checked”]选中项[/radio] [radio]未选中项[/radio]

4. 进度条 

1

[progress value="75" max="100"]75%[/progress]

示例效果： [progress value=“75” max=“100”]75%[/progress]

5. 折叠内容 

1
2
3
4
5
6
7
8
9

<details>
<summary>点击展开详细内容</summary>

这里是隐藏的详细内容。

- 项目一
- 项目二
- 项目三
</details>

示例效果：

点击展开详细内容

这里是隐藏的详细内容。

  • 项目一
  • 项目二
  • 项目三

🔧 HTML 嵌入 🌐

1. 嵌入视频 

1
2
3
4
5
6
7
8
9

<iframe src="//player.bilibili.com/player.html" 
        width="100%" 
        height="600" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true">
</iframe>

2. 嵌入音频 

1
2
3
4

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

3. 嵌入 PDF 

1

<embed src="document.pdf" width="100%" height="600px" />

4. 按钮 

1

<button onclick="alert('Hello!')">点击我</button>

示例效果：

⚡ 转义字符 🔧

1. 常用转义字符 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

\* 转义星号
\_ 转义下划线
\` 转义反引号
\\ 转义反斜杠
\[ 转义左方括号
\] 转义右方括号
\( 转义左圆括号
\) 转义右圆括号
\# 转义井号
\+ 转义加号
\- 转义减号
\. 转义句点
\! 转义感叹号

示例效果： * 普通星号 _ 普通下划线 ` 普通反引号 \ 普通反斜杠

2. HTML 实体 

1
2
3
4
5

&amp; &amp;amp; 符号
&lt; &lt; 小于号
&gt; &gt; 大于号
&nbsp; 不间断空格
&copy; &copy; 版权符号

示例效果： & & 符号 < < 小于号 > > 大于号

💡 实用技巧与最佳实践 💡

1. 文档结构建议 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 文档标题

## 简介
简要介绍文档内容

## 安装
### 前提条件
- 条件1
- 条件2

### 安装步骤
1. 步骤一
2. 步骤二

## 使用方法
### 基本用法
```代码示例```

### 高级用法
```高级代码示例```

## 常见问题
### 问题一
解决方案

## 参考链接
- [相关文档](链接)

2. 排版建议

  • 在标题前后空一行
  • 列表项前后空一行
  • 代码块前后空一行
  • 保持一致的缩进风格
  • 使用适当的标题层级结构

3. 可读性技巧

  • 使用表格整理数据
  • 使用列表分点说明
  • 重要内容使用加粗或高亮
  • 代码示例使用语法高亮

4. 兼容性提示

⚠️ 注意：某些 Markdown 扩展语法（如颜色文本、单选按钮等）可能在某些平台上不被支持。在使用前请确认目标平台的支持情况。

5. 版本控制友好

  • Markdown 是纯文本格式，非常适合版本控制
  • 使用有意义的提交信息
  • 保持行长度适中（建议 80-100 字符）

🛠️ 工具推荐 🛠️

1. 在线编辑器

2. 桌面应用

  • Typora - 优雅的 Markdown 编辑器，所见即所得
  • VS Code - 带有强大 Markdown 支持的代码编辑器
  • Obsidian - 基于 Markdown 的知识管理工具
  • MarkText - 简单而优雅的开源 Markdown 编辑器

3. 浏览器插件

  • Markdown Viewer - 在浏览器中预览 Markdown 文件
  • Markdown Here - 在邮箱中渲染 Markdown
  • Markdown Preview Plus - 增强的 Markdown 预览功能

4. 命令行工具

  • Pandoc - 文档格式转换工具，支持 Markdown
  • Remark - 强大的 Markdown 处理工具
  • Grip - 本地 GitHub风格的 Markdown 预览

5. 其他工具

  • Markdown Table Generator - 在线表格生成器
  • TableConvert - 表格转换工具
  • Carbon - 创建漂亮的代码截图

通过掌握这些 Markdown 语法和技巧，您可以轻松创建美观、结构清晰的文档！记得多加练习，熟能生巧哦！😊

💡 提示：不同的 Markdown 解析器可能支持不同的扩展语法，建议在使用前查看目标平台的文档以了解其支持的语法特性。

  1. 这是脚注的内容。 ↩︎