HTML 邮件验证
验证 HTML 邮件代码在不同邮件客户端中的兼容性
HTML 邮件代码
粘贴你的 HTML 代码或上传 HTML 文件
Enter your HTML code and click "验证 HTML" to see the analysis
关于此工具
本页提供关于 HTML 邮件代码校验的原创、经人工审校的内容，解释主流客户端支持的 HTML 与 CSS 子集，以及如何修复常见渲染问题。
关于 HTML 邮件验证
HTML email validation ensures your email campaigns render correctly across different email clients and devices. Unlike web browsers, email clients have varying levels of HTML and CSS support, making validation crucial for successful email marketing.
重要提示： Email clients use different rendering engines than web browsers, which means HTML that works perfectly in a browser might break in email clients.
我们验证什么：
- HTML 结构：正确的 DOCTYPE、语义化标记和标签嵌套
- CSS 支持：内联样式、受支持的属性和回退方案
- 图片：替代文本、尺寸和无障碍访问
- 链接：正确的格式、跟踪参数和无障碍访问
- 表格布局：对邮件安全的布局结构
- 媒体查询：响应式设计兼容性
- 文本内容：文本与图片比例，影响投递率
HTML 邮件最佳实践
HTML 结构：
- 使用表格布局以获得最大兼容性
- 包含正确的 DOCTYPE：
<!DOCTYPE html> - 为图片设置明确的宽度和高度属性
- 使用内联 CSS 而非外部样式表
- 为所有图片包含替代文本
- 为所有链接和图片使用绝对 URL
CSS 指南：
- 避免使用 CSS Grid 和 Flexbox（支持有限）
- 使用带回退方案的通用字体
- 尽量保持 CSS 简单并内联
- 谨慎使用媒体查询并提供回退方案
- 避免使用 CSS 简写属性
- 使用回退颜色测试背景图片
Mobile First:超过 60% 的邮件在移动设备上打开。先按移动端设计，再增强桌面端体验。
内容指南：
- 保持良好的文本与图片比例（60:40 或更好）
- 保持邮件宽度在 600-800px
- 有效利用预览文本
- 包含清晰的行动号召
- 提供纯文本版本
邮件客户端兼容性
高兼容性客户端：
Gmail (Web, Mobile)Apple MailThunderbirdSamsung Email
兼容性有限的客户端：
Outlook 2016-2019
使用 Word 渲染引擎，CSS 支持有限
Yahoo Mail
会去除部分 CSS 属性，媒体查询支持有限
Outlook.com
比桌面版 Outlook 更好，但仍有限制
Testing Strategy:始终在多个客户端中测试你的邮件。Focus on the clients your audience uses most frequently.
各客户端的常见问题：
- Outlook：不支持 CSS Grid、Flexbox 或 div 背景图片
- Gmail：会去除 <head> 中的 CSS，请使用内联样式
- Yahoo：媒体查询支持有限，可能去除部分 CSS
- 移动客户端：视口处理和触摸目标大小各不相同
常见问题
为什么我的邮件在不同客户端中显示不同？
不同的邮件客户端使用不同的渲染引擎，对 HTML/CSS 的支持程度也不同。与遵循 Web 标准的浏览器不同，邮件客户端更注重安全和性能，而非渲染保真度。
邮件布局应该使用表格还是 div？
主布局结构应使用表格，因为它们具有最佳的跨客户端兼容性。你可以在表格单元格内使用 div 存放内容，但应避免复杂的 div 布局。
如何让邮件响应式？
使用带回退方案的媒体查询、流体表格和可缩放图片。由于客户端对媒体查询的支持差异很大，请充分测试。
邮件中处理图片的最佳方式是什么？
始终包含替代文本、设置明确的尺寸、使用绝对 URL，并为背景图片提供回退颜色。许多客户端默认阻止图片。
应该多久验证一次邮件 HTML？
验证每个新模板，并在重大更改后进行验证。当发现渲染问题或在重要活动前也应进行验证。