如何編寫兼容各主流郵箱的HTML郵件

編寫兼容的網頁

幾乎每個會員制網站都需要通過後臺發送郵件來與會員進行溝通，如註冊確認、營銷推廣。這些由站方發給會員的信件，往往純文本格式已不能滿足界面和交互的要求，這時候我們就需要發送HTML頁面。由於HTML郵件不是獨立的HOST在本站的頁面，是寄人籬下的。所以編寫HTML郵件與編寫HTML頁面有很大的不同。因爲，各面向網民的主流郵箱都或多或少的會對它們接收到的HTML郵件在後臺進行過濾。毫無疑問，JS代碼是被嚴格過濾掉的，包括所有的事件監聽屬性，如onclick、onmouseover，這是基於郵件安全性的考慮。不僅如此，CSS代碼也會被部分過濾。本人要講的就是如何編寫不被各大主流郵箱過濾的，能正常顯示的HTML郵件。

         首先，我們先來看看郵箱是如何展現HTML郵件的。我本人沒有做過郵件系統，況且各大郵箱後臺的過濾算法也不是那麼容易可以讓外人知道的。所以，我們只能通過前端展現，來推測哪些是被郵箱接受的寫法，而哪些又是會被過濾掉的。通過對gmail、hotmail、163、sohu、sina幾個郵箱的分析，我把郵箱分爲兩類：

第一類包括gmail、hotmail、sohu，這類郵箱，郵件內容是被佈局在整個郵箱頁面中的某個div中。

第二類，包括163、sina，這類郵箱，郵件內容被佈局在獨立的iframe中，iframe內容是作爲獨立的document，與父頁面的元素和CSS是互不相干的，幾乎可以作爲一個獨立的頁面來對待。而如果如果郵件內容是在div中，那麼郵件內容是作爲整個郵箱頁面的一個組成部分。顯然，以iframe作爲展現方式的郵箱，對郵件內容就會寬容許多，因爲它給了你一個足夠獨立的表現空間。

下面列出一些編寫原則：
1、全局規則之一，不要寫<style>標籤、不要寫class，所有CSS都用style屬性，什麼元素需要什麼樣式就用style寫內聯的CSS。
2、全局規則之二，少用圖片，郵箱不會過濾你的img標籤，但是系統往往會默認不載入陌生來信的圖片，如果用了很多圖片的郵件，在片沒有載入的情況下，醜陋無比甚至看不清內容，沒耐心的用戶直接就刪除了。圖片上務必加上alt。
3、不要在style裏面寫float、position這些style，因爲會被過濾。那麼如何實現左右佈局或者更復雜的佈局呢？用table。
4、style內容裏面background可以設置color，但是img會被過濾，就是說不能通過CSS來設置背景圖片了。但是有一個很有意思的元素屬性，也叫background，裏面可以定義一個圖片路徑，這是個不錯的替代方案，雖然這樣功能有限，比如無法定位背景圖片了，有總比沒有好。例如要給一個單元格加一個背景，必須這樣寫：
<td background=”http://p_w_picpath1.koubei.com/p_w_picpaths/common/logo_koubei.gif”></td>
5、div模式的郵箱不支持flash，iframe模式的有待驗證。
最後提一句，sohu的郵箱很怪異，會在每個文本段後面加一個空格，導致原本正常的排版一行放不下而換行，從而使某些佈局錯亂。所以，如果你要兼容sohu郵箱的話，遇到一些緊湊的佈局就要格外小心了，儘量減少文本段的數量，留足寬度。

通過郵件發送網頁內容

http://apps.hi.baidu.com/share/detail/18554997

1、通過IE,打開具體要發送的網頁，然後通過操作“工具-郵件和新聞——發送網頁”接着就會進入outlook的界面，利用outlook發送網頁到指定的郵箱地址

2、通過Foxmail 發送網頁
(1)保存要發送的頁面。在 “頁面”-“另存爲”-保存類型“網頁，全部（*.htm，*.html）”，(如：lf.htm)，編碼爲簡體中文(GB23120) 然後保存。
(2) 將下載的網頁lb.htm及lb.files文件夾一併複製到 “*/Foxmail/Template/new” 目錄下,

(3)在Foxmail裏點擊 “撰寫 -> 自定義” 就能看到剛纔放進去的網頁，選中以後就可以直接發送這個文件了。

需要注意的是兩點：
@網頁的文件名需要htm結尾，不能以html結尾；
@網頁的編碼需要採用GB2312，不能用UTF-8。

3, 通過網頁郵箱發送網頁內容
用 163 實現髮網頁步驟如下：
(1)在你想要發送的網頁空白處右擊，選擇“查看源文件”，可以在看到源碼。ctl+a和ctl+c複製所有的源碼。
(2)點寫信，點 工具欄 的“全部功能”，會出現下面一排工具欄，選擇最後一個<>編輯源碼。ctl+v粘貼源碼。可以再次點擊 <>編輯源碼 按鈕，恢復界面查看。