Html Email 郵件html頁編寫指南

前言

寫過郵件的html的童學應該都知道，郵件的html一般都用table來布局，為什么呢？原因是大多數的郵件客戶端（比如Outlook和Gmail），會過濾HTML設置，讓郵件面目全非。

經過多次的郵件編寫實踐及度娘的指導，我發現，編寫HTML Email的竅門，就是使用15年前的網頁制作方法。

自制兼容outlook與foxmail郵件模版

局部重點規則

1. Doctype

目前，兼容性最好的Doctype是XHTML 1.0 Strict，事實上Gmail和Hotmail會刪掉你的Doctype，換上下面這個Doctype（不能使用HTML5的語法）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>HTML Email編寫指南</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/></head>
</html>

2. 布局

網頁的布局（layout）必須使用表格（table）。首先，放置一個最外層的大表格，用來設置背景，具體內容再在里面嵌套表格（div、p等還是不要想了）。

 <body style="margin: 0; padding: 0;"><table border="1" cellpadding="0" cellspacing="0" width="100%"><tr> <td> Hello! </td></tr></table></body>

3. 圖片相關

圖片是唯一可以引用的外部資源。其他的外部資源，比如樣式表文件、字體文件、視頻文件等，一概不能引用。

有些客戶端會給圖片鏈接加上邊框，要去除邊框。

需要注意的是，不少客戶端默認不顯示圖片（比如Gmail），所以要確保即使沒有圖片，主要內容也能被閱讀。

?1?<img?border="0"?style="display:block;outline:none;text-decoration:none,-ms-interpolation-mode:bicubic;border:none;">?

img指定width 與 height

因為在有些郵箱里，圖片不是默認加載的，往往加載前需要用戶的許可。那么高寬的指定可以使郵件在沒有圖片撐出樣子前也能保持良好的大小結構，加上?alt?屬性更可以明確告知圖片的內容讓用戶選擇是否下載它們。

如果因為項目需要（比如需要適配 Retina 高分屏），width?和?height?屬性更是必不可少的，并且由于一些 outlook 版本的奇葩表現，width?和?height?屬性一定不要加上單位！一定不要加上單位！一定不要加上單位！重要的事情說三遍。

因為加上單位會使一些版本的 OutLook 無法正確識別，導致圖片顯示使用實際的寬高而非我們設置的。

<img width="10px" height="10px" src="*.png" />

img在outlook2013下有間距

outlook2013中，堆疊的圖片會顯示大概10px的間距

這個問題只在圖片高度小于20px的時候出現，開心的是通過簡單的小技巧就可以解決：為td設置和圖片高度一樣的行高或image設為display：block；

<td width="600" height="80" style="line-height: 80px;" ><img height="80" src="http://www.website.com/images/Nature_01.jpg"width="600" />
</td>

背景圖片

style?內容里面?background?可以設置?color，但是?image?會被過濾，就是說不能通過 CSS 來設置背景圖片了。但是有一個很有意思的元素屬性，也叫?background，里面可以定義一個圖片路徑，但是功能有限，比如無法定位背景圖片等。

例如要給一個單元格加一個背景，必須這樣寫：

<td background="*.png"><!-- ... -->
</td>

margin 與 padding

Outlook 2007-2013 不支持圖片的?margin?與?padding?樣式，必要的時候可以嘗試?hspace?和?vspace?屬性：

<img vspace="10" hspace="10" src="*.png" />

4. 文字相關

所有的CSS規則，最好都采用行內樣式。因為放置在網頁頭部的樣式，很可能會被客戶端刪除。客戶端對CSS規則的支持情況，請看這里。

字體

在 HTML 郵件中，font-family?只支持系統字體，不支持自定義字體，也不支持?font?簡寫，color?盡可能也不要使用簡寫：

<p style="font: 8px/14px Arial, sans-serif;"></p>

要寫成這樣

?1?<p?style="font-size: 8px;font-family: Arial, sans-serif;"></p>?

對于加粗字體，我們可以使用?b?標簽而不是 CSS 的?font-weight，前文說過，HTML 標簽和屬性能解決的樣式決不使用 CSS 樣式。

行高

在 OutLook 中會有個默認的行高最小值，特別是當設置?font-family?為微軟雅黑時，默認的行高差不多為 Word 中的兩倍行距，如果?line-height?設置的值小于默認的行高，無論你設置的是多少，則始終使用默認值，在很多情況下這是不能忍的，好在有個神奇的?mso-line-height-rule，使用行高時添加?mso-line-height-rule:exactly;?就能使行高始終等于我們所設置的值。

<td style="mso-line-height-rule: exactly; line-height: 36px;"><!-- ... -->
</td>

這只是微軟的 CSS 屬性，對其他客戶端沒影響。并且該屬性只在塊元素上有效，所以想在?font?和?span?中用就洗洗睡了吧。

5. W3C校驗和測試工具

要保證最終的代碼，能夠通過W3C的校驗，因為某些客戶端會把不合格屬性剝離。還要使用測試工具（1,?2,?3），查看在不同客戶端的顯示結果。

發送HTML Email的時候，不要忘記MIME類型不能使用

?1?　Content-Type: text/plain;?

要使用

?1?Content-Type: Multipart/Alternative;?

6. 模板

使用別人已經做好的模板，是一個不錯的選擇（這里和這里），網上還可以搜到更多。

自己開發的話，可以參考HTML Email Boilerplate和Emailology。

全局規則

1.頁面寬度請設定在550到650px以內。

2.使用table表格來布局。

3.如果需要郵件居中顯示，請在table里設定align="center"。

4、不要寫<style>標簽、不要寫class，所有CSS都用style屬性，什么元素需要什么樣式就用style寫內聯的CSS。

5、不要使用外鏈的css樣式定義文字和圖片（外鏈的css樣式在郵件里將不能被讀取，所以發送出去的郵件因為沒有鏈接到樣式，將會使你的郵件內容樣式丟失），正確的寫法：<td style="font-family:arial;font-size:12px;color:black">文字</td>。

6、不使用flash、java、javascript、frames、iframe、activeX以及DHTML，如果頁面中的圖片一定要動態的，請將flash文件轉換成gif動畫使用，但在outlook2007里，gif將不能正常顯示，因為outlook2007限制gif動畫。

7、不要使用<table></table>以外的body、meta和html之類的標簽，部分郵箱系統會把這些過濾掉。

8、背景圖片代碼寫法如下：<table background="background.gif" cellspacing="0" cellpadding="0"></table>，但請注意，outlook對背景圖片不識別。

9.font-family屬性不能為空，否則會被QQ屏蔽為垃圾郵件。

10.若郵件模板內側邊或者上下有空白間距，不要用 padding，必須得用標準的 td 來設定空白間距，否則會導致各個郵箱解析不同。

11、在 yahoo 郵箱里定義 line-height 的注意事項：需在塊級元素里定義 line-height。如果 td 里有 p 標簽，則 line-height 也必須在 p 中定義。無論是 td 還是 p，如果有超鏈接，則都必須在 a 標簽里定義 line-height。如果只是在 td 或者 p 里面定義 line-height 的話，那 yahoo 郵箱將無法識別 a 里面的行高。

12.少用float, margin,padding. 絕對定位不能用，清除浮動用<table style="clear:both"></table>

13.如果 td 和 td 之間有間隔，使用<td style="border-bottom:10px solid #fff"></td>，這樣寫的話 td 之間是不會有間隔的。使用<td style="margin-bottom: 10px"></td>也是不會有空格的。如果 td 之間有間隙，必須用<td></td><td height="10px"> </td><td></td>來隔開。但是如果是 table，則<table style="border-top:10px solid #ffffff; border-bottom:20px solid #ffffff"></table>里面的內容會在上下有空行。

14.少用圖片，郵箱不會過濾你的img標簽，但是系統往往會默認不載入陌生來信的圖片，如果用了很多圖片的郵件，在片沒有載入的情況下，丑陋無比甚至看不清內容，沒耐心的用戶直接就刪除了。圖片上務必加上alt。

outlook 規則

1.在<td>里設置 margin 是無效的，不論是 margin-left、margin-right、margin-top 或者 margin-boottom 都沒有效果。

2.如果要使用<P>標簽要考慮到<P>標簽本身自帶的上下行之間的行高。

yahoo規則

1.在table里設定align="center"無法居中，需要內聯style=“margin：0 auto，width：XX”

foxmail 規則

1.foxmail中所有p標簽的Margin:0; 使用p標簽時需要設置margin