[轉載] Html Email 郵件html頁編寫指南
Html Email 郵件html頁編寫指南
前言
寫過郵件的html的童學應該都知道，郵件的html一般都用table來佈局，為什麼呢？原因是大多數的郵件客戶端（比如Outlook和Gmail），會過濾HTML設定，讓郵件面目全非。
經過多次的郵件編寫實踐及度孃的指導，我發現，編寫HTML Email的竅門，就是使用15年前的網頁製作方法。
區域性重點規則
1. Doctype
目前，相容性最好的Doctype是XHTML 1.0 Strict，事實上Gmail和Hotmail會刪掉你的Doctype，換上下面這個Doctype（不能使用HTML5的語法）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>HTML Email編寫指南</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 7 </head> 8 </html>
2. 佈局
網頁的佈局（layout）必須使用表格（table）。首先，放置一個最外層的大表格，用來設定背景，具體內容再在裡面巢狀表格（div、p等還是不要想了）。
1 <body style="margin: 0; padding: 0;"> 2 <table border="1" cellpadding="0" cellspacing="0" width="100%"> 3 <tr> 4 <td> Hello! </td> 5 </tr> 6 </table> 7 </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