宝可梦历险记

HTML ​

青玉案·元夕

辛弃疾

东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。

蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。

Markdown 的一个强大特性是可以直接嵌入 HTML 代码，这为文档提供了更丰富的表现力和功能扩展。

html
<div style="text-align: center;">
  <strong style="color: red;">居中的红色粗体文本</strong>
</div>

<p style="color: blue; font-size: 18px; text-align: center;">
  蓝色、18像素、居中的段落
</p>

<p style="color:blue">这段文字是蓝色的。</p>
<span style="color: red; font-weight: bold;">赤红</span>

<!-- <table border="1">
  <tr>
    <td style="background-color: #f0f0f0;">自定义样式的表格</td>
  </tr>
</table> -->

<div style="border: 2px solid #333; padding: 10px; border-radius: 5px;">
  带边框的内容区域
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <div>
    <h3>左列内容</h3>
    <p>这里是左列的内容...</p>
  </div>
  <div>
    <h3>右列内容</h3>
    <p>这里是右列的内容...</p>
  </div>
</div>

<div class="tip custom-block" style="padding-top: 8px">

演示

</div>
渲染效果
居中的红色粗体文本

蓝色、18像素、居中的段落

带边框的内容区域

左列内容

这里是左列的内容...

右列内容

这里是右列的内容...

这段文字是蓝色的。

赤红

基本 HTML 嵌入 ​

内联 HTML 元素 ​

html
<strong>加粗文本</strong>

<em>斜体文本</em>

<code>行内代码</code>

<mark>高亮文本</mark>。

<del>删除</del>

<u>下划线</u>
<ins>下划线</ins>


<a href="https://www.markdownlang.com" target="_blank">外部链接</a>

<span style="border-bottom:2px solid blue;">实线蓝色</span>

<span style="border-bottom:2px dotted green;">点线绿色</span>

<span style="border-bottom:2px dashed red;">虚线红色</span>

<span style="border-bottom:4px double orange;">双线橙色</span>

solid    >>>   /* 实线 */
dotted   >>>   /* 点线 */
double   >>>   /* 双实线 */
groove   >>>   /* 3D凹槽 */
ridge    >>>   /* 3D凸起 */
inset    >>>   /* 3D内嵌 */
outset   >>>   /* 3D外嵌 */
none     >>>   /* 无边框 */
hidden   >>>   /* 隐藏边框 */
渲染效果
  • 加粗文本
  • 斜体文本
  • 行内代码
  • 高亮文本
  • 删除
  • 下划线
  • 外部链接
  • 实线蓝色
  • 点线绿色
  • 虚线红色
  • 双线橙色

块级 HTML 元素 ​

html
<!-- <div class="alert alert-info">
  <h4>信息提示</h4>
  <p>这是一个使用 HTML 创建的信息提示框。</p>
</div> -->

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>这是一个自定义样式的引用块。</p>
  <footer>—— 引用来源</footer>
</blockquote>
渲染效果

这是一个自定义样式的引用块。

—— 引用来源

图片高级处理 ​

html
<img src="/Jeux_vidéo.png" width="300" height="200" alt="指定尺寸的图片">

| 列1 | 列2 |
|:---:|:---:|
| 纯文本 | ![图片描述](https://vitepress.yiov.top/logo.png){style="display: block; margin: 0 auto; width: 120px"} |
| 纯文本 | <img width="15%" src="https://vitepress.yiov.top/logo.png" alt="图片" style="display: inline;"> <img width="10%" src="https://vitepress.yiov.top/logo.png" alt="图片" style="display: inline;"> <img width="15%" src="https://vitepress.yiov.top/logo.png" alt="图片" style="display: inline;"> |

<p align="center">
<img width="128" src="https://i.loli.net/2020/05/07/9kLvPnWVCp7538c.png" >
</p>

<p align="center">
<a href="http://zyplayer.fun/" target="_blank">官网</a>
<a href="https://github.com/Hunlongyu/ZY-Player/issues" target="_blank">反馈</a>
</p>

<p align="center">
<img src="https://forthebadge.com/images/badges/built-with-love.svg">
</p>

<h3 align="center">ZY Player 资源播放器</h3>

<img src="/Jeux_vidéo.png" alt="古玉鱼" style="width:88px; height:auto; display:block; margin:0 auto;">

width:auto;          <!-- 宽度自适应：根据图片原始尺寸自动调整 -->
height:auto;         <!-- 高度自适应：根据图片原始尺寸自动调整 -->
display:block;       <!-- 显示为块级元素：独占一行，可以设置外边距 -->
margin:0 auto;       <!-- 外边距：上下为0，左右自动（实现水平居中） -->

<div align="center">
  <img src="./img/gbo/315511.png" alt="产品界面截图" width="600">
  <p><em>简洁直观的用户界面</em></p>
</div>

<img src="./img/gbo/315511.png" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

你好！我是一名全栈开发者，专注于现代Web技术。拥有5年以上的开发经验，熟悉多种编程语言和框架。

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>
渲染效果指定尺寸的图片
列1列2
纯文本图片描述
纯文本图片 图片 图片

官网反馈

ZY Player 资源播放器

古玉鱼
产品界面截图

简洁直观的用户界面

你好！我是一名全栈开发者，专注于现代Web技术。拥有5年以上的开发经验，熟悉多种编程语言和框架。

JavaScriptReactNode.js

图片对齐 ​

html
<!-- 左对齐 -->
<img src="image.jpg" align="left" width="200">

<!-- 右对齐 -->
<img src="image.jpg" align="right" width="200">

<!-- 居中对齐 -->
<div align="center">
  <img src="image.jpg" width="300">
</div>

<center>
    <p><img src="https://ckcsec.oss-cn-hangzhou.aliyuncs.com/img/gif.gif" width="50%" height="80%"></p>
</center>
渲染效果

图片尺寸控制 ​

html
<!-- 固定宽高 -->
<img src="image.jpg" width="300" height="200">

<!-- 响应式图片 -->
<img src="image.jpg" style="max-width: 100%; height: auto;">

<!-- 图片加边框 -->
<img src="image.jpg" style="border: 2px solid #ddd; border-radius: 8px;">
渲染效果

图片混排 ​

html
<div style="display: flex; align-items: center;">
  <img src="avatar.jpg" width="80" height="80" style="margin-right: 15px;">
  <div>
    <h3 style="margin: 0;">用户名</h3>
    <p style="margin: 5px 0;">这里是用户的介绍文本...</p>
  </div>
</div>
渲染效果

用户名

这里是用户的介绍文本...

图片组合展示 ​

html
<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="图片1" style="width: 200px;">
  <img src="img2.jpg" alt="图片2" style="width: 200px;">
  <img src="img3.jpg" alt="图片3" style="width: 200px;">
</div>

<!-- 图片网格 -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="图片1" style="width: 100%;">
  <img src="img2.jpg" alt="图片2" style="width: 100%;">
  <img src="img3.jpg" alt="图片3" style="width: 100%;">
  <img src="img4.jpg" alt="图片4" style="width: 100%;">
</div>
渲染效果
图片1图片2图片3
图片1图片2图片3图片4

视频和媒体嵌入 ​

html
<!-- YouTube 视频 -->
<iframe style="width:100%; aspect-ratio:16/9; margin-top: 2em;" 
        src="https://www.youtube.com/embed/bzyMLoSwYvk" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        allowfullscreen>
</iframe>

<!-- Bilibili 视频 -->
<iframe style="width:100%; aspect-ratio:16/9; margin-top: 2em;" 
        src="//player.bilibili.com/player.html?bvid=BV1YptMeMEcV&autoplay=false" 
        frameborder="0" 
        allow="accelerometer; autoplay=false; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        allowfullscreen>
</iframe>

<!-- HTML5 视频 -->
<video src="/本地视频路径.mp4" controls="controls"></video>

<video 
  src="/本地视频路径.mp4" 
  controls 
  width="100%" 
  autoplay 
  loop 
  muted
></video>

width="100%" - 设置视频宽度
autoplay - 自动播放（通常需要配合 muted）
loop - 循环播放
muted - 静音播放

<!-- HTML5 视频 -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>
html
<!-- HTML5 音频 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<!-- 网易云音乐 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

复杂表格结构 ​

html
<table>
  <tbody>
    <tr>
      <th rowspan="2">跨行标题1</th>
      <th colspan="3">跨列标题2</th>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </tbody>
</table>
渲染效果
跨行标题1跨列标题2
ABC
内容1内容2内容3内容4
html
<table style="border-collapse: collapse; width: 100%;">
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th style="border: 1px solid #ff4444; padding: 8px;">列标题1</th>
      <th style="border: 1px solid #ff4444; padding: 8px;">列标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #f9f9f9;">
      <td style="border: 1px solid #ff4444; padding: 8px;">数据1</td>
      <td style="border: 1px solid #ff4444; padding: 8px;">数据2</td>
    </tr>
  </tbody>
</table>

- border >>> 边框粗细 
- padding >>> 表格大小
渲染效果
列标题1列标题2
数据1数据2
html
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">产品</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">销售数据</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">总收入</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">Q1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">产品A</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">产品B</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥170,000</td>
    </tr>
  </tbody>
</table>
渲染效果
产品销售数据总收入
Q1Q2
产品A¥100,000¥120,000¥220,000
产品B¥80,000¥90,000¥170,000
html
<p>
    <ruby>
        <span>金色</span>
        <rp>(</rp>
        <rt>きんいろ</rt>
        <rp>)</rp>
    </ruby>
    <span>&emsp;&emsp;</span>
    <ruby>
        <span>ラブリッチェ</span>
        <rp>(</rp>
        <rt>Loveriche</rt>
        <rp>)</rp>
    </ruby>
</p>

- <span class="mask">遮罩 =.= ....</span> # 遮罩
渲染效果

金色(きんいろ)  ラブリッチェ(Loveriche)

交互元素 ​

表单元素 ​

html
<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">姓名：</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">邮箱：</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">消息：</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit" 
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    提交
  </button>
</form>
渲染效果

交互式元素 ​

html
折叠内容
<details>
  <summary>点击展开</summary>
  <p>这里是折叠的内容...</p>
</details>

进度条
<progress value="70" max="100">70%</progress>

按钮样式
<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px;">
  点击按钮
</button>
渲染效果
折叠内容

这里是折叠的内容...

进度条 70%

按钮样式

html
<!-- 折叠内容 -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">点击展开详细信息</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>这里是折叠的详细内容。</p>
    <p>可以包含任何 HTML 内容。</p>
  </div>
</details>

<!-- 进度条 -->
<div style="margin: 1rem 0;">
  <label>项目进度：</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- 评分星级 -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>
渲染效果
32%32%
★★★★☆
点击展开详细信息

这里是折叠的详细内容。

可以包含任何 HTML 内容。

布局和样式 ​

多列布局 ​

html
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <div>
    <h3>左列内容</h3>
    <p>这里是左列的内容...</p>
  </div>
  <div>
    <h3>右列内容</h3>
    <p>这里是右列的内容...</p>
  </div>
</div>
渲染效果

左列内容

这里是左列的内容...

右列内容

这里是右列的内容...

卡片布局 ​

html
<div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 16px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  <h3 style="margin-top: 0;">卡片标题</h3>
  <p>卡片内容描述...</p>
  <a href="#" style="color: #007bff; text-decoration: none;">了解更多</a>
</div>
渲染效果

卡片标题

卡片内容描述...

了解更多

Flexbox 布局 ​

html
<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
  <div style="flex: 1;">
    <h4 style="margin: 0;">标题</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">这是描述文本</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      操作
    </button>
  </div>
</div>

<!-- 卡片布局 -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>卡片 1</h5>
    <p>卡片内容描述</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>卡片 2</h5>
    <p>卡片内容描述</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>卡片 3</h5>
    <p>卡片内容描述</p>
  </div>
</div>
渲染效果

标题

这是描述文本

卡片 1

卡片内容描述

卡片 2

卡片内容描述

卡片 3

卡片内容描述

Grid 布局 ​

html
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0;">
  <div style="padding: 1rem; background-color: #e3f2fd; border-radius: 8px;">
    <h6>功能 1</h6>
    <p>功能描述</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>功能 2</h6>
    <p>功能描述</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>功能 3</h6>
    <p>功能描述</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>功能 4</h6>
    <p>功能描述</p>
  </div>
</div>
渲染效果
功能 1

功能描述

功能 2

功能描述

功能 3

功能描述

功能 4

功能描述

功能 5

功能描述

功能 6

功能描述

提示框和警告 ​

html
<!-- 信息提示 -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 信息：</strong> 这是一个信息提示框。
</div>

<!-- 成功提示 -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ 成功：</strong> 操作已成功完成。
</div>

<!-- 警告提示 -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ 警告：</strong> 请注意这个重要提示。
</div>

<!-- 错误提示 -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ 错误：</strong> 发生了一个错误。
</div>
渲染效果
💡 信息： 这是一个信息提示框。
✅ 成功： 操作已成功完成。
⚠️ 警告： 请注意这个重要提示。
❌ 错误： 发生了一个错误。

自定义组件 ​

标签和徽章 ​

html
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #007bff; color: white; border-radius: 3px;">
  前端
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #28a745; color: white; border-radius: 3px;">
  React
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #ffc107; color: black; border-radius: 3px;">
  JavaScript
</span>
渲染效果 前端 React JavaScript

时间线 ​

html
<div style="position: relative; padding-left: 2rem;">
  <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #ddd;"></div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #007bff; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #007bff;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">2023年12月</h5>
    <p style="margin: 0;">项目启动，完成需求分析和技术选型。</p>
  </div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #28a745; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #28a745;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">2024年1月</h5>
    <p style="margin: 0;">完成核心功能开发，进入测试阶段。</p>
  </div>
  
  <div style="position: relative;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #6c757d; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #6c757d;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">2024年2月</h5>
    <p style="margin: 0;">项目上线部署，开始运营推广。</p>
  </div>
</div>
渲染效果
2023年12月

项目启动，完成需求分析和技术选型。

2024年1月

完成核心功能开发，进入测试阶段。

2025年2月

项目上线部署，开始运营推广。

实际应用场景 ​

产品文档

html
<div style="display: flex; align-items: center; margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
  <div style="flex: 1;">
    <h2 style="margin: 0 0 0.5rem 0;">🚀 产品特性</h2>
    <p style="margin: 0; opacity: 0.9;">体验我们全新的功能和改进</p>
  </div>
  <div>
    <button style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; backdrop-filter: blur(10px);">
      了解更多
    </button>
  </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #007bff;">
    <h4 style="color: #007bff; margin: 0 0 1rem 0;">⚡ 高性能</h4>
    <p style="color: #666; line-height: 1.6;">优化的算法和架构，提供极致的性能体验。</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745;">
    <h4 style="color: #28a745; margin: 0 0 1rem 0;">🔒 安全可靠</h4>
    <p style="color: #666; line-height: 1.6;">企业级安全保障，数据加密传输和存储。</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107;">
    <h4 style="color: #e68900; margin: 0 0 1rem 0;">🎨 易于使用</h4>
    <p style="color: #666; line-height: 1.6;">直观的用户界面，简化的操作流程。</p>
  </div>
  
</div>

API 文档

html
<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1rem 0;">
  <div style="display: flex; align-items: center; margin-bottom: 1rem;">
    <span style="background: #28a745; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem;">POST</span>
    <code style="margin-left: 1rem; flex: 1; background: #e9ecef; padding: 0.5rem; border-radius: 4px;">/api/v1/users</code>
  </div>
  
  <h4 style="margin: 0 0 1rem 0;">创建用户</h4>
  <p style="color: #6c757d; margin: 0;">创建一个新的用户账户</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 请求参数
  </summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">参数</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">类型</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">必需</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>name</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">用户姓名</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>email</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">邮箱地址</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

团队介绍

html
<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 我们的团队</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
    <div style="text-align: center;">
      <img src="/Gym-Badges/8-绿色徽章×5.png" alt="张三" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #007bff;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">张三</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">前端工程师</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">专注于React和Vue开发，热爱用户体验设计。</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    <div style="text-align: center;">
      <img src="/Gym-Badges/4-彩虹徽章×5.png" alt="李四" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #28a745;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">李四</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">后端工程师</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">精通Node.js和Python，专注于系统架构设计。</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
  </div>
</div>

脚注 ​

html
<!-- 脚注引用 -->
<p>这是一段包含脚注的文本<sup id="fnref:1"><a href="#fn:1" class="footnote-ref">1</a></sup>。</p>

<!-- 脚注内容（通常位于文档末尾） -->
<div class="footnotes">
  <hr>
  <ol>
    <li id="fn:1">
      <p>这是脚注的内容。<a href="#fnref:1" class="footnote-backref">↩</a></p>
    </li>
  </ol>
</div>

这是一段包含脚注的文本1。

  1. 这是脚注的内容。↩

本站已运行: - 天 - 时 - 分 - 秒

Copyright © 2025-2026 Powered by Gamers VitePress Cloudflare Namecheap umami