
# Markdown 渲染格式大全

## 1. 基础文本格式

*斜体* 或 _斜体_  
**粗体** 或 __粗体__  
***粗斜体*** 或 ___粗斜体___  
~~删除线~~  
<u>下划线（使用 HTML）</u>  
==高亮标记== （部分渲染器支持）  
H~2~O （下标）  
X^2^ （上标）

## 2. 标题（1-6级）

# H1
## H2
### H3
#### H4
##### H5
###### H6

## 3. 列表

### 无序列表
- 项目 1
  - 嵌套项目 1.1
    * 第三层（可用 * + -）
+ 项目 2
* 项目 3

### 有序列表
1. 第一项
2. 第二项
   3. 嵌套 2.1
   4. 嵌套 2.2
5. 第三项

### 任务列表
- [x] 已完成任务
- [ ] 未完成任务
- [ ] 子任务 [优先级高]

## 4. 链接与图片

[普通链接](https://example.com)  
[带标题的链接](https://example.com "鼠标悬停显示")  
<https://自动链接.com>  

![替代文本](https://picsum.photos/200/100 "图片标题")    

## 5. 引用

> 这是一级引用
>> 嵌套引用
>>> 三级引用
> 
> 回到一级

## 6. 代码

行内代码：`console.log("Hello");`  

代码块（带语法高亮）：
```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

## 7. 表格

| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:--------:|-------:|
| 单元格1 | 单元格2  | 单元格3 |
| *斜体* | **粗体** | `代码` |

复杂表格（HTML 方式，见第14节）

## 8. 分割线

---

***

___

## 9. 脚注

这是带脚注的句子[^1]  
[^1]: 脚注内容可以写在这里，甚至多段。

## 10. 转义字符

\*这不是斜体\*  
\# 不是标题  
\[非链接\]  

## 11. 定义列表（部分渲染器支持）

: 定义内容

## 12. 数学公式（需要 LaTeX 渲染）

行内公式：$E = mc^2$  

块级公式：
$$
\int_{a}^{b} f(x) \, dx = F(b) - F(a)
$$

## 13. 图表与流程图（Mermaid）

```mermaid
graph TD
    A[开始] --> B{条件}
    B -->|是| C[执行]
    B -->|否| D[结束]
```

## 14. 嵌入 HTML（无所不能！）

### 14.1 基础 HTML 标签
<mark>高亮标记</mark>  
<kbd>Ctrl</kbd> + <kbd>C</kbd>  
<span style="color: red;">彩色文字</span>  
<div align="center">居中的 div</div>

### 14.2 表格增强
<table>
  <tr>
    <th colspan="2">合并单元格</th>
  </tr>
  <tr>
    <td rowspan="2">行合并</td>
    <td>内容</td>
  </tr>
  <tr><td>另一行</td></tr>
</table>

### 14.3 嵌入视频 / 音频


### 14.4 嵌入 YouTube 视频
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

### 14.5 自定义样式（甚至 CSS）
<style>
  .markdown-demo {
    background: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
  }
</style>
<div class="markdown-demo">
  这是一个带样式的盒子
</div>

### 14.6 嵌入 SVG
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

### 14.7 表单元素
<input type="text" placeholder="文本框" />
<button onclick="alert('Hi')">点我</button>

### 14.8 进度条、输入框等
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>

## 15. 注解与评论（仅部分支持）

[//]: # (这是注释，不会显示)

<!-- 这也是 HTML 注释，完全隐藏 -->

## 16. 特殊技巧

### 16.1 避免嵌套冲突（用反斜杠或HTML包裹）
`<div>` 原样显示

### 16.2 内联 HTML + Markdown 混用（需要渲染器支持）
<span style="font-weight:bold">**粗体** 也能用</span>

### 16.3 锚点跳转
[跳转到表格](#7-表格)

### 16.4 键盘按键样式（HTML）
<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>

### 16.5 缩写（HTML）
<abbr title="Cascading Style Sheets">CSS</abbr> 是样式语言。

## 17. 完整示例：一个带 HTML 的复杂卡片

<div style="border: 1px solid #ccc; border-radius: 8px; padding: 16px; max-width: 300px;">
  <img src="https://picsum.photos/100/100" style="border-radius: 50%;" />
  <h3 style="margin: 8px 0;">Markdown 用户</h3>
  <p>支持 <strong>粗体</strong> 和 <em>斜体</em> 以及 <code>代码</code>。</p>
  <button onclick="alert('Hello from Markdown + HTML')">打招呼</button>
</div>

---
