SuperAPI AI 工具集

html-email

营销与增长

查看项目

更新于 10-15 18:45

技能介绍

用途:把 HTML 邮件设计成一个自包含、可直接发送的 .html 文件,确保在真实邮件客户端中正常渲染。邮件渲染不同于浏览器渲染,Gmail、Outlook、Apple Mail 各自会剥离或破坏不同内容,因此需按邮件兼容规则编写。

主要能力与布局规则:使用嵌套的 <table role="presentation" cellpadding="0" cellspacing="0" border="0"> 结构,不用 flexbox、grid、float、position。采用一个居中的包裹表,max-width 600px,单列流式布局(堆叠行优于并排列)。所有样式内联到对应元素上;<head> 中的 <style> 块只能放无法内联的内容(如媒体查询、深色模式微调),且部分客户端会整体丢弃,因此邮件仅靠内联样式也必须可读。

限制:不允许 JavaScript(会被普遍剥离),不允许外部样式表,不使用网络字体,改用邮件安全字体栈(Arial、Helvetica、Georgia、Verdana、Tahoma、'Courier New')并带通用回退。视觉设计应由带颜色的表格单元格、边框、间隔单元格和文字构成,而非图片。无法在此托管图像,引用的项目文件对收件人不存在;若必须用图,留出明确标记的占位单元格并附 alt 文本,提示用户在发送前替换为已托管的 https URL。按钮采用“防弹”写法:带 padding、bgcolor 和内联 border-radius 的 <td>,其中 <a> 以 display:block 和内联 color 填满,绝不用图片,也不用带样式的 <button>。

客户端差异:Outlook(Word 引擎)需为每个表格/单元格指定显式宽度,用 mso-line-height-rule:exactly 设置行高,并把仅针对 Outlook 的修复包在 <!--[if mso]> … <![endif]--> 条件注释中。Gmail 会截断超过约 100KB 的 HTML,应远低于该值。添加 <meta name="color-scheme" content="light dark">,并选择能经受深色模式反转的颜色(避免纯 #000/#fff 背景,在中性色填充上测试文字)。

可送达性与无障碍:<body> 第一个元素为隐藏的 preheader span(约 85 字符),用于在主题行旁预览;图像要有 alt 文本,<html> 要有 lang,使用真实 <a href> 链接(不要死链 #),营销类邮件需带可信的退订行和邮寄地址页脚。按 600px 宽度展示设计,并在回复中说明该文件是可直接发送的 HTML,用户可放入其邮件工具。