前言

在进行 HTML Email Boilerplate 开发时遇到的最常见的问题就是样式渲染和资源引入问题，这些问题的产生往往是各大主流邮件客户端（手机、桌面或是网页版）对样式支持或是资源引入的限制。

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Virtual Library</title>
  </head>
  <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>
<!-- origin from XHTML 1.0 -->

layout
撰写页面的起步通常是通过 HTML 元素进行页面内容布局，但是我们无法随心所欲的使用一些常用的元素，比如 HTML5 的 <canvas>，<audio> 和 <vedio>的兼容性就极差；

HTML5 support for email clients
此外，由于部分客户端对 CSS 的一些布局样式的支持较差，比如 position 和 float 等，导致常用的 float + position的布局方法失效；

CSS support for email clients

因此，HTML Email Boilerplate 常用的通用布局方法是采用 tables

table support for email clients
通过嵌套的 table 可以实现复杂的布局；

  <table>
    <tr>
      <td width="50%"> 33.33% </td>
      <td width="25%"> 33.33% </td>
      <td width="25%"> 33.33% </td>
    </tr>
    <tr>
      <td colspan="3"> 100% </td>
    </tr>
  </table>

table-layout-01

笔者一开始使用 table 布局，犯了一个错误，在此分享一番：

  <table>
    <tr>
      <td width="33.33%"> 33.33% </td>
      <td width="33.33%"> 33.33% </td>
      <td width="33.33%"> 33.33% </td>
    </tr>
    <tr>
      <td width="100%"> 100% </td>
    </tr>
  </table>

本意是想将第 2 个 tr 的宽度充满一行，结果上面代码导致出现意外的布局。

table-layout-02

因此在为每个 td 的宽度进行百分比赋值时，如果某一行的 td 只有一个时，通常设置 td 的 colspan 属性去实现，colspan="x"的 x 值根据表格某行最多的 td 去确定。

另一种比较统一的设置属性的方式是：

  <table>
    <tr>
      <td colspan="100%"> 50% </td>
    </tr>
    <tr>
      <td colspan="33.33%"> 33.33% </td>
      <td colspan="33.33"> 33.33% </td>
      <td colspan="34%"> 33.33% </td> <!-- 这里的 colspan 的值需要 hack 一下，才能保持布局一致性 -->
    </tr>
    <tr>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
    </tr>
    <tr>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
    </tr>
  </table>

table-layout-03
【code link 】

style

style method injection of email clients
上图显示 Gmail 不支持样式表通过 <head> 和 <link> 的方式引入 HTML，为了保持对 Gmail 的兼容性，因此 HTML Email Boilerplate 的开发通常采用 inline style 的方法。
当然，我们可以先将样式 <head> ，然后在通过一些 CSS Inliner 工具，如
putsmail PutsMail 直接嵌入 HTML 元素中。

HTML Email Boilerplate 开发主要的注意事项就是以上几点，当然涉及不同浏览器的元素样式处理不一致的问题，我们可以采用第三方写好的 Email-Boilerplate去解决上述问题。