Markdown 高级样式示例文档教程

🌟 Markdown 高级样式示例文档教程

💡 本文演示如何在 Markdown 中实现
图片居中、大小控制、表格美化、彩色文本、折叠效果、引用框、图标排版等高级样式。

🧭 目录

🌟 Markdown 高级样式示例文档教程
- 🧭 目录
- 1️⃣ 图片高级排版
  - ✅ 图片居中 + 设置大小
  - 🎨 添加圆角与阴影
- 2️⃣ 表格高级样式
  - ✅ Markdown 基本表格
  - 🌈 HTML 高级表格（可居中 + 边框）
- 3️⃣ 文本与颜色
  - ✅ 彩色文字（HTML 样式）
  - 💬 高亮与代码标记
- 4️⃣ 高级引用与提示框
- 5️⃣ 折叠内容与任务列表
  - 📦 折叠内容
  - ✅ 任务列表
- 6️⃣ 图标与表情修饰
  - 🧩 Markdown 常用图标与表情对照表
  - 💠 常用 Emoji 标签分类示例
- 图标链Github
- 7️⃣ 组合排版实例
- 🏁 结语

1️⃣ 图片高级排版

✅ 图片居中 + 设置大小

<div align="center"><img src="img/5-1.jpg" alt="示例图" width="60%"><p>图1：居中显示的图片（宽度60%）</p>
</div>

🪶 效果：

图1：居中显示的图片（宽度60%）

🎨 添加圆角与阴影

<p align="center"><img src="img/5-1.jpg"style="width:60%; border-radius:10px; box-shadow:0 0 10px #b9134bff;">
</p>

🪶 效果：

💡 border-radius 控制圆角大小，box-shadow 控制阴影扩散。

2️⃣ 表格高级样式

✅ Markdown 基本表格

| 名称 | 年龄 | 职业 |
|:----:|:----:|:----:|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |

🪶 效果：

名称	年龄	职业
张三	25	工程师
李四	30	设计师

🌈 HTML 高级表格（可居中 + 边框）

<table style="margin:auto; text-align:center; border-collapse:collapse;" border="1"><tr style="background-color:#f2f2f2;"><th>模块</th><th>状态</th><th>备注</th></tr><tr><td>登录系统</td><td>✅ 完成</td><td>无异常</td></tr><tr><td>报表中心</td><td>🚧 开发中</td><td>预计本周上线</td></tr>
</table>

🪶 效果：

模块	状态	备注
登录系统	✅ 完成	无异常
报表中心	🚧 开发中	预计本周上线

3️⃣ 文本与颜色

✅ 彩色文字（HTML 样式）

<span style="color:green;">✅ 成功</span>  
<span style="color:red;">❌ 失败</span>  
<span style="color:orange;">⚠️ 警告</span>

🪶 效果： ✅ 成功 ❌ 失败 ⚠️ 警告

💬 高亮与代码标记

使用 `print()` 输出结果  
高亮文字：==重点内容==

🪶 效果：
使用 print() 输出结果
高亮文字：重点内容

4️⃣ 高级引用与提示框

> 💡 <span style="color:#00bfa5;">提示：</span> 可以用 HTML 让引用框更醒目  
> ⚠️ <span style="color:orange;">警告：</span> 小心兼容性问题  
> ✅ <span style="color:green;">建议：</span> 使用 Typora / VSCode

🪶 效果：

💡 提示：可以用 HTML 让引用框更醒目
⚠️ 警告：小心兼容性问题
✅ 建议：使用 Typora / VSCode

5️⃣ 折叠内容与任务列表

📦 折叠内容

<details>
<summary>👉 点击展开详细内容</summary>这里是隐藏的内容，可以放文字、图片或代码块。</details>

🪶 效果：

👉 点击展开详细内容

这里是隐藏的内容，可以放文字、图片或代码块。

✅ 任务列表

- [x] 语法整理
- [ ] 图片优化
- [ ] 表格扩展

🪶 效果：

语法整理
图片优化
表格扩展

6️⃣ 图标与表情修饰

🔥 热门功能  
💻 开发中  
📦 模块封装  
📈 数据分析

🪶 效果：
🔥 热门功能
💻 开发中
📦 模块封装
📈 数据分析

🧩 Markdown 常用图标与表情对照表

分类	表情	Markdown 写法
✅ 成功 / 状态	✅ ✔️ ☑️	`:white_check_mark:` `:heavy_check_mark:` `:ballot_box_with_check:`
❌ 失败 / 错误	❌ ✖️ 💥	`:x:` `:heavy_multiplication_x:` `:boom:`
⚙️ 设置 / 技术	⚙️ 🧩 🛠️	`:gear:` `:jigsaw:` `:hammer_and_wrench:`
💡 提示 / 思考	💡 🤔 🧠	`:bulb:` `:thinking:` `:brain:`
🚀 启动 / 性能	🚀 ⚡ 🏎️	`:rocket:` `:zap:` `:racing_car:`
📁 文件 / 项目	📁 📂 🗂️	`:file_folder:` `:open_file_folder:` `:card_index_dividers:`
📊 数据 / 分析	📊 📈 📉	`:bar_chart:` `:chart_with_upwards_trend:` `:chart_with_downwards_trend:`
🔥 热点 / 优秀	🔥 🌟 💎	`:fire:` `:star2:` `:gem:`
🧰 开发工具	🧰 💻 🖥️	`:toolbox:` `:computer:` `:desktop_computer:`
📅 时间 / 日期	⏰ 🕒 📆	`:alarm_clock:` `:clock3:` `:calendar:`
🧾 文档 / 报告	📝 📋 📄	`:memo:` `:clipboard:` `:page_facing_up:`
👀 视觉 / 检查	👀 🔍 🧐	`:eyes:` `:mag:` `:face_with_monocle:`
⚠️ 警告 / 注意	⚠️ ❗ ❕	`:warning:` `:exclamation:` `:grey_exclamation:`
📦 部署 / 打包	📦 🚚 🏗️	`:package:` `:truck:` `:building_construction:`
🧑‍💻 开发者	👨‍💻 👩‍💻	`:man_technologist:` `:woman_technologist:`

💠 常用 Emoji 标签分类示例

分类	示例	Markdown 写法
😀 常用表情	😄 `:smile:` 😂 `:joy:` 😎 `:sunglasses:` 🤔 `:thinking:` 😢 `:cry:`	😀、😄、😂、😎、🤔、😢
❤️ 状态 / 情绪	❤️ `:heart:` 💔 `:broken_heart:` 🔥 `:fire:` ✨ `:sparkles:` 💪 `:muscle:`	❤️、💔、🔥、✨、💪
💼 工作类 / 文档	🖥️ `:computer:` 📝 `:memo:` 📊 `:bar_chart:` 📁 `:file_folder:` 📦 `:package:`	🖥️、📝、📊、📁、📦
🚀 项目 / 进度	🚀 `:rocket:` ⚙️ `:gear:` ✅ `:white_check_mark:` ❌ `:x:` 🕒 `:clock3:`	🚀、⚙️、✅、❌、🕒
🧠 提示 / 思考	💡 `:bulb:` 🧠 `:brain:` 🔍 `:mag:` 👀 `:eyes:` 📚 `:books:`	💡、🧠、🔍、👀、📚
⚠️ 警告 / 注意	⚠️ `:warning:` ❗ `:exclamation:` 🚫 `:no_entry_sign:` 🛑 `:stop_sign:` 🔧 `:wrench:`	⚠️、❗、🚫、🛑、🔧
🧩 开发 / 技术	🧰 `:toolbox:` 🧱 `:bricks:` 🧑‍💻 `:technologist:` 💾 `:floppy_disk:` 📡 `:satellite:`	🧰、🧱、🧑‍💻、💾、📡
📅 时间 / 日程	⏰ `:alarm_clock:` 📆 `:calendar:` 🕐 `:clock1:` 🗓️ `:spiral_calendar:` 📅 `:date:`	⏰、📆、🕐、🗓️、📅
🌍 其他通用类	🏠 `:house:` 📞 `:phone:` 🔔 `:bell:` 🔒 `:lock:` 📬 `:mailbox:`	🏠、📞、🔔、🔒、📬
🏁 结果 / 总结	🏁 `:checkered_flag:` 🎯 `:dart:` 🏆 `:trophy:` 📈 `:chart_with_upwards_trend:` 🥇 `:1st_place_medal:`	🏁、🎯、🏆、📈、🥇

图标链接网站
图标链Github

7️⃣ 组合排版实例

<div align="center"><h2>📊 项目进度报告</h2><img src="https://picsum.photos/400/180" style="width:60%; border-radius:8px; box-shadow:0 0 6px #ccc;"><table style="margin:auto; text-align:center;" border="1"><tr><th>模块</th><th>负责人</th><th>状态</th></tr><tr><td>数据接入</td><td>张三</td><td>✅ 完成</td></tr><tr><td>权限管理</td><td>李四</td><td>🚧 开发中</td></tr>
</table><p style="color:#666;">更新时间：2025-10-16</p></div>

🪶 效果：

📊 项目进度报告

模块	负责人	状态
数据接入	张三	✅ 完成
权限管理	李四	🚧 开发中

更新时间：2025-10-16

flowchart TDA[开始] --> B[检查是否有未提交事务]B -->|有| C[执行 ROLLBACK 或重启 MySQL]B -->|无| D[执行 ANALYZE TABLE 更新统计信息]D --> E[执行 OPTIMIZE TABLE 清理碎片]E --> F{是否需要加速查询?}F -->|是| G[添加索引 (QRcode, DtTime)]F -->|否| H[直接执行 SELECT 测试性能]G --> HH --> I[结束]