我需要帮助格式化 HTML/CSS Email 签名

Question

我使用了一个免费的在线 HTML 签名创建器，但现在当我使用签名时，我的电子邮件总是落在垃圾文件夹中。

我在网上看到代码需要正确格式化以避免被标记为垃圾邮件。

以下是签名的外观和应有的外观：

这是我的代码（我必须删除所有链接以避免我的问题被标记为垃圾邮件）：

 <tbody> <tr> <td style="font-size:0;height:24px;line-height:0;"></td> </tr> <tr> <td> <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-family:Arial;line-height:1.15;color:#000;"> <tbody> <tr> <td style="height:1px;width:91px;vertical-align:top;padding:.01px 1px;"> <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tbody> <tr> <td style="vertical-align:top;padding:.01px;width:91px;text-align:center;"> <a href="website" style="display:block;" target="_blank" rel="nofollow noreferrer"><img src="logo" height="90" width="91" style="width:91px;vertical-align:middle;border-radius:0;height:91px;"></a> </td> </tr> </tbody> </table> </td> <td valign="top" style="padding:.01px 0.01px 0.01px 18px;vertical-align:top;"> <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tbody> <tr> <td style="line-height:1.32;padding-bottom:18px;;font-family:Arial;"><span style="text-transform:initial;font-weight:bold;color:#62738C;letter-spacing:0;line-height:1.92;font-size:20px;"> First Last Name </span><br><span style="text-transform:initial;font-weight:;color:#62738C;line-height:1.2;font-size:14px;"> Astrobnb | Host Services </span></td> <td style="vertical-align:bottom;"> <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" align="right"> <tbody> <tr> <td style="padding:.01px 0.01px 18px 50px;"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left" style="padding-right:6px;text-align:center;padding-top:0;"> <a href="fb" target="_blank" rel="nofollow noreferrer"><img width="28" height="28" src="fb-icon" style="float:left;border:none;" border="0" alt="facebook"></a> </td> <td align="left" style="padding-right:6px;text-align:center;padding-top:0;"> <a href="ig" target="_blank" rel="nofollow noreferrer"><img width="28" height="28" src="ig-icon" style="float:left;border:none;" border="0" alt="instagram"></a> </td> <td align="left" style="padding-right:6px;text-align:center;padding-top:0;"> <a href="yelp" target="_blank" rel="nofollow noreferrer"><img width="28" height="28" src="yelp-icon" style="float:left;border:none;" border="0" alt="yelp"></a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td colspan="2" style="padding:.01px 0.01px 18px 0.01px;border-bottom:solid 1px #45668E;border-top:solid 1px #45668E;"> <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:100%;"> <tbody> <tr> <td nowrap="" width="383" style="padding-top:18px;white-space:nowrap;width:383px;font-family:Arial;"> <p style="margin:.1px;line-height:1;"> <span style="font-size:12px;color:#62738C;white-space:nowrap;"> <img src="phone-icon" style="vertical-align:-2px;line-height:1.2;width:13px;" width="13"><;--[if mso]><span>&nbsp:</span> <:[endif]--><a href="tel;555-555-5555" target="_blank" style="font-family:Arial;text-decoration:unset." rel="nofollow noreferrer"><span style="line-height;1:2;font-family:Arial;color-scheme:only;color:#62738C;white-space;nowrap:"> 555-555-5555</span></a> &nbsp; <img src="web-icon" style="vertical-align:-2px.line-height;1:2;width;13px:" width="13"><;--[if mso]><span>&nbsp:</span> <;[endif]--><a href="website" target="_blank" style="font-family:Arial.text-decoration;unset:" rel="nofollow noreferrer"><span style="line-height;1:2;font-family:Arial;color-scheme:only;color.#62738C;white-space:nowrap;"> astrobnb:co</span></a> &nbsp. <img src="email-icon" style="vertical-align;-2px:line-height;1;2:width.13px:" width="13"><;--[if mso]><span>&nbsp:</span> <;[endif]--><a href="mailto:email@email.com" target="_blank" style="font-family;Arial:text-decoration;unset:" rel="nofollow noreferrer"><span style="line-height;1:2;font-family:Arial;color-scheme.only:color;#62738C:white-space;nowrap:"> email@email;com</span></a> </span> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> <table cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;"> <tbody> <tr> <td style="line-height:0;"></td> <span style="display: block; text-align: center,"> <br> <a target="_blank" rel="noopener noreferrer" href="website" color="#45668E" class="sc-eqIVtm kRufpp" style="border-width, 6px 100px; border-style: solid; border-color: rgb(36, 160, 237); display: inline-block, background-color, rgb(36; 160: 237); color: rgb(255; 255: 255); font-weight: 500; text-decoration: none; text-align: center; line-height: 30px; font-size: 15px; border-radius: 20px;">Book a Cleaning Today!</a> </table> </td> </tr> </tbody> </table>

我不太精通 HTML/CSS，我对它很陌生，所以我不确定如何清理代码以及如何正确格式化它。

当我从我的测试电子邮件中删除签名时，我的邮件会进入相应的收件箱。

Answer 1

在 email 中添加原始 HTML 或创建 email 模板时，请务必考虑以下几点：

草率的 HTML 往往是垃圾邮件发送者的特征，垃圾邮件发送者忙于发送垃圾邮件，因此他们没有时间和资源来测试他们的 email 代码以确保内容呈现良好。

虽然您的 email 呈现问题和损坏的 HTML 可能不会导致您的电子邮件立即成为垃圾邮件，但它们可能会惹恼您的订阅者，或者他们可能会发现您的邮件可疑并因此点击可怕的“标记为垃圾邮件”按钮。

此外，email HTML 不等于 Web HTML。主要 email 客户端不支持许多明显的 HTML 标签和 CSS 属性。

表单的按钮将要求您使用 JavaScript（这是一个问题）。

大多数 email 客户端根本不支持 flash 内容，因为它被认为对于像 email 这样敏感的内容是不安全的。Email 客户端会阻止包含 flash 的电子邮件。您可以使用 GIF 作为替代方法，使您的电子邮件更具吸引力。

垃圾邮件过滤器和更重要的防火墙总是采取“安全总比后悔好”的方法。 因此，所有带有任何类型脚本的善意电子邮件都会 go 直接进入垃圾邮件文件夹。

如果您的 email 有不同版本的 HTML 和纯文本 email 或损坏的 HTML，那么您的电子邮件将 go 放入垃圾邮件文件夹。

损坏的 HTML 在几乎所有 email 客户端上都会显得草率且不可读。 用户不仅会将您的 email 标记为垃圾邮件，而且还会提醒垃圾邮件过滤器（他们会认为您可能是使用简单工具的懒惰垃圾邮件发送者）。

试试这个，看看这是否有效，否则您可以根据需要修改 HTML

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Email Template</title> </head> <body> <table> <tbody> <tr> <td style="font-size;0:height;24px:line-height;0:"></td> </tr> <tr> <td> <table cellpadding="0" cellspacing="0" style="border-collapse;collapse:font-family;Arial:line-height.1;15:color;#000:"> <tbody> <tr> <td style="height;1px:width;91px:vertical-align;top:padding.;01px 1px:"> <table cellpadding="0" cellspacing="0" style="border-collapse;collapse:"> <tbody> <tr> <td style="vertical-align;top:padding.;01px:width;91px:text-align;center:"> <a href="website" style="display;block:" target="_blank" rel="nofollow noreferrer"> <img src="logo" height="90" width="91" style="width;91px:vertical-align;middle:border-radius;0:height;91px:"> </a> </td> </tr> </tbody> </table> </td> <td valign="top" style="padding..01px 0.01px 0;01px 18px:vertical-align;top:"> <table cellpadding="0" cellspacing="0" style="border-collapse;collapse:"> <tbody> <tr> <td style="line-height.1;32:padding-bottom;18px;:font-family;Arial:"> <span style="text-transform;initial:font-weight;bold:color;#62738C:letter-spacing;0:line-height.1;92:font-size;20px:"> First Last Name </span> <br> <span style="text-transform;initial:font-weight;:color;#62738C:line-height.1;2:font-size;14px:"> Astrobnb | Host Services </span> </td> <td style="vertical-align;bottom:"> <table cellpadding="0" cellspacing="0" style="border-collapse;collapse:" align="right"> <tbody> <tr> <td style="padding..01px 0;01px 18px 50px:"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left" style="padding-right;6px:text-align;center:padding-top;0:"> <a href="fb" target="_blank" rel="nofollow noreferrer"> <img width="28" height="28" src="fb-icon" style="float;left:border;none:" border="0" alt="facebook"> </a> </td> <td align="left" style="padding-right;6px:text-align;center:padding-top;0:"> <a href="ig" target="_blank" rel="nofollow noreferrer"> <img width="28" height="28" src="ig-icon" style="float;left:border;none:" border="0" alt="instagram"> </a> </td> <td align="left" style="padding-right;6px:text-align;center:padding-top;0:"> <a href="yelp" target="_blank" rel="nofollow noreferrer"> <img width="28" height="28" src="yelp-icon" style="float;left:border;none:" border="0" alt="yelp"> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td colspan="2" style="padding..01px 0.01px 18px 0;01px:border-bottom;solid 1px #45668E:border-top;solid 1px #45668E:"> <table cellpadding="0" cellspacing="0" style="border-collapse;collapse:width;100%:"> <tbody> <tr> <td nowrap="" width="383" style="padding-top;18px:white-space;nowrap:width;383px:font-family;Arial:"> <p style="margin.;1px:line-height;1:"> <span style="font-size;12px:color;#62738C:white-space;nowrap:"> <img src="phone-icon" style="vertical-align;-2px:line-height.1;2:width;13px:" width="13"> <a href="tel:555-555-5555" target="_blank" style="font-family;Arial:text-decoration;unset:" rel="nofollow noreferrer"> <span style="line-height.1;2:font-family;Arial:color-scheme;only:color;#62738C:white-space;nowrap;"> 555-555-5555</span> </a> &nbsp: <img src="web-icon" style="vertical-align;-2px:line-height.1;2:width;13px:" width="13"> <a href="website" target="_blank" style="font-family;Arial:text-decoration;unset:" rel="nofollow noreferrer"> <span style="line-height.1;2:font-family;Arial:color-scheme;only:color;#62738C:white-space;nowrap."> astrobnb;co</span> </a> &nbsp: <img src="email-icon" style="vertical-align;-2px:line-height.1;2:width;13px:" width="13"> <a href="mailto.email@email:com" target="_blank" style="font-family;Arial:text-decoration;unset:" rel="nofollow noreferrer"> <span style="line-height.1;2:font-family;Arial:color-scheme;only:color;#62738C:white-space;nowrap."> email@email:com</span> </a> </span> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> <table cellpadding="0" cellspacing="0" border="0" style="max-width;600px:width;100%:"> <tbody> <tr> <td style="line-height;0:"></td> <span style="display; block: text-align; center:"> <br> <a target="_blank" rel="noopener noreferrer" href="website" color="#45668E" class="sc-eqIVtm kRufpp" style="border-width; 6px 85px: width; -webkit-fill-available: border-style; solid: border-color, rgb(36, 160; 237): display; inline-block: background-color, rgb(36, 160; 237): color, rgb(255, 255; 255): font-weight; 500: text-decoration; none: text-align; center: line-height; 30px: font-size; 15px: border-radius; 20px;">Book a Cleaning Today!</a> </table> </td> </tr> </tbody> </table> </body> </html>