用html寫email教學及注意事項

網頁設計工作中常常會有需求向用戶發送電子郵件,需要前端工程師來製作html格式的email郵件,但是由於郵件客戶端對樣式的支持有限,要兼容很多種瀏覽器,所以需要注意很多原則:

1.郵件基本上只能使用table+css佈局

2.郵件主要部分在body內部,所以樣式一定要寫成內嵌(inline css)的,不能在head標籤中寫style,也不能外聯(external link)。

如:

<!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>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
    <table class="wrapper layout-system" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center">
                <table class="content" width="100%" cellpadding="0" cellspacing="0">
                    <!-- Email Body -->
                    <tr>
                        <td class="body" width="100%" cellpadding="0" cellspacing="0">
                            <table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0">
                                <!-- Body content -->
                                <tr>
                                    <td class="content-cell">
                                        <p style="margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;margin-bottom:
                                            20px"><br>尊敬的開發者:<br></p>

                                        <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;">
                                            <br>「xxx」在此次的‘網絡友好度測試’評級:<span style="color:#F44336;">4顆星</span>(最高5顆星)。<br>
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>

</html>

收到的email效果:

3.不能用浮動的方式定位。position:absolute;float:left;等都不行,float在部分郵箱客戶端中可以識別,但是在outlook中無法識別。

4.表格的border,使用table上的border屬性,可以在部分瀏覽器中兼容,但是在outlook中打開是沒有邊框的,這種情況,只能給每一個td加一個border,在table中使用border-collapse:collapse;來合併重復的邊框。

如:

<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">

這樣設置border會在outlook中顯示不出border;

5.為了保證兼容性,需要把郵件的寬度設置為600px,最大600px;

6.少用img,因為很多郵箱客戶端默認不顯示圖片(安全等原因),所以,如果需要圖片的話,一定要寫好alt和title看不到圖片也知道想表達什麼;

7.背景圖片,盡量用background-color使用純色背景,如果一定要用背景圖片,使用background屬性,

<div background=”https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png”></div>

8.郵件不支持javascript,flash以及一些特殊的標籤。

由於郵件客戶端(Mail client)對css支持各有不同,所以一定要多測試再發送,保證樣式的正確。如果出現了不兼容的情況,一定要耐心的使用最簡單的方式進行兼容,盡量少用特殊標籤及比較複雜的css屬性。

以上就是用HTML寫Email的教學,如有不清楚可留言。

Alex Lin

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。