首頁 > 開發者 > JavaScript
Html Email 郵件html頁編寫指南，email指南
前言
寫過郵件的html的童學應該都知道，郵件的html一般都用table來布局，為什麼呢？原因是大多數的郵件用戶端（比如Outlook和Gmail），會過濾HTML設定，讓郵件面目全非。
經過多次的郵件編寫實踐及度娘的指導，我發現，編寫HTML Email的竅門，就是使用15年前的網頁製作方法。
下面是一些html郵件編寫的規則
局部重點規則
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;">
4. 行內樣式
所有的CSS規則，最好都採用行內樣式。因為放置在網頁頭部的樣式，很可能會被用戶端刪除。用戶端對CSS規則的支援情況，請看這裡。
另外，不要採用CSS的簡寫形式，有些用戶端不支援。比如，不要寫成下面這樣：
<p style="font: 8px/14px Arial, sans-serif;"></p>
要寫成這樣
1 <p style="font-size: 8px;font-family: Arial, sans-serif;"></p>
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
