製作主流信箱能正常顯示的HTML郵件的技巧_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:43:27
原創
1206 人瀏覽過

發送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}

我們需要寫兼容各郵箱的統一郵件模板,那麼必然就要避開以上這種外聯CSS寫法,另外類似於float、position等成非正常內容流的style也會被過濾,假如你寫了,很可能會影響到外部郵箱的表現。
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板