製作郵箱能正常顯示的HTML郵件的方法
發送html郵件的建議:用style寫內聯的CSS;少用圖片;用table實現左右佈局或者更復雜的佈局;用background元素設置背景圖片等。
幾乎每個會員制網站都需要通過後臺發送郵件來與會員進行溝通,如註冊確認、營銷推廣。這些由站方發給會員的信件,往往純文本格式已不能滿足界面和交互的要求,這時候我們就需要發送HTML頁面。由於HTML郵件不是獨立的HOST在本站的頁面,是寄人籬下的。所以編寫HTML郵件與編寫HTML頁面有很大的不同。因爲,各面向網民的主流郵箱都或多或少的會對它們接收到的HTML郵件在後臺進行過濾。毫無疑問,JS代碼是被嚴格過濾掉的,包括所有的事件監聽屬性,如onclick、onmouseover,這是基於郵件安全性的考慮。不僅如此,CSS代碼也會被部分過濾。本人要講的就是如何編寫不被各大主流郵箱過濾的,能正常顯示的HTML郵件。
發送html郵件的建議:用style寫內聯的CSS;少用圖片;用table實現左右佈局或者更復雜的佈局;用background元素設置背景圖片等。
首先,我們先來看看郵箱是如何展現HTML郵件的。我本人沒有做過郵件系統,況且各大郵箱後臺的過濾算法也不是那麼容易可以讓外人知道的。所以,我們只能通過前端展現,來推測哪些是被郵箱接受的寫法,而哪些又是會被過濾掉的。通過對gmail、hotmail、163、sohu、sina幾個郵箱的分析,我把郵箱分爲兩類:
第一類包括gmail、hotmail、sohu,這類郵箱,郵件內容是被佈局在整個郵箱頁面中的某個div中。
第二類,包括163、sina,這類郵箱,郵件內容被佈局在獨立的iframe中。
熟悉HTML的朋友都知道,iframe內容是作爲獨立的document,與父頁面的元素和CSS是互不相干的`,幾乎可以作爲一個獨立的頁面來對待。而如果如果郵件內容是在div中,那麼郵件內容是作爲整個郵箱頁面的一個組成部分。顯然,以iframe作爲展現方式的郵箱,對郵件內容就會寬容許多,因爲它給了你一個足夠獨立的表現空間。而div就不是那麼客氣了。試想一下,如果你在你的郵件裏寫上這麼一句CSS,是不是整個郵箱的展現頁面上字體都變成20px而因此亂了套:
body {font-size:20px}
body {font-size:20px}
我們需要寫兼容各郵箱的統一郵件模板,那麼必然就要避開以上這種外聯CSS寫法,另外類似於float、position等成非正常內容流的style也會被過濾,假如你寫了,很可能會影響到外部郵箱的表現。
下面我列出一些編寫原則:
1、全局規則之一,不要寫標籤、不要寫class,所有CSS都用style屬性,什麼元素需要什麼樣式就用style寫內聯的CSS。
2、全局規則之二,少用圖片,郵箱不會過濾你的img標籤,但是系統往往會默認不載入陌生來信的圖片,如果用了很多圖片的郵件,在片沒有載入的情況下,醜陋無比甚至看不清內容,沒耐心的用戶直接就刪除了。圖片上務必加上alt。
3、不要在style裏面寫float、position這些style,因爲會被過濾。那麼如何實現左右佈局或者更復雜的佈局呢?用table。
4、style內容裏面background可以設置color,但是img會被過濾,就是說不能通過CSS來設置背景圖片了。但是有一個很有意思的元素屬性,也叫background,裏面可以定義一個圖片路徑,這是個不錯的替代方案,雖然這樣功能有限,比如無法定位背景圖片了,有總比沒有好。例如要給一個單元格加一個背景,必須這樣寫:
5、div模式的郵箱不支持flash,iframe模式的有待驗證。 最後提一句,sohu的郵箱很怪異,會在每個文本段後面加一個空格,導致原本正常的排版一行放不下而換行,從而使某些佈局錯亂。所以,如果你要兼容sohu郵箱的話,遇到一些緊湊的佈局就要格外小心了,儘量減少文本段的數量,留足寬度。
相關文章
-
.htm.html文件圖標無法顯示的解決辦法
症狀:後綴爲Htm和Html的文件圖標顯示爲未關聯的.應用程序圖標,並且通過常用的設置文件夾屬性的方式修改不起作用,右鍵屬性裏改變默認打開程序也不起作用。處理:方法一:修改註冊表,將Htm/Html文件默認的圖標關聯改回默認。具 -
把Outlook2007收走的郵件恢復至web郵箱的方法
如果你沒有在outlook中設置在web郵箱中備份副本,那麼你的outlook收到郵件以後,web郵箱就沒有原來的郵件了,那麼我們怎樣將郵件恢復到web郵箱中呢?下面提供了一種方法,如果你是outlook2007及以上版本可以參考。 方法/步 -
Excel聯繫人郵件地址批量導入郵箱方法介紹
使用excel來整理客戶資料,在日常辦公中經常回使用到,如果需要給Excel中的客服發郵件,有什麼好的方法呢?難道要一個一個的將他們的郵件地址輸入到郵箱裏,問題是數據量比較龐大,做到這一點實屬不易。下面我們給大家介紹一下E -
JS控制HTML元素的顯示和隱藏的兩種方法
利用來JS控制頁面控件顯示和隱藏有兩種方法,兩種方法分別利用HTML的style中的兩個屬性,兩種方法的不同之處在於控件隱藏後是否還在頁面上佔空位。方法一:lementById("EleId")bility="hidden";lementById("EleId")bility= -
把Outlook2007收走的郵件恢復至web郵箱
如果你沒有在outlook中設置在web郵箱中備份副本,那麼你的outlook收到郵件以後,web郵箱就沒有原來的郵件了,那麼我們怎樣將郵件恢復到web郵箱中呢?歡迎大家閱讀!更多相關信息請關注相關欄目!步驟一:打開outlook以後,我們先新 -
如何把Outlook2007收走的郵件恢復至web郵箱
如果你沒有在outlook中設置在web郵箱中備份副本,那麼你的outlook收到郵件以後,web郵箱就沒有原來的郵件了,那麼我們怎樣將郵件恢復到web郵箱中呢?下面提供了一種方法,如果你是outlook2007及以上版本可以參考。 方法/步 -
在html中顯示長度較大的數據處理方法
在html中顯示長度較大的數據時,可以將數據截取顯示,當鼠標滑過時再顯示完整數據。例如,下面這種情況。實現:<a title="${dUrl}"><c:if test="${fn:length(dUrl) >= 40}">${fn:substring(dUrl,0,20)}......${fn:substring( -
蘋果手機exchange郵箱不能激活的解決方法
上一篇帖子給大家介紹了朝天鉤,各種款式和形狀的,其實還有很多的鉤型都沒有說,手上也沒有,就不一一說明了。看了這麼多朝天鉤,新手該怎麼選擇一款適合自己的朝天呢,今天就和大家來探討一下。現在傳統釣釣鯽魚正是時候第一個 -
JS控制html控件的方法
爲了方便廣大計算機愛好者,下面YJBYS小編爲大家整理了關於JS控制html控件的方法,希望對你有所幫助。 方法一:《div id=myDiv》《/div》 // 容器var strInnerHtml = 《input id=myInput type=text》 ; // 要添加的控件 -
加載html和顯示的問題
瀏覽器加載html和顯示的問題瀏覽器加載html和顯示的問題。它的基本工作原理如下:1、IE下載的順序是從上到下,渲染的順序也是從上到下,下載和渲染是同時進行的。2、在渲染到頁面的某一部分時,其上面的所有部分都已經下載完