脆弱的HTML郵件模板

在開展咱們的項目時，在一些方面，如：註冊確認、營銷推廣等，都須要以給用戶發郵件的方式，進行溝通，可是咱們編寫的HTML郵件，不少主流郵箱都會或多或少的過濾掉一些東西，因此就要考慮如何編寫纔是能兼容各類。

本文原創發表於所問數據HT前端團隊：ht.askingdata.com/article/5b9…

模板問題

1. iframe爲表明的模版不支持特殊標籤包括html5新特性：如：button、nav、footer，這些會被過濾掉。
2. div爲模板，不支持定義style類名的方式寫樣式，會被過濾掉
3. 沒法使用@media作自適應佈局
4. 沒法引入外聯樣式，好比bootstrap。
5. css3樣式大部分不支持

解決思路：

先從總體佈局方式提及，常見的兩種方式就是iframe和div。 首先iframe它其實已是一個被廢棄了，可是在16三、sina等這類郵箱，它是在用iframe的。至於爲何會用iframe……

1. iframe可以原封不動的把嵌入的網頁展示出來。
2. 若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
3. 網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
4. 若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。

第二種佈局table，爲何要用table代替div緣由以下：

1. Div+css佈局不徹底被郵件客戶端支持
2. Div+css郵件的機制很容易致使css不能正常解析

由於head裏面的內容會被過濾掉的緣由，咱們不要寫<style>標籤、不要寫class，全部CSS都用style屬性，什麼元素須要什麼樣式就用style寫內聯的CSS。因此說能夠的話，就用標籤的自帶屬性，也是比較方便的。table屬性是咱們整個郵件的重要部分，因此它的一些自帶屬性，你們能夠去網上搜索一下，都是比較基礎的，在這裏就不一一列舉了。

回到樣式上，其實直接寫內聯樣式的話，是比較麻煩的，因此，咱們在寫樣式的時候，能夠先以class的方式書寫，其後使用：tonny-zhang.github.io/pages/css_f… 將內聯樣式轉換成嵌入樣式。

沒法使用@media，主要認爲是@media是全局的，而咱們須要改變的東西是局部的，因此說不適合用。 沒法引入bootstrap等外聯樣式，由於上面說過的，它會把head過濾掉，因此說引入了也是沒有用的。 至於它不支持大部分CSS3屬性，就是不支持，也不知道爲何，嘿嘿。 並且它對背景圖片的支持也不太理想，還有就是圖片要寫上alt屬性，由於就算圖片不出來，至少還有個提示嘛。 若是有比較複雜的佈局，不要用float，position之類的，由於也會被過濾，咱們就用table就能夠的。

模板封裝

在項目中會有各類郵件的發送，可是有些產品信息，公司信息是不會改變的，因此說，將郵件封裝成模板。

<table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#fff" collapse>
    <tr>
          <td valign="middle" style="color:#333">
                <table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff" border="0" align="center" class="border-collapse">
                    ……
                </table>
          </td>
    </tr>
</table>
複製代碼

總體的大table能夠像如上這樣寫。 對於像字體、間距、行高，咱們可寫一個公共類，到時候用前面我給予的網站去轉換一下就行了。

最後

一個郵件的樣子也是很是重要的，它也是項目的一部分，而且做爲一個可研究的東西，也是很是有價值的。 奮鬥吧，猿們。