台灣正體

準備 HTML 電郵的提示

關於圖像

提示 1:<img> 標籤需要有 "width" 和 "height" 屬性

為了確保在電郵客戶端裡渲染正確,請在 <img> 標籤中定義 "width""height" 屬性。

<img src="images/banner.jpg" alt="Banner" />

<img src="images/banner.jpg" width="600" height="50" alt="Banner" />

提示 2:<img> 標籤裡的 "width" 和 "height" 屬性需要與圖像的原始大小相同

一些電郵平台如 Outlook 會忽略了你在 HTML 代碼裡指定的圖像的寬度和高度,而顯示圖像的原始大小

這經常破壞了整個電郵的設計。因此如果你想調整圖像的大小,請不要只是在 <img> 標籤中修改它的大小屬性。

你應該用 Photoshop 或其他圖像編輯軟件調整圖片的大小。

提示 3:<img> 標籤需要有屬性 border="0"

如果你在圖像加入超連結,而沒有加上 border="0" 屬性,Internet Explorer 會自動在圖片的周圍加上一個藍色邊框

為了避免這種情況,一個很簡單的方法就是,在每個 <img> 標籤裡加上屬性 border="0"

<img src="images/banner.jpg" width="600" height="50" alt="Banner" />

<img src="images/banner.jpg" width="600" height="50" border="0" alt="Banner" />

提示 4:<img> 標籤應該要有屬性 style="display: block;"

如果你設計 HTML 電郵時使用了很多放置於 <td> 中的切片圖像,請在每一個 <img> 標籤裡加上 style="display: block;"

如果沒有這個屬性,當在 GmailHotmail(現在是 Outlook.com)Yahoo! 或其他電郵平台查看電郵時,在圖像之間會出現未知的空隙。

<img src="images/banner.jpg" width="600" height="50" border="0" alt="Banner" />

<img style="display: block;" src="images/banner.jpg" width="600" height="50" border="0" alt="Banner" />

提示 5:圖像不應該高於 1728 像素

Outlook 會裁切高於1728像素的圖像的頂部。

更多細節,請查看 為甚麼在 Outlook 2007 和 Outlook 2010 裡電郵被裁切?

提示 6:避免在你的電郵中使用背景圖片

Outlook 不會顯示背景圖片,因此避免在你的電郵中使用背景圖片。

如果你必須使用,請規定一個候補背景顏色給 Outlook。

提示 7:為 <img> 標籤加上 "alt" 屬性

預設設定下,電郵客戶端會禁止顯示圖像。

當圖像被禁止顯示時,在 "alt" 屬性中的信息依然能夠顯示,以提供給你的收件人基本的文本信息。

關於 <td> 標籤

提示 1:每個 <td> 標籤都應該有 "width" 屬性

這是確保你的電郵能夠正確顯示的一個簡單方法。

<td>

<td width="60">

如果可能的話,也請設定 "height" 屬性。然而,有時 <td> 的 "height" 屬性受文本內容長度的影響而有所不同。在這種情況下,你不應該定義一個固定的高度。

注意:<table> 標籤和 <tr> 標籤都沒有 "height" 屬性。

關於 CSS

提示 1:始終使用內聯 CSS

一些電郵平台會忽略定義在 HTML 文檔中 <head> 部分的 CSS。因此請始終使用內聯 CSS。

提示 2:避免使用 CSS 定位元素

避免使用 CSS 定位元素。大部分網絡電郵平台不支持 "float" 和 "position"。

提示 3:使用 "margin-bottom" 代替 "margin" 或 "margin-top"

避免使用 "margin" 和 "margin-top",因為 Hotmail(現在為 Outlook.com)會忽略它們。

使用 "margin-bottom" 相對穩妥一點。你可以在 <p> 標籤裡加上 "margin-bottom" 去控制段落之間的距離。

了解更多有關在 HTML 電郵中的 "margin" 和 "padding" 屬性的提示