必须用<table>而非<div>，因Outlook Desktop（2016–2024）使用冻结于2007年的Word渲染引擎，不支持flex、margin、@media及语义化标签，Gmail则整块剥离<style>标签；三层<table>嵌套（外层100%宽、中层600px固定宽、内层模块化）是iOS Mail和Samsung Email的安全上限，超限将静默错乱；按钮、图片、文字须寄生<td>中，依赖HTML属性（如align、width、bgcolor）而非CSS控制行为。
为什么必须用 <table> 而不是 <div>
因为 Outlook Desktop（2016–2024）用的是冻结在 2007 年的 Word 渲染引擎，它不认识 display: flex、margin、@media，甚至会把 <p> 自动包裹或吃掉你设的 padding；Gmail 则整块剥离 <style> 标签，连 style="margin: 20px" 都可能静默丢弃。你看到的“布局崩了”，不是 bug，是预期行为。
写 <div class="header"> 在多数客户端里等于没写；<section>、<header> 被忽略或强制闭合，不是兼容性差，是客户端主动阉割。
<table> 的三层嵌套结构怎么写才安全
外层、中层、内层各司其职，超三层在 iOS Mail 和 Samsung Email 中会触发静默错乱（文字换行偏移、valign 失效），不是报错，而是渲染不可控。
必须写死属性，不能只靠 style：
• 外层：<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"> —— 提供背景色和居中上下文
• 中层：<table width="600" border="0" cellpadding="0" cellspacing="0" role="presentation"> —— width="600" 是硬性属性，style="width: 600px" 在 Outlook 2013/2016 中直接被忽略
• 内层：每个模块（标题、按钮、图文区）单独一个 <table>，宽度设为 600 或 300，禁用 colspan/rowspan（Outlook 支持极不稳定）
按钮、图片、文字这些细节怎么不出错
它们不是独立元素，必须“寄生”在已对齐的 <td> 里，靠 HTML 属性而非 CSS 控制行为。
• 按钮不用 <button>，改用嵌套 <table>：<table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table>
• 图片必须同时写 width、height 属性和对应 style，再加 style="display:block" 消除下方空白
• 文字对齐统一用 <td align="center">，别信 style="text-align:center"（Outlook 2010 中大概率失效）
• 小字号 footer 优先用 <font size="2">，比 CSS font-size 更稳
• 字体栈必须冗余：font-family: "Helvetica Neue", Arial, sans-serif;，且 <font face="Arial"> 在 Outlook 2007/2010 中比 CSS 更可靠，可双写
响应式不是靠 @media，而是靠结构共存
Gmail Web 和 iOS Mail 支持 @media only screen and (max-width: 600px)，但 Outlook Desktop（2016–2024）完全无视它。所谓“响应式”，其实是三套结构共存，靠客户端能力自动择一渲染。
• 桌面结构：并排两个 <td width="300">，放在同一 <tr> 内
• 移动端结构：用 class="stack-column" + @media 把并排 <td> 变成 display: block !important，前提是它们已包裹在同一个 <tr> 内
• Outlook 降级结构：用 mso-hide: all 和条件注释，让 Outlook 只看到最简表格骨架
别试图用 !important 救 margin，它在多数客户端里无效；想留空隙，只能靠相邻 <td> 的 padding 或空 <td>
真正难的不是写出来，是在删掉 70% 的现代 CSS 后，还能让信息清晰、操作可达、品牌可辨。越想让它看起来更好，越容易在某个客户端里崩掉——这不是技术限制，是邮件生态的客观现实。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
