準備 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;"。
如果沒有這個屬性，當在 Gmail，Hotmail（現在是 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" 去控制段落之間的距離。