Markdown 示例文章

这是一篇展示各种 Markdown 样式的示例文章，包含了标题、文本格式化、代码块、图片、列表、表格、链接等多种元素。

一、文本格式化

1. 基础文本样式

粗体文本

斜体文本 或 斜体文本

粗斜体文本 或 粗斜体文本

~~删除线文本~~

下划线文本

2. 字体和颜色

红色的微软雅黑文字

蓝色Arial大字号文字

黄色背景黑色文字

番茄红色文字

钢蓝色中等字号文字

二、代码块

1. 行内代码

可以使用 console.log('Hello World') 来打印信息。

2. 普通代码块

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

3. 带语法高亮的代码块

JavaScript

// 这是一个JavaScript示例
class Calculator {
    add(a, b) {
        return a + b;
    }
    subtract(a, b) {
        return a - b;
    }
}

const calc = new Calculator();
console.log(calc.add(5, 3)); // 输出: 8

Python

# 这是一个Python示例
def fibonacci(n):
    """计算斐波那契数列的第n个数"""
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    else:
        return fibonacci(n-1) + fibonacci(n-2)

# 打印前10个斐波那契数
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

HTML + CSS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .card {
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h1>Hello, World!</h1>
            <p>这是一个示例卡片。</p>
        </div>
    </div>
</body>
</html>

三、列表

1. 无序列表

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

2. 有序列表

第一步
第二步
第三步
1. 子步骤一
2. 子步骤二

3. 任务列表

已完成的任务
未完成的任务
另一个未完成的任务

四、表格

姓名	年龄	职业	薪资
张三	28	工程师	15000
李四	32	设计师	18000
王五	45	产品经理	25000

五、图片

1. 普通图片

示例图片

2. 带大小控制的图片

3. 带标题的图片

示例图片

六、链接

七、引用

1. 单行引用

这是一句引用的话。

2. 多行引用

这是一段多行引用。可以包含多个段落。

这是第二段引用。

3. 嵌套引用

外层引用

内层引用

更深层的引用

八、分割线

九、特殊符号

1. 转义字符

* 这不是斜体文本 *

` 这不是行内代码 `

2. 表情符号

😄 👍 😊 😎 🤔 😢

3. 数学公式（使用LaTeX语法）

行内公式： $E=mc^2$ 和 $a^2 + b^2 = c^2$

块级公式：

$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$

$\int_{a}^{b} f(x) dx$

十、高级内容

1. 定义列表

术语 1 : 术语 1 的定义

术语 2 : 术语 2 的第一个定义 : 术语 2 的第二个定义

2. 脚注

这是一个脚注的示例^1。

3. 自动链接

https://www.example.com

example@example.com

十一、HTML元素（在Markdown中混合使用HTML）

1. 简单HTML元素

这是一个使用HTML创建的div容器

2. 更复杂的HTML结构

名称	数量	价格
产品A	10	¥100
产品B	5	¥200

十二、总结

这篇文章展示了Markdown的各种功能，包括：

文本格式化：粗体、斜体、删除线等
字体和颜色：通过HTML span标签实现
代码块：支持不同语言的语法高亮
列表：有序列表、无序列表、任务列表
表格：支持基本表格格式
图片：支持图片插入和大小控制
链接：包括普通链接和邮件链接
引用：支持嵌套引用
分割线：多种分割线样式
特殊符号：转义字符、表情符号、数学公式
高级内容：定义列表、脚注、自动链接
HTML混合使用：在Markdown中嵌入HTML元素

通过组合使用这些功能，可以创建格式丰富、美观易读的文档。