制作郵箱能正常顯示的HTML郵件的方法

制作郵箱能正常顯示的HTML郵件的方法

　　發(fā)送html郵件的建議：用style寫內(nèi)聯(lián)的CSS；少用圖片；用table實現(xiàn)左右布局或者更復雜的布局；用background元素設(shè)置背景圖片等。

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

　　發(fā)送html郵件的建議：用style寫內(nèi)聯(lián)的CSS；少用圖片；用table實現(xiàn)左右布局或者更復雜的布局；用background元素設(shè)置背景圖片等。

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

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

　　第二類，包括163、sina，這類郵箱，郵件內(nèi)容被布局在獨立的iframe中。

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

　　body {font-size:20px}

　　body {font-size:20px}

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

　　下面我列出一些編寫原則：

　　1、全局規(guī)則之一，不要寫標簽、不要寫class，所有CSS都用style屬性，什么元素需要什么樣式就用style寫內(nèi)聯(lián)的CSS。

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

　　3、不要在style里面寫float、position這些style，因為會被過濾。那么如何實現(xiàn)左右布局或者更復雜的布局呢？用table。

　　4、style內(nèi)容里面background可以設(shè)置color，但是img會被過濾，就是說不能通過CSS來設(shè)置背景圖片了。但是有一個很有意思的元素屬性，也叫background，里面可以定義一個圖片路徑，這是個不錯的替代方案，雖然這樣功能有限，比如無法定位背景圖片了，有總比沒有好。例如要給一個單元格加一個背景，必須這樣寫：

　　5、div模式的郵箱不支持flash，iframe模式的有待驗證。 最后提一句，sohu的郵箱很怪異，會在每個文本段后面加一個空格，導致原本正常的排版一行放不下而換行，從而使某些布局錯亂。所以，如果你要兼容sohu郵箱的話，遇到一些緊湊的布局就要格外小心了，盡量減少文本段的數(shù)量，留足寬度。

【制作郵箱能正常顯示的HTML郵件的方法】相關(guān)文章：

關(guān)于顯示html,行內(nèi)標簽模式的淺談05-24

excel分級顯示的方法10-21

實現(xiàn)html方法結(jié)構(gòu)化10-01

顯示器的修理方法09-27

撰寫日文道歉郵件的方法06-20

關(guān)于Dreamweaver中怎么讓html網(wǎng)頁中的table邊框細線顯示?08-15

郵件營銷的弊端及解決方法08-01

顯示器故障的檢查方法10-04

關(guān)于jQuery實現(xiàn)高亮顯示的方法介紹08-20

漂唇后多久能恢復正常09-11