一直以來(lái)email郵件在網(wǎng)頁(yè)上的實(shí)際顯示效果都不是令人感到十分理想,特別是牽扯到圖片相關(guān)的布局方面,這里我們來(lái)整理一下Web端的郵件內(nèi)容HTML格式規(guī)范總結(jié)
一、頁(yè)面要求
1) 統(tǒng)一使用標(biāo)準(zhǔn)的頁(yè)頭和頁(yè)尾
1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2. <html xmlns=”http://www.w3.org/1999/xhtml”>
3. <head>
4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
5. <title>如何制作網(wǎng)頁(yè)格式的郵件</title>
6. </head>
7. <body style=”margin:0;padding:0″>
8. </body>
9. </html>
2)統(tǒng)一使用utf-8編碼格式
3)頁(yè)面顯示寬度400px-800px,高度一般控制在一屏以內(nèi)。
4)頁(yè)面不向出現(xiàn)js代碼及flash內(nèi)容(如需要?jiǎng)赢?huà)全用gif)
5)頁(yè)面所有圖片必須為絕對(duì)地址
6)頁(yè)面的內(nèi)容最好以文字的形式來(lái)呈現(xiàn)。
二、代碼要求
1)使用table來(lái)制作頁(yè)面的時(shí)候,且必須設(shè)置寬度,而div格式由于有些屬性不被郵件客戶端完全支持,所以建議避免作用。
2)DTD聲明中<html xmlns=http://www.w3.org/1999/xhtml>請(qǐng)改為<html>
3)CSS禁止使用外調(diào)或?qū)懙?lt;head>部分,所有樣式寫(xiě)到標(biāo)簽上。
4)禁止使用背景圖片。
5)有不影響圖片顯示效果的狀態(tài)下,要盡量?jī)?yōu)化,保證客戶打開(kāi)郵件時(shí),在最短的時(shí)間內(nèi)看到,提高郵件的閱讀率。
6)所有圖片必須存在寬高和alt標(biāo)簽,且alt內(nèi)容不宜過(guò)多不能出現(xiàn)特殊字符。
7)圖片鏈接禁止使用熱區(qū),因?yàn)閙ap標(biāo)記在outlook中無(wú)法進(jìn)行正常的點(diǎn)擊,不能打開(kāi)該鏈接指向的網(wǎng)址。
8)鏈接的打開(kāi)方式統(tǒng)一為:_blank
9) mailto的正確寫(xiě)法:例:<mailto:xxx@163.com> xxx@163.com</a>
10)禁止使用浮動(dòng)層
11) 代碼干凈嚴(yán)禁,刪除不必要的空格及回車,總代碼量<50K
三、郵件測(cè)試
1) 上傳服務(wù)器,打開(kāi)網(wǎng)頁(yè),直接ctrl+a,復(fù)制,粘貼到郵件中
2) 本地打開(kāi)網(wǎng)頁(yè),直接復(fù)制,然后在郵箱附件中上傳郵件中的圖片。
【 微信掃一掃 】