Typora 徽章说明

徽章这东西用起来挺上头的，就几行 HTML，README 立马好看不少。下面把代码拆开说清楚，复制改改就能用。

---

整体结构

代码分两层：外面一个居中容器，里面放若干个可点击的徽章。

---

1. 居中容器

<div align="center">
  ...
</div>

就是个普通的 div，align 属性控制内容的水平对齐方式，一共有四个值：

值	效果
center	居中对齐（最常用）
left	左对齐
right	右对齐
justify	两端对齐（对图片类内联元素基本没效果，了解即可）

注：align 属于 HTML 旧属性，在现代 Web 开发里推荐用 CSS 代替，但在 Markdown 渲染环境（GitHub、Typora 等）里用 align 更省事、兼容性也够。

---

2. 单个徽章

<a href="https://cli.im/">
  <img src="https://img.shields.io/badge/草料-二维码-blue" alt="草料二维码" style="display:inline; margin:0 8px;">
</a>

拆开看三个部分：

• href：点击徽章跳转的地址，换成你自己的链接就行
• src：徽章图片的 URL，格式是 shields.io/badge/左边文字-右边文字-颜色，颜色支持 blue、green 这种名字，也可以直接填十六进制色值
• style：display:inline 让徽章横排不换行，margin:0 8px 控制左右间距，嫌太挤或太松改这里

---

3. 推荐配色

shields.io 支持直接填十六进制色值，下面是几组实际用起来好看的颜色，风格各不相同，按需取用：

沉稳系（适合技术类项目）

色值	预览效果	适合场景
1E3A5F	深海蓝	主标签、框架名
2E4057	钢铁蓝灰	工具链、版本号
3D5A4F	深松绿	开源项目、环保主题
5C4033	深咖棕	文档类、复古风

鲜亮系（适合个人主页/作品集）

色值	预览效果	适合场景
FF6B6B	珊瑚红	重点标签、警告类
F4A261	暖橙	社交链接、联系方式
2EC4B6	青绿	作品展示、设计类
E040FB	霓虹紫	个性签名、炫技用

低饱和系（适合极简风格）

色值	预览效果	适合场景
6B7280	冷灰	次要信息、状态标注
9CA3AF	浅灰	补充说明
A78BFA	薰衣草紫	轻量装饰
6EE7B7	薄荷绿	通过状态、success 类

用法示例：

https://img.shields.io/badge/构建-passing-2EC4B6
https://img.shields.io/badge/版本-v1.0.0-1E3A5F
https://img.shields.io/badge/许可证-MIT-6EE7B7

---

4. 用法

整段代码可以直接粘到：

• GitHub / Gitee 的 README.md
• 支持 HTML 渲染的博客（比如 Hexo、Hugo）
• Typora 等支持内联 HTML 的 Markdown 编辑器

想加新徽章，复制一个 <a>...</a> 块，改掉链接和 badge URL 就好。