前言
在進(jìn)行 HTML Email Boilerplate 開(kāi)發(fā)時(shí)遇到的最常見(jiàn)的問(wèn)題就是樣式渲染和資源引入問(wèn)題，這些問(wèn)題的產(chǎn)生往往是各大主流郵件客戶(hù)端（手機(jī)刚夺、桌面或是網(wǎng)頁(yè)版）對(duì)樣式支持或是資源引入的限制。
目錄
- 模板開(kāi)發(fā)
- 工具推薦
- 參考資料
模板開(kāi)發(fā)
首先冗酿，簡(jiǎn)明扼要提煉幾個(gè)郵件模板開(kāi)發(fā)時(shí)的關(guān)注點(diǎn)：
1. CSS 元素的有限支持
部分郵件客戶(hù)端不支持 <style> in <head> 或 <style> in <link>;
2. 外部引入的資源只能是圖片雏掠，不可以是 stylesheets, fonts 和 vedio 等
3. 通常使用 table 進(jìn)行頁(yè)面布局
- doctype
有一部分郵件客戶(hù)端（ Gmail 和 Hotmail ）會(huì)移除 doctype，當(dāng)然大多數(shù)會(huì)保留你的 doctype兵多，使用 XHTML1.0 的 doctype 兼容性最好以及出現(xiàn)最少開(kāi)發(fā)者意想之外的情形尖啡；
XHTML 1.0 的 doctype 代碼如下：
<!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 >example.org</a>.</p>
</body>
</html>
<!-- origin from XHTML 1.0 -->
- layout
撰寫(xiě)頁(yè)面的起步通常是通過(guò) HTML 元素進(jìn)行頁(yè)面內(nèi)容布局橄仆，但是我們無(wú)法隨心所欲的使用一些常用的元素，比如 HTML5 的<canvas>衅斩，<audio>和<vedio>的兼容性就極差盆顾；
此外，由于部分客戶(hù)端對(duì) CSS 的一些布局樣式的支持較差畏梆，比如
position 和 float 等您宪，導(dǎo)致常用的 float + position的布局方法失效；
因此奠涌，HTML Email Boilerplate 常用的通用布局方法是采用 tables
通過(guò)嵌套的
table 可以實(shí)現(xiàn)復(fù)雜的布局宪巨；
<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>
筆者一開(kāi)始使用 table 布局，犯了一個(gè)錯(cuò)誤铣猩，在此分享一番：
<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 個(gè) tr 的寬度充滿(mǎn)一行揖铜，結(jié)果上面代碼導(dǎo)致出現(xiàn)意外的布局。
因此在為每個(gè) td 的寬度進(jìn)行百分比賦值時(shí)达皿，如果某一行的 td 只有一個(gè)時(shí)天吓，通常設(shè)置 td 的 colspan 屬性去實(shí)現(xiàn)，colspan="x"的 x 值根據(jù)表格某行最多的 td 去確定峦椰。
另一種比較統(tǒng)一的設(shè)置屬性的方式是：
<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>
【code link 】
- style
上圖顯示 Gmail 不支持樣式表通過(guò)
<head> 和 <link> 的方式引入 HTML，為了保持對(duì) Gmail 的兼容性汤功，因此 HTML Email Boilerplate 的開(kāi)發(fā)通常采用 inline style 的方法物邑。當(dāng)然，我們可以先將樣式
<head> 滔金，然后在通過(guò)一些 CSS Inliner 工具色解，如putsmail PutsMail 直接嵌入
HTML 元素中。
HTML Email Boilerplate 開(kāi)發(fā)主要的注意事項(xiàng)就是以上幾點(diǎn)餐茵，當(dāng)然涉及不同瀏覽器的元素樣式處理不一致的問(wèn)題科阎，我們可以采用第三方寫(xiě)好的 Email-Boilerplate去解決上述問(wèn)題。
工具推薦
查詢(xún)郵件客戶(hù)端所支持樣式屬性的網(wǎng)站
campaignmonitorGmail 的 Email Template 插件
Gmail? Email TemplatesCSS Inliner
putsmailEmail Boilerplate
Email Boilerplate
參考資料
XHTML? 1.0
Say Hello to the HTML Email Boilerplate
What You Should Know About HTML Email
A Guide to CSS Inlining in Emai
