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[结束]
🏁 结语
- ✅ Markdown + HTML 组合的高级排版
- 🎨 图片、表格、文本的视觉优化技巧
- 💡 Typora / VSCode / 语雀等工具兼容写法
✨ 作者：weijie zhu
🕓 版本：v1.0（2025-10-16）
📘 推荐工具：Typora / VSCode + Markdown Preview Enhanced