如何寫一個郵件模板頁面

阿新 • • 發佈：2020-11-24

Email 郵件模板

帶格式的郵件，其實就是一張網頁，正式名稱叫做HTML Email。它能否正常顯示，完全取決於郵件客戶端。
大多數的郵件客戶端（比如Outlook和Gmail），會過濾HTML設定，讓郵件面目全非。
編寫HTML Email的竅門，就是使用20年前的網頁製作方法。下面就是我整理的編寫指南。

1. Doctype

目前，相容性最好的Doctype是XHTML 1.0 Strict，事實上Gmail和Hotmail會刪掉你的Doctype，換上這個Doctype。
使用這個Doctype，也就意味著，不能使用HTML5的語法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

　<head>

　　

　　<title>HTML Email編寫指南</title>

　　

　</head>

</html>

2. 佈局

網頁的佈局（layout）必須使用表格（table）。首先，放置一個最外層的大表格，用來設定背景。
表格的 border 屬性等於1, 是為了方便開發。正式釋出的時候，再把這個屬性設為0。
在內層，放置第二個表格。用來展示內容。第二個table的寬度定為600畫素，防止超過客戶端的顯示寬度。
一般寬度在600px 或者 700px 左右
郵件內容有幾個部分，就設定幾行（row）。

    只能使用 table 佈局

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">

    　<tr>
    　　<td> Row 1 </td>
    　</tr>

    　<tr>
    　　<td> Row 2 </td>
    　</tr>

    　<tr>
    　　<td> Row 3 </td>
    　</tr>

    </table>

3. 圖片

圖片是唯一可以引用的外部資源。其他的外部資源，比如樣式表文件、字型檔案、視訊檔案等，一概不能引用。
有些客戶端會給圖片連結加上邊框，要去除邊框。
需要注意的是，不少客戶端預設不顯示圖片（比如Gmail），所以要確保即使沒有圖片，主要內容也能被閱讀。
圖片可以轉換成 base64 放在頁面中

img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
<img border="0" style="display:block;">

4. 行內樣式

所有的CSS規則，最好都採用行內樣式。因為放置在網頁頭部的樣式，很可能會被客戶端刪除
不要採用CSS的簡寫形式，有些客戶端不支援不同客戶端支援情況請看這裡 https://www.campaignmonitor.com/css/

能有標籤自帶的屬性就不要去寫 style

  如果想表達
  <p style="margin: 1em 0;">
  要寫成下面這樣：
  <p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">

例子：

table 標籤相關屬性參考： https://www.w3school.com.cn/tags/tag_table.asp

<table border="0" cellpadding="0" cellspacing="0" width="730" style="margin-left: auto;margin-right: auto; border-collapse: collapse;font-family:'微軟正黑體',Helvetica,Arial,sans-serif">
    <tbody>
        <tr>
            <td style="padding-top:10px;">
                    <!-- 1、收款單資訊頭部  -->
                    <table border="0" cellpadding="0" cellspacing="0" style="width:100%;line-height:1.3;border-bottom: 1px solid #404040;font-family:'微軟正黑體',Helvetica,Arial,sans-serif">
                        <tbody style="width:100%;">
                            <tr style="text-align: right;font-size:14px;">
                                <td colspan="4">
                                    <p style="margin:0px;text-align: right;font-size:18px;color:#00a1e9;"> 旅客必須取得印花收據，方可獲得『旅遊業賠償基金』保障 </p>
                                    <p style="margin:0px;text-align:right;">  Travellers must obtain receipts with levy stamps to have </p>
                                    <p style="margin:0px;text-align:right;">  protection by the Travel Industry Compensation Fund. </p>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <img style="border:none" src="" alt="">
                                </td>
                            </tr>

                            <tr style="font-size:14px;">
                                <td colspan="4" style="padding-bottom:20px; text-align: right;color:#89898a;border-bottom: 1px solid #404040;">
                                    <span> ☐ 客人存本  </span> 
                                    <span> ☐ 分行存本 </span> 
                                    <span> ☐ 財務存本 </span> 
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" style="padding-top:10px;padding-bottom: 10px;font-weight: bold;font-size: 18px;"> 
                                    付款人   <span class="pl5"> 李冰 </span>
                                </td>
                            </tr>

                            <tr style="line-height:32px;width:100%;">
                                <td colspan="4" height="35px" style="width:100%;background-color:#606060;">
                                    <span style="font-size:18px;font-weight: bold;color:#fff;padding-top: 5px;padding-bottom: 5px;padding-left: 5px;"> 收款單資訊 </span> 
                                </td>
                            </tr>
                            <tr style="font-size:14px;border-bottom: 1px solid #404040;">
                                <td width="25%;" height="35px" style="font-weight: bold;"> 收款編號 </td>
                                <td width="25%;" height="35px"> H00000076 </td>
                                <td width="25%;" height="35px" style="font-weight: bold;"> 總社查詢熱線 </td>
                                <td width="25%;" height="35px" > 2108 8888 </td>
                            </tr>
                            
                        </tbody>
                    </table>
                </td>
        </tr>
        <tr>
            <td> 第二部分內容 <td>
        </tr>
        ......
        <tr>
            <td> 第N部分內容 <td>
        </tr>
        .......
　  </tbody>
</table>