html邮件模板必须用table布局、内联样式、xhtml doctype，禁用flex/grid/@media；因outlook用word引擎、gmail剥离style标签、apple mail禁用float，现代css在邮件中基本失效。

html怎么制作邮件模板页面_html email template邮件模板兼容开发【附代码】

HTML 邮件模板不能用现代前端那一套 —— Flex、Grid、CSS 外链、@media 查询（多数客户端不认），必须回归到 2000 年代的写法：内联 style、table 布局、行内样式优先、属性尽量用老标准。

为什么 Outlook 里表格错位、Gmail 不显示背景色？

因为各大邮件客户端渲染引擎差异极大：Outlook (Windows) 用 Word HTML 引擎，Gmail (Web) 会剥离 <style></style> 标签并重写内联样式，Apple Mail 支持度稍好但依然禁用 float 和 position。所有“看起来正常”的网页式写法，在邮件里大概率崩。

别用 class 或外部 CSS —— 全部样式必须写进 style="..." 属性里
别依赖 div + margin/padding 布局 —— 用 table 套嵌 + cellpadding/cellspacing 控制间距
背景色慎用 background —— Outlook 只认 bgcolor 属性（如 <td bgcolor="#f5f5f5">） <li> <code>font 标签虽过时，但在 Outlook 中比 font-family 更可靠（可双写：<font face="Helvetica, Arial, sans-serif"></font>）

怎么写一个真正能发、能看、不乱排版的基础模板？

核心原则：语义退让，结构保守。下面是一个兼容主流客户端（包括 Outlook 2016/365、Gmail、Apple Mail）的最小可用骨架：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">

欢迎加入

感谢您注册我们的服务。

立即开始

注意几个关键点：

必须用 XHTML 1.0 Strict —— Outlook 某些版本会因 DOCTYPE 错误直接降级渲染
所有 table 必须带 cellpadding="0" cellspacing="0" border="0" 和 style="border-collapse:collapse;"，否则 Outlook 默认加边框和空隙
宽度控制靠 table width="600"，不是 max-width；移动端适配靠 <meta name="viewport"> + 宽度固定 + 内容自适应（别指望响应式断点）
链接按钮用 <a></a> 包裹文字，并设 display:inline-block + 内边距 —— 这是目前最稳的“按钮”写法

图片不显示、文字变小、链接失效？检查这四件事

这些不是 bug，是邮件客户端主动干预的结果：

img 标签必须带 alt、width、height 属性，且推荐使用绝对 URL（https://cdn.example.com/logo.png），相对路径或本地路径一律无效
文字变小？可能是 Gmail 自动缩放 —— 在上加 style="-webkit-text-size-adjust:100%;" 抑制（对 Apple Mail 也有效）
链接点击无反应？确认 href 是完整协议开头（https://），mailto: 和 tel: 在部分客户端（如 Outlook iOS）会被过滤或转义
字体 fallback 失效？别只写 font-family: "Segoe UI" —— 必须按顺序写全：例如 font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif

真正难的不是写出来，而是测出来。每个客户端都要单独验证，尤其是 Outlook for Windows（Word 渲染）、Gmail App (Android)（会删 style）、iOS Mail（支持 @media 但仅限部分属性）。上线前至少在 Litmus 或 Email on Acid 跑一遍多端截图 —— 手动发测试邮件到不同邮箱再截图，太容易漏掉细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！