編寫兼容的網(wǎng)頁(yè)

http://www.kuqin.com/webpagedesign/20080516/8539.html

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

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

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

第二類，包括163、sina，這類郵箱，郵件內(nèi)容被布局在獨(dú)立的iframe中，iframe內(nèi)容是作為獨(dú)立的document，與父頁(yè)面的元素和CSS是互不相干的，幾乎可以作為一個(gè)獨(dú)立的頁(yè)面來(lái)對(duì)待。而如果如果郵件內(nèi)容是在div中，那么郵件內(nèi)容是作為整個(gè)郵箱頁(yè)面的一個(gè)組成部分。顯然，以iframe作為展現(xiàn)方式的郵箱，對(duì)郵件內(nèi)容就會(huì)寬容許多，因?yàn)樗o了你一個(gè)足夠獨(dú)立的表現(xiàn)空間。

下面列出一些編寫原則：
1、全局規(guī)則之一，不要寫<style>標(biāo)簽、不要寫class，所有CSS都用style屬性，什么元素需要什么樣式就用style寫內(nèi)聯(lián)的CSS。
2、全局規(guī)則之二，少用圖片，郵箱不會(huì)過(guò)濾你的img標(biāo)簽，但是系統(tǒng)往往會(huì)默認(rèn)不載入陌生來(lái)信的圖片，如果用了很多圖片的郵件，在片沒(méi)有載入的情況下，丑陋無(wú)比甚至看不清內(nèi)容，沒(méi)耐心的用戶直接就刪除了。圖片上務(wù)必加上alt。
3、不要在style里面寫float、position這些style，因?yàn)闀?huì)被過(guò)濾。那么如何實(shí)現(xiàn)左右布局或者更復(fù)雜的布局呢？用table。
4、style內(nèi)容里面background可以設(shè)置color，但是img會(huì)被過(guò)濾，就是說(shuō)不能通過(guò)CSS來(lái)設(shè)置背景圖片了。但是有一個(gè)很有意思的元素屬性，也叫background，里面可以定義一個(gè)圖片路徑，這是個(gè)不錯(cuò)的替代方案，雖然這樣功能有限，比如無(wú)法定位背景圖片了，有總比沒(méi)有好。例如要給一個(gè)單元格加一個(gè)背景，必須這樣寫：
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>
5、div模式的郵箱不支持flash，iframe模式的有待驗(yàn)證。
最后提一句，sohu的郵箱很怪異，會(huì)在每個(gè)文本段后面加一個(gè)空格，導(dǎo)致原本正常的排版一行放不下而換行，從而使某些布局錯(cuò)亂。所以，如果你要兼容sohu郵箱的話，遇到一些緊湊的布局就要格外小心了，盡量減少文本段的數(shù)量，留足寬度。

通過(guò)郵件發(fā)送網(wǎng)頁(yè)內(nèi)容

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

1、通過(guò)IE,打開具體要發(fā)送的網(wǎng)頁(yè)，然后通過(guò)操作“工具-郵件和新聞——發(fā)送網(wǎng)頁(yè)”接著就會(huì)進(jìn)入outlook的界面，利用outlook發(fā)送網(wǎng)頁(yè)到指定的郵箱地址

2、通過(guò)Foxmail 發(fā)送網(wǎng)頁(yè)
(1)保存要發(fā)送的頁(yè)面。在 “頁(yè)面”-“另存為”-保存類型“網(wǎng)頁(yè)，全部（*.htm，*.html）”，(如：lf.htm)，編碼為簡(jiǎn)體中文(GB23120) 然后保存。
(2) 將下載的網(wǎng)頁(yè)lb.htm及l(fā)b.files文件夾一并復(fù)制到 “*/Foxmail/Template/new” 目錄下,

(3)在Foxmail里點(diǎn)擊 “撰寫 -> 自定義” 就能看到剛才放進(jìn)去的網(wǎng)頁(yè)，選中以后就可以直接發(fā)送這個(gè)文件了。

需要注意的是兩點(diǎn)：
@網(wǎng)頁(yè)的文件名需要htm結(jié)尾，不能以html結(jié)尾；
@網(wǎng)頁(yè)的編碼需要采用GB2312，不能用UTF-8。

3, 通過(guò)網(wǎng)頁(yè)郵箱發(fā)送網(wǎng)頁(yè)內(nèi)容
用 163 實(shí)現(xiàn)發(fā)網(wǎng)頁(yè)步驟如下：
(1)在你想要發(fā)送的網(wǎng)頁(yè)空白處右擊，選擇“查看源文件”，可以在看到源碼。ctl+a和ctl+c復(fù)制所有的源碼。
(2)點(diǎn)寫信，點(diǎn) 工具欄 的“全部功能”，會(huì)出現(xiàn)下面一排工具欄，選擇最后一個(gè)<>編輯源碼。ctl+v粘貼源碼。可以再次點(diǎn)擊 <>編輯源碼 按鈕，恢復(fù)界面查看。

總結(jié)

以上是生活随笔為你收集整理的如何编写兼容各主流邮箱的HTML邮件并发送的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。