從零製做edm郵件，須要瞭解的一些規則

時間 2019-11-07

標籤製做 edm 郵件須要瞭解一些規則简体版

原文原文鏈接

1、初見

table

<table> 標籤訂義 HTML 表格
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成
tr(table row) 元素定義表格行，th(table head) 元素定義表頭，td(table data) 元素定義表格單元
更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素
HTML table 標籤

table屬性

border --- 規定表格邊框的寬度
align --- 規定表格相對周圍元素的對齊方式 (left,center,right)
valign --- 垂直，默認是valign="middle"，可是會修改成valign="top"
cellspacing --- 規定單元格之間的空間
cellpadding --- 規定單元邊沿與其內容之間的空白
width --- 規定表格的寬度
height --- 規定表格的高度
background --- 背景圖像
bgcolor --- 背景顏色

<table border="1" width="600" align="center" bgcolor="#cccccc" cellspacing="10" cellpadding="20">
<tr>
  <td>語文</td>
  <td>數學</td>
  <td>英語</td>
</tr>
</table>
複製代碼

style

width、height
font-family
font-size
font-weight
color
line-height
border
background-color
background-image
vertical-align

2、瞭解

基本格式

Area-1

HTML 編碼格式：utf-8
頁面儘可能保持寬（600px~800px）、高（1024px），總體郵件不要太大，好比15k（各個郵箱不一樣）左右，否則很容易走垃圾郵箱
樣式使用行間樣式，如：<td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000;" >文字</td>其餘的方式會被無視

Area-2

font-family 屬性不能爲空
使用<table>佈局，居中顯示使用align="center
不使用 table 之外的 body、meta和html之類的標籤，部分郵箱系統會把這些過濾掉
不使用 flash、java、javascript、frames、iframe、activeX 以及 dhtml
不要出現onmouseover、onmouseout，即便設定了，也會被過濾掉

Area-3

區域與區域之間的上下、左右之間的空白間隙，使用標準的<td width=15> </td>或<td height="15"> </td>，不要使用padding="15px" --- 防止各個郵箱的解析不一樣

圖片

圖片的每一個屬性都要定義完整，如：<img src="http://www.eefocus.com/logo.png" style="vertical-align:top;display:block;" width="210" height="100" alt="logo"/>
定義style="vertical-align:top;" --- 防止圖片之間會有縫隙、變形等顯示異常的狀況
定義display:block --- 解決Outlook電子郵件客戶中圖片底部增長空白間距的問題
限制每張圖片的大小width="200 height="200"或者style="width:200px;height:200px;"
添加每張圖片alt屬性，如：alt="我是幹啥的" --- 防止圖片沒法加載，也能夠知曉這是作什麼的
圖片格式使用jpg、png，儘可能不要使用gif
地址使用絕對路徑（以http/https開頭的）
儘可能不使用背景圖片background-image（Outlook不顯示，可是能夠顯示背景色：bgColor="f3f3f3"），直接使用圖片<img src="">
爲了保持各個郵箱的一致性，儘可能使用圖片，大圖可拆分紅幾張小圖拼接，每張圖片不要太大（15K之內）

連接

地址絕對路徑：<a href="http://www.eefocus.com">Logo Plus</a>
地址不可過長（超過255個字符），儘可能簡短
數量儘可能不超過10個
地址不要使用特殊符號，避免解析錯誤
文字中出現連接地址，被屏蔽的風險比較高，通常是文字+連接、圖片+連接
不要使用地圖功能連接，很容易被劃分爲垃圾郵箱
爲避免用戶收到的郵件圖片沒法瀏覽，請製做一份和郵件內容同樣的web 頁面，而後在郵件頂部寫一句話：「若是您沒法查看郵件內容，請點擊這裏」，連接到放有一樣內容的web頁面

Outlook郵箱規則

內斂元素的padding無效、vertical-align不能被識別，可定義在td
別想着繼承的事兒，某一塊的樣式都單獨設置，好比連接樣式，文字樣式等
p標籤的width不起做用，可定義在td
當設置 <img align="left" /> 或 <img align="right" />時，圖片會脫離文檔流，在其父元素設置了 margin 或 padding 的話，都沒法使其下移，左移或右移