如何用html写好看的邮件内容

邮件中嵌入html的注意事项

要制作html格式的邮件，由于邮件客户端对样式的支持有限，要兼容很多种浏览器需要注意很多原则

1.邮件使用table+css布局

2.邮件主要部分在body内部，所以样式一定要写成内嵌的，不能在head标签中写style，也不能外联。
如：

<div
      id="app"
      style="max-width: 600px; font-family: “Microsoft YaHei” !important"
    >
      <table
        width="100%"
        border="0"
        cellspacing="0"
        cellpadding="0"
        style="font-family: '微软雅黑'"
      >
        <tbody>
          <tr>
            <td>
              <table width="100%" border="0" cellpadding="5" cellspacing="0">
                <tbody>
                  <tr>
                    <td>
                      <div
                        class="header"
                        style="
                          height: 50px;
                          text-align: right;
                          width: 95%;
                          margin: 0 auto;
                        "
                      ><img src=""></img></div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <table
                        width="100%"
                        border="0"
                        cellpadding="5"
                        cellspacing="0"
                        style="width: 90%; margin: 0 auto"
                      >
                        <tbody>
                          <tr>
                            <td>
                              <span
                                style="
                                  font-size: 14px;
                                  color: #333;
                                  font-weight: bold;
                                  margin-top: 20px;
                                "
                              >
                                您好，<br />Hello,
                              </span>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <table
                                width="100%"
                                border="0"
                                cellpadding="5"
                                cellspacing="0"
                                style="
                                  font-size: 12px;
                                  color: #818181;
                                  padding-bottom: 20px;
                                "
                              >
                                <tbody>
                                  <tr>
                                    <td>
                                      <span>欢迎订阅《XXX》！</span><br />
                                      <span>
                                        今后我们将为您带来游戏的最新动态、幕后花絮、独家情报，以及其他更多内容。 </span
                                      ><br />
                                      <span>请点击按钮，确认订阅。</span>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

3.不能用浮动的方式定位。position：absolute;float:left;等都不行，float在qq邮箱客户端中可以识别，但是在outlook中无法识别。

4.表格的border，使用table上的border属性，可以在qq浏览器中兼容，但是在outlook中打开是没有边框的，这种情况，我么只能给每一个td加一个border，在table中使用border-collapse:collapse;来合并重复的边框。

      <table
        width="90%"
        border="1px"
        style="
          color: #000;
          margin: 0;
          font-size: 14px;
          line-height: 24px;
          font-family: '微软雅黑', Helvetica, Arial, sans-serif;
          text-align: left;
          margin: 40px auto;
          border-collapse: collapse;
        "
      ></table>

这样设置border会在outlook中显示不出border；

5.为了保证兼容性，需要把邮件的宽度设置为600px，最大600px；

6.少用img，因为很多邮箱客户端默认不显示图片，所以，如果需要图片的话，一定要写好alt和title；

7.背景图片，尽量用background-color使用纯色背景，如果一定要用背景图片，使用background属性，

<div background=”http://XXX.png”></div>

8.邮件不支持javascript，flash以及一些特殊的标签。

由于邮件客户端对css支持各有不同，所以一定要多测试再发送，保证样式的正确。如果出现了不兼容的情况，一定要耐心的使用最简单的方式进行兼容，尽量少用特殊标签及比较复杂的属性。