新闻邮件模板必须用表格+内联样式实现兼容，因Outlook、Gmail等客户端主动过滤CSS、JS及现代HTML标签，仅支持降级语法以确保不崩。
新闻邮件模板不是“写个好看网页再发出去”，而是用一套被 Outlook、Gmail、Apple Mail 和 QQ 邮箱共同认可的“降级语法”把内容稳稳塞进收件箱——它不追求现代，只求不崩。
为什么不能直接套用网页开发经验写新闻邮件
你写的 <section><article> 在 Outlook 里变成换行乱码；flex 布局在 Gmail Web 中整块消失；@media 查询在 iOS Mail 里压根不触发；就连 <style>.btn{...}</style> 也会被 Gmail 主动删掉。这不是客户端“落后”，是它们主动选择剥离风险代码：JavaScript、外部资源、复杂渲染逻辑全被过滤，只剩最原始的表格 + 内联样式能活下来。
- Outlook（尤其 Windows 版）基于 MS Word 渲染引擎，
<div>和position: relative直接无视 - Gmail Web 会剥离整个
<head>和所有<style>标签 - QQ 邮箱忽略所有
class和id，也不支持<picture>或srcset - iOS Mail 对
max-width+ 百分比组合渲染异常，但认width="600"
<table> 怎么嵌套才不出错
新闻邮件的结构本质是三层表格：外层撑满、中层居中、内层分栏。嵌套超过 4 层时，部分 Android 客户端（如 Samsung Mail）会错乱或截断内容。
- 最外层：
<table width="100%" role="presentation">—— 必须加role="presentation"，否则 Outlook 可能误读为语义容器并重排 - 中间层：
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0">——600px是安全宽度上限，700px 在 Outlook 2016/2019 中会触发横向滚动 - 内容行：
<tr><td>...</td></tr>—— 所有文字、图片、按钮必须包在<td>里，<p>可以用，但不能脱离<td>单独存在 - 避免
<tr>直接包文字，Gmail App 会整行错位；也别用<colgroup>，QQ 邮箱不识别
新闻正文里的字体、链接和按钮怎么写才真生效
新闻邮件里没有“继承”这回事。每个 <p>、<span>、<a> 都得自己带完整样式，漏一个 font-family，就 fallback 到 Times New Roman。
立即学习“前端免费学习笔记（深入）”；
- 字体栈必须手写内联：
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6em;">—— 注意单位写1.6em，不是1.6，Outlook 2016 会忽略无单位值 - 链接要显式声明颜色和下划线：
<a href="https://example.com" style="color: #007bff; text-decoration: underline;">点击查看</a>—— 不设text-decoration，Gmail 默认加下划线，iOS Mail 默认不加 - 按钮不是
<button>，而是带样式的<table>或<td>：<td align="center" bgcolor="#007bff" style="border-radius: 4px;"><a href="..." style="display: block; color: #fff; font-weight: bold; padding: 12px 24px;">立即阅读</a></td> - 所有图片必须含
alt、width、height三个属性：<img src="https://example.com/news-1.jpg" alt="本周前端动态" width="600" height="300">—— 缺任意一个，QQ 邮箱可能拉伸，Outlook 可能塌陷
响应式怎么搞，又不靠 @media
纯靠 @media 做响应式，在多数客户端里等于没写。真正起效的是“条件注释 + 表格宽度切换 + 内联断点”，重点保 Outlook 和 iOS Mail。
- 基础断点用
@media screen and (max-width: 600px)包裹table[class="container"] { width: 100% !important; }—— 仅对 Apple Mail、部分 Android 客户端有效 - Outlook 桌面版完全不认
@media，必须用 Microsoft 条件注释：<!--[if mso]><table width="600"><tr><td><![endif]--> - 移动端适配优先靠
width="100%"+max-width: 600px组合，而不是百分比布局 —— iOS Mail 对width: 100%; max-width: 600px;支持稳定 - 别试图用
vw、rem或calc()，全部不支持
最难的不是写对第一版，而是改完一行 <td> 后，得立刻去 Outlook 2016、Gmail App、iOS Mail、QQ 邮箱四个环境里点开看是否错位——兼容性不是配置项，是每次保存后手动验证的体力活。
