默认 body 邮件 HTML CSS - HTML

当我们需要发送电子邮件时，HTML 和 CSS 是让邮件内容更加丰富和专业的关键。但是，许多邮件客户端和 Web 邮件客户端的 HTML/CSS 支持不尽相同，因此编写稳健并兼容各种客户端的电子邮件也变得非常具有挑战性。

HTML Email 的要求

• 可以在任何邮箱客户端和 Web 邮箱中显示
• 风格与公司品牌一致
• 吸引人并使阅读变得更为容易
• 使有用的信息更加突出

HTML Email 的关键要素

HTML 邮件包含许多特殊的 HTML 标签和属性，其中包括：

table 标签

HTML 邮件必须使用表格来处理布局和对齐问题。

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top">左边区域</td>
        <td align="right" valign="top">右边区域</td>
    </tr>
</table>

td 和 tr 标签

表格单元格将使用 td 标记。每一行都将使用 tr 标记。

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top">左边区域</td>
        <td align="right" valign="top">右边区域</td>
    </tr>
    <tr>
        <td align="center" colspan="2">此处为底部内容</td>
    </tr>
</table>

td 的属性

td 属性用来对齐文本和图片以及创建行间距和边缘。

<td align="center">这是对齐居中的文本内容</td>
<td valign="top">这是到顶部对齐的文本内容</td>
<td bgcolor="#ff0000">这是背景为红色的单元格</td>
<td rowspan="2">此单元格将占用两行</td>

行内样式和嵌入样式表

邮件客户端中的 CSS 支持不尽相同，因此行内样式是必须的。如果使用了嵌入样式表，请务必注意兼容性问题。

<td align="center" style="font-family: Arial, sans-serif; font-size: 16px; color: #000000;">样式内容</td>

示例

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="center" valign="top">
            <!-- 左边列 -->
            <table width="30%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td align="center" style="font-family: Arial, sans-serif; font-size: 16px; color: #000000;">欢迎来到我们的网站</td>
                </tr>
                <tr>
                    <td align="center" style="font-family: Arial, sans-serif; font-size: 24px; color: #f9a11e;">特别优惠</td>
                </tr>
                <tr>
                    <td align="center"><img src="https://via.placeholder.com/200x200" width="200" height="200" alt="产品图片"></td>
                </tr>
                <tr>
                    <td align="center" style="font-family: Arial, sans-serif; font-size: 20px; color: #000000;">优惠价：$49.99</td>
                </tr>
                <tr>
                    <td align="center"><a href="#" target="_blank" style="font-family: Arial, sans-serif; font-size: 20px; color: #ffffff; text-decoration: none; background-color: #f9a11e; padding: 10px 15px; border-radius: 5px;">现在购买</a></td>
                </tr>
            </table>
            <!-- 右边列 -->
            <table width="70%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td align="center" style="font-family: Arial, sans-serif; font-size: 16px; color: #000000;">关于我们</td>
                </tr>
                <tr>
                    <td align="left" valign="top" style="font-family: Arial, sans-serif; font-size: 14px; color: #555555; line-height: 1.5;">
                        <p>我们成立于 2010 年，是一家提供高品质产品和服务的公司。我们的产品线包括电子产品、家庭电器、玩具等。</p>
                        
                        <p>欢迎来到我们的网站了解更多信息。如果您有任何问题，可以通过电子邮件 <a href="mailto:support@example.com" style="color: #f9a11e; text-decoration: none;">support@example.com</a> 或者通过以下方式联系我们：</p>
                        
                        <ul>
                            <li>电话：+1 (555) 555-1234</li>
                            <li>邮件：support@example.com</li>
                            <li>地址：123 Main St, Anytown, USA</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="center" style="font-family: Arial, sans-serif; font-size: 14px; color: #555555; padding: 20px 0;">此电子邮件由我们的机器人发送，因此请勿回复此邮件。如果您需要帮助，请联系我们的客服。</td>
    </tr>
</table>

以上是一个简单示例，包含两个列，左边的列包含商品信息和购买按钮，右边的列包含公司信息和联系方式。

结论

编写兼容所有客户端的 HTML 邮件是相当有挑战性的，但是通过细心的调试和测试，您可以借助 HTML 和 CSS 创建完美无缺的电子邮件。请务必注意保证邮件体验良好，从而提高信息传递的效果。