Email頁面代碼書寫建議及規範

時間  2019-11-29
標籤 email 頁面 代碼 書寫 建議 規範 简体版
原文   原文鏈接

前幾天看到口碑網的朋友寫了一篇《如何編寫兼容各主流郵箱的HTML郵件》，很不錯。
在這裏，我也要把個人經驗和你們分享一下。css

衆所周知， Email是一項最古老的互聯網應用之一。
所以，很多郵件系統仍是會採用一些比較古老的處理方式，致使前端方面不少新的技術、新的特性沒法被支持。
並且各個郵箱系統以及客戶端的差別，也會使email的最終呈現出現很大的誤差。
HTML 細節
就目前來講，若是要作一個 email頁面，爲了保證最大的兼容性，有如下幾點須要注意：
對於純文本郵件：
  1. 郵件標題不要超過18個字；
  2. 每行不要超過34個字。
對於 HTML郵件：
  1. 郵件標題不要超過18個字；
  2. HTML代碼和圖片儘可能不要超過50kb；
  3. 頁面寬度推薦500px，最大不要超過600px；
  4. 避免使用邊緣的、非主流的HTML技術；
  5. 不使用css來佈局，應該使用表格來佈局；
  6. 不使用外聯的css樣式，而使用font標籤來定義樣式，定義連接顏色時也是如此，寫法以下： <font style=" font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
  8. body和meta之類的標籤是能夠無視的，由於在不少郵箱系統裏它會被過濾；
  9. 若是整個郵件有用到背景色或背景圖，建議用如下方式處理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 郵件內容 -->
    </td>
    </tr>
    </table>
  10. 有背景圖片的時候，咱們要採用這種寫法：<table background="background.gif" cellspacing="0" cellpadding="0">
圖片屏蔽
因爲圖片能夠用來偵測郵件的打開率和 email地址的有效性。
很多郵件客戶端都會默認把郵件中的圖片屏蔽，用戶須要再點一下才能顯示圖片。

Blocking Issue
AOL v. 6.0-9.0
Gmail
Hotmail
Yahoo!
Outlook 2000/XP
Outlook 2003
Outlook Express w/SP2
Outlook Express w/o SP2
外鏈的圖片是否默認被屏蔽
Yes
Yes
No
No
No
Yes
Yes
No
用戶可否設置是否屏蔽圖片
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
能不能讓用戶點擊某個按鈕就顯示郵件中的圖片
Yes
Yes
Yes
No
No
Yes
Yes
N/A
當發件人在用戶的聯繫人列表裏時是否默認顯示圖片
Yes
No
Yes
No
Yes
Yes
Yes
Yes
發件人在 ISP白名單中時能不能默認顯示圖片(國內好像沒這個概念)
Yes
N/A
Yes
No
N/A
N/A
N/A
N/A
圖片被屏蔽時是否顯示 alt屬性
No
Yes
No
No
No
No
No
N/A
預覽時顯示 windows的主題樣式
No
No
No
No
Yes
Yes
Yes
Yes

來源： EmailLabs, 2004。國內用戶經常使用的Foxmail彷佛沒有屏蔽郵件內圖片的功能，我也找不到相關設置的地方。
一旦圖片被屏蔽，整個郵件就會變得面目全非，這裏有如下一些建議：
  1. 重要內容儘可能避免使用圖片，好比標題、連接等；
  2. 製做一份和郵件內容同樣的web頁面，而後在郵件頂部寫一句話，相似：「若是您沒法查看郵件內容，請點擊這裏查看」；
  3. 全部圖片都要加上alt屬性；
  4. 全部的圖片都要定義高和寬；
  5. 通知收件人把你的發件地址加入白名單。
Outlook 2007 的限制
因爲 outlook 2007使用了word的渲染引擎來展示郵件內容，因此不少HTML屬性無法獲得支持了，好比：
  • 背景圖片(這一點很重要！)
  • css浮動和定位(這個沒啥用)
  • 自定義列表項的圖像(這個也沒啥用)
  • Flash(反正不放)
  • GIF動畫
  • 圖片的alt屬性(值得注意)
  • 表單(反正不放)
附：Email客戶端的CSS支持狀況
本資料來自國外某郵件營銷公司，因此缺少國內郵件客戶端的數據。
<style> 標籤

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
<head>中的 <style>標籤
No
No
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
<body>中的 <style>標籤
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No

<link> 標籤

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
<head>中的 <link>標籤
N o
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No
<body>中的 <link>標籤
No
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No

CSS 選擇器

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
*
No
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No
e
No
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No
e > f
No
No
Yes
No
No
No
No
Yes
Yes
Yes
No
e:link
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:active,
e:hover
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:focus
No
No
Yes
No
No
No
No
Yes
Yes
Yes
No
e + f
No
Yes
Yes
No
No
No
No
Yes
Yes
No
No
e [foo]
No
Yes
Yes
No
No
No
No
Yes
Yes
No
No
e.className
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e#id
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:first-line
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:first-letter
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No

CSS 屬性

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
background-color
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
background-p_w_picpath
No
Yes, but
Yes
No
Yes *
Yes
Yes
Yes
Yes
Yes
No
background-position
No
No
No
No
Yes *
Yes
No
Yes
Yes
Yes
No
background-repeat
No
Yes
Yes
No
Yes *
Yes
No
Yes
Yes
Yes
No
border
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
border-collapse
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
No
No
border-spacing
Yes
No
Yes
No
No
No
No
Yes
Yes
No
No
bottom
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
caption-side
Yes
No
Yes
No
No
No
No
Yes
No
No
No
clip
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
color
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
cursor
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
No
No
direction
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
No
display
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
No
empty-cells
Yes
No
Yes
No
No
No
No
Yes
Yes
No
No
filter
No
No
Yes
Yes
No
No
No
No
No
No
No
float
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
font-family
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
font-size
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
font-style
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
font-variant
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
font-weight
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
height
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
left
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
letter-spacing
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
line-height
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
list-style-p_w_picpath
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
list-style-position
Yes
No
No
Yes
Yes
Yes
No
Yes
Yes
Yes
No
list-style-type
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
margin
Yes
No
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
opacity
No
No
Yes
Yes
No
No
No
Yes
Yes
No
No
overflow
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
padding
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
position
No
No
No
No
Yes
Yes
No
Yes
Yes
Yes
No
right
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
table-layout
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
text-align
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
text-decoration
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
text-indent
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
text-transform
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
top
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
vertical-align
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
visibility
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
white-space
Yes
Yes
Yes
No
No
No
No
Yes
Yes
Yes
No
width
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
word-spacing
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
z-index
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
(*) 不被 Microsoft Outlook 2007支持。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程