郵件html頁編寫指南
時間：2023-07-06 03:09:01 | 來源：網(wǎng)站運營
時間：2023-07-06 03:09:01 來源：網(wǎng)站運營
郵件html頁編寫指南：
前言寫過郵件的
html一般都用table來布局，為什么呢？原因是大多數(shù)的郵件客戶端（比如Outlook和Gmail），會過濾
經(jīng)過多次的郵件編寫實踐及度娘的指導，我發(fā)現(xiàn)，編寫自制兼容outlook與foxmail郵件模版局部重點規(guī)則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. 布局
網(wǎng)頁的布局（layout）必須使用表格（table）。首先，放置一個最外層的大表格，用來設置背景，具體內(nèi)容再在里面嵌套表格（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），所以要確保即使沒有圖片，主要內(nèi)容也能被閱讀。
1 <img border="0" style="display:block;outline:none;text-decoration:none,-ms-interpolation-mode:bicubic;border:none;">
因為在有些郵箱里，圖片不是默認加載的，往往加載前需要用戶的許可。那么高寬的指定可以使郵件在沒有圖片撐出樣子前也能保持良好的大小結構，加上
alt 屬性更可以明確告知圖片的內(nèi)容讓用戶選擇是否下載它們。
如果因為項目需要（比如需要適配 Retina 高分屏），
width 和
height 屬性更是必不可少的，并且由于一些 outlook 版本的奇葩表現(xiàn)，
width 和
height 屬性一定不要加上單位！一定不要加上單位！一定不要加上單位！重要的事情說三遍。
因為加上單位會使一些版本的 OutLook 無法正確識別，導致圖片顯示使用實際的寬高而非我們設置的。
<img width="10px" height="10px" src="*.png" />
outlook2013中，堆疊的圖片會顯示大概10px的間距
這個問題只在圖片高度小于20px的時候出現(xiàn)，開心的是通過簡單的小技巧就可以解決：為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 內(nèi)容里面
background 可以設置
color，但是
image 會被過濾，就是說不能通過 CSS 來設置背景圖片了。但是有一個很有意思的元素屬性，也叫
background，里面可以定義一個圖片路徑，但是功能有限，比如無法定位背景圖片等。
例如要給一個單元格加一個背景，必須這樣寫：
<td background="*.png"> <!-- ... --> </td>
Outlook 2007-2013 不支持圖片的
margin 與
padding 樣式，必要的時候可以嘗試
hspace 和
vspace 屬性：
<img vspace="10" hspace="10" src="*.png" />
4. 文字相關
所有的CSS規(guī)則，最好都采用行內(nèi)樣式。因為放置在網(wǎng)頁頭部的樣式，很可能會被客戶端刪除。客戶端對CSS規(guī)則的支持情況，請看
這里。
在
HTML 郵件中，
font-family 只支持系統(tǒng)字體，不支持自定義字體，也不支持
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 標簽和屬性能解決的樣式?jīng)Q不使用 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），查看在不同客戶端的顯示結果。
6. 模板
使用別人已經(jīng)做好的模板，是一個不錯的選擇（
這里和
這里），網(wǎng)上還可以搜到
更多。
自己開發(fā)的話，可以參考
HTML Email Boilerplate和
Emailology。
7. 全局規(guī)則
1.頁面寬度請設定在550到650px以內(nèi)。
2.使用table表格來布局。
3.如果需要郵件居中顯示，請在table里設定align="center"。
4、不要寫<style>標簽、不要寫class，所有CSS都用style屬性，什么元素需要什么樣式就用style寫內(nèi)聯(lián)的CSS。
5、不要使用外鏈的css樣式定義文字和圖片（外鏈的css樣式在郵件里將不能被讀取，所以發(fā)送出去的郵件因為沒有鏈接到樣式，將會使你的郵件內(nèi)容樣式丟失），正確的寫法：<td style="font-family:arial;font-size:12px;color:black">文字</td>。
6、不使用flash、java、javascript、frames、iframe、activeX以及DHTML，如果頁面中的圖片一定要動態(tài)的，請將flash文件轉換成gif動畫使用，但在outlook2007里，gif將不能正常顯示，因為outlook2007限制gif動畫。
7、不要使用<table></table>以外的body、meta和html之類的標簽，部分郵箱系統(tǒng)會把這些過濾掉。
8、背景圖片代碼寫法如下：<table background="background.gif" cellspacing="0" cellpadding="0"></table>，但請注意，outlook對背景圖片不識別。
9.font-family屬性不能為空，否則會被QQ屏蔽為垃圾郵件。
10.若郵件模板內(nèi)側邊或者上下有空白間距，不要用 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>里面的內(nèi)容會在上下有空行。
14.少用圖片，郵箱不會過濾你的img標簽，但是系統(tǒng)往往會默認不載入陌生來信的圖片，如果用了很多圖片的郵件，在片沒有載入的情況下，丑陋無比甚至看不清內(nèi)容，沒耐心的用戶直接就刪除了。圖片上務必加上alt。
outlook 規(guī)則1.在<td>里設置 margin 是無效的，不論是 margin-left、margin-right、margin-top 或者 margin-boottom 都沒有效果。
2.如果要使用<P>標簽要考慮到<P>標簽本身自帶的上下行之間的行高。
yahoo規(guī)則1.在table里設定align="center"無法居中， 需要內(nèi)聯(lián)style=“margin：0 auto，width：XX”
foxmail 規(guī)則1.foxmail中所有p標簽的Margin:0; 使用p標簽時需要設置margin
在線咨詢
