微信公众号 HTML 排版规范

> 生成可直接粘贴到微信公众号编辑器的 HTML 代码，自动规避微信平台对 HTML/CSS 的限制。

When to use

当用户要求以下任务时触发：
- "写一篇公众号文章"
- "帮我排版成公众号格式"
- "生成微信图文 HTML"
- "把内容做成公众号排版"
- 任何涉及"微信公众号" + "HTML/排版/文章"的需求

核心禁止项（微信会剥离或变形）

关键踩坑规则

1. 暗色背景内禁止嵌套 table

暗色容器内嵌套的 <table> 行间会渲染出白色边框线。解决：用 <p> 标签代替内层 table。每个 <td> 必须显式写 border:0 none;。

2. 章节编号方块用 inline span

<p style="margin:28px 0 18px;font-size:20px;font-weight:bold;color:#1a1a1a;">
  <span style="display:inline-block;background:#4a6cf7;color:#fff;font-size:14px;font-weight:bold;text-align:center;width:28px;height:28px;line-height:28px;border-radius:6px;margin-right:10px;vertical-align:middle;">1</span>
  标题文字
</p>

3. 标签/胶囊组件用 span 排列

禁止 table（微信给 table 加默认 border，标签间出现白线）：

<p><span style="display:inline-block;padding:4px 10px;background:#eee;border-radius:12px;font-size:12px;margin:0 4px;">标签</span></p>

4. 流程图一律垂直排列

手机屏幕 320-375px，水平排列必断行。用纯 <p> 垂直堆叠 + ↓ 箭头连接。

5. 代码块用逐行 <p>

微信覆盖 <pre> 的 white-space，代码挤成一行。解决：

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td style="background:#1e1e2e;border-radius:8px;padding:16px 0;">
  <p style="font-family:Menlo,Consolas,monospace;font-size:13px;line-height:1.6;margin:0;padding:0 16px;color:#d4d4d4;">代码行</p>
</td></tr></table>

缩进用   ，空行用 <p style="line-height:0.8;margin:0;padding:0 16px;"> </p>。

6. 箭头/连接符用 <p> 居中

<p style="text-align:center;font-size:20px;color:#4a6cf7;margin:6px 0;line-height:1;">↓</p>

7. table 仅用于数据展示，不用于布局

左列窄（放图标）右列宽放文字 → 微信会压缩左列。改用纵向排列。

常用组件模板

引言/高亮框

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
  <td width="4" style="background:#4a6cf7;border:0 none;"></td>
  <td style="background:#f5f7ff;padding:18px 20px;border:0 none;">
    <p style="font-size:15px;color:#444;line-height:2;margin:0;">引言内容</p>
  </td>
</tr></table>

数据卡片（2x2 宫格）

<table cellpadding="0" cellspacing="8" border="0" width="100%">
<tr>
  <td width="50%" style="background:#fef2f2;border-radius:10px;padding:14px 16px;border:0 none;">
    <p style="font-size:11px;color:#999;margin:0 0 2px;">标签</p>
    <p style="font-size:26px;font-weight:bold;color:#c62828;margin:0;">数据</p>
  </td>
  <td width="50%" style="background:#f0fdf4;border-radius:10px;padding:14px 16px;border:0 none;">
    <p style="font-size:11px;color:#999;margin:0 0 2px;">标签</p>
    <p style="font-size:26px;font-weight:bold;color:#2e7d32;margin:0;">数据</p>
  </td>
</tr></table>

暗色重点框

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td style="background:#1a1a2e;border-radius:10px;padding:22px 20px;border:0 none;">
  <p style="color:#ffd54f;font-size:15px;font-weight:bold;margin:0 0 10px;">核心观点</p>
  <p style="font-size:14px;color:#ddd;line-height:2;margin:0;">内容</p>
</td></tr></table>

色块提示框

<section style="background:#f5f3ff;border-left:4px solid #8b5cf6;padding:16px 20px;margin:16px 0;">
  <p style="font-size:14px;color:#444;line-height:1.8;margin:0;">提示内容</p>
</section>

色系：洞察 #f5f3ff/#8b5cf6 | 技术 #eff6ff/#3b82f6 | 关键 #fff7ed/#f97316 | 对比 #f0fdf4/#22c55e

行内代码

<code style="background:#e8e8f0;color:#5b6abf;padding:2px 6px;border-radius:3px;font-size:13px;">代码</code>

排版参数速查

整体容器：max-width:680px; margin:0 auto; padding:20px 16px; font-size:15px; line-height:1.8; color:#2b2b2b;

字体栈：-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif

文章结构模板

标题区（居中）
├── 栏目标签（13px 灰色 letter-spacing:3px）
├── 主标题（22px 加粗）
├── 日期/阅读时长（12px 灰色）
└── 分隔线（border-bottom:1px solid #eee）

引言区（左色条 table）

章节 1-N
├── 编号标题（inline-span 方块 + 20px 文字）
├── 正文段落（15px line-height:2）
├── 组件（数据卡片/表格/代码块/暗色框）
└── 分隔符（· · · 居中 灰色 letter-spacing:6px）

结尾区（暗色圆角框 金色标题）
脚注（11px 灰色 border-top 分隔）