編寫email郵件的HTML頁面原則小結_HTML/Xhtml_網頁製作

由於HTML郵件不是獨立的HOST在本站的頁 面，是寄人籬下的。所以寫HTML郵件與寫HTML頁面有很大的不同。因為，各面向網友的主流信箱都或多或少的會對它們接收到的HTML郵件在後台進 行過濾。毫無疑問，JS程式碼是嚴格過濾掉的，包括所有的事件監聽屬性，如onclick、onmouseover，這是基於郵件安全性的考量。不僅如 此，CSS代碼也會部分過濾。本人要講的就是如何寫不被各大主流信箱過濾的，能正常顯示的HTML郵件。

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

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

 

第二類，包括163、sina，這類郵箱，郵件內容被佈局在獨立的iframe中。如圖：

 

熟悉HTML的朋友都知道，iframe內容是作為獨立的document，與父親頁面的元素和CSS是互不相干的，幾乎可以作為一個獨立的頁面來對 待。而如果郵件內容是在div中，那麼郵件內容就是作為整個郵件頁面的一個組成部分。顯然，以iframe作為展現方式的郵箱，對郵件內容就會寬容許 多，因為它給了你一個足夠獨立的表現空間。而div就不是那麼客氣了。試想一下，如果你在你的郵件裡寫上這麼一句CSS，是不是整個郵箱的展現頁面上字體都變成20px而因此亂了套：

我們需要寫兼容各郵箱的統一郵件模板，那麼必然就要避開以上這種外聯CSS寫法，另外類似於float、position等成非正常內容流的style也會被過濾，假如你寫了，很可能會影響到外部郵箱的表現。

下面我列出一些寫原則：
1、全域規則之一，不要寫

2、全域規則之二，少用圖片，郵箱不會過濾你的img標籤，但是系統往往會默認不載入陌生來信的圖片，如果用了很多圖片的郵件，在片沒有載入的情況下，醜陋無比甚至看不清楚內容，沒耐心的用戶直接就刪除了。圖片上務必加上alt。

3、不要在style裡面寫float、position這些style，因為會被過濾。那麼如何實現左右佈局或更複雜的佈局呢？用table。

4、style內容裡面background可以設定color，但是img會被過濾，就是說不能透過CSS來設定背景圖片了。但是有一個很有趣的元素 屬性，也叫background，裡面可以定義一個圖片路徑，這是個不錯的替代方案，雖然這樣功能有限，例如無法定位背景圖片了，有總比沒有好。例如要為 一個儲存格加上一個背景，必須這樣寫：

5、div模式的郵箱不支援flash，iframe模式的有待驗證。

最後提一句，sohu的郵箱很怪異，會在每個文字段後面加一個空格，導致原本正常的排版一行放不下而換行，從而使某些佈局錯亂。所以，如果你要相容sohu郵箱的話，遇到一些緊湊的佈局就要格外小心了，盡量減少文字段的數量，留足寬度。