HTML郵件模板編寫規則，編寫郵件HTML模板
阿新 • • 發佈：2018-12-17
工作中遇到需要發郵件模板給客戶傳送憑證，踩坑踩出來一下規則：
1.所有樣式必須行內，否則不起作用
大部分郵件客戶端中不支援使用外接css樣式，最好使用內聯樣式
2.所有佈局必須使用table，複雜佈局使用table巢狀或單元格合併
佈局儘量使用table ，將頁面拆分成由上到下幾個模組，有幾個模組用幾個tr標籤。
3.有的郵件客戶端table預設有邊框，需要在程式碼中取消
大部分郵件客戶端table預設有邊框，在行內樣式中設為0即可
4.元素樣式儘量拆開寫，margin:0;>margin-top:0;…
元素樣式拆開寫，border，margin，padding，background等等
5.元素需要取消預設樣式 padding-top:0…
像p標籤，tr，tb標籤很多都會有預設的padding和margin樣式，會影響到頁面佈局
6.如果有上下間隔，儘量不使用padding和margin，使用空的table或tr元素
頁面中所有上下間隔儘量使用空的tr標籤，如果使用margin可能會造成問題
7.沒有字號標籤都新增font-size:0px;具體到標籤再設定具體字號
頁面儘量所有標籤都設定字號為0，因為有的郵件客戶端會塞入大量實體空格標籤造成頁面佈局錯亂
以上是我自己編寫HTML郵件模板的在Outlook，Foxmail，163，QQ郵箱，阿里雲企業郵箱測試踩坑得出的規則。
郵件模板中最好不使用CSS3，也不是說不能使用，比如border-radius在大部分郵箱中是有效的，但是在某些郵箱（Outlook）中不起作用。為了郵件顯示不會錯亂，儘量不要使用CSS3的屬性用作佈局等操作。
遇到的坑彙總(大家遇到其他坑也可以在評論區進行說明，說不定會幫到其他人)
坑1:
img標籤的寬不用寫到style裡，寫到外面且不需要單位，否則在outlook下會有問題
<img width="60" height="60" alt="" />
坑2:
td標籤可以嵌入table標籤，請不要再a標籤中嵌入table標籤，否則在outlook下會有問題,連結點選不會跳轉，錯誤用法
<tr> <td> <a> <table></tr><td></td></tr></table> </a> </td> </tr>
坑3:
outlook中背景圖無法顯示，圖片需要使用img標籤
下面程式碼用了兩個table標籤佈局，外層的table主要用來限制頁面，內層table用來佈局，按照規則2，將頁面從上到下拆成幾個模組，在內層tr中寫頁面佈局。注意： 每個tr中td的數量要保持一致否則有的郵件客戶端會補全
<!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></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px; padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;font-size:0px">
<tr><td style="font-size:0px"></td></tr>
<tr><td style="font-size:0px"></td></tr>
<tr><td style="font-size:0px"></td></tr>
</table>
</table>
</body>
</html>