脆弱的HTML模板
在開展我們的專案時，在一些方面，如：註冊確認、營銷推廣等，都需要以給使用者發郵件的方式，進行溝通，但是我們編寫的HTML郵件，很多主流郵箱都會或多或少的過濾掉一些東西，所以就要考慮如何編寫才是能相容各種。
本文原創發表於所問資料HT前端團隊： ofollow,noindex">ht.askingdata.com/article/5b9…
模板問題
- iframe為代表的模版不支援特殊標籤包括html5新特性：如：button、nav、footer，這些會被過濾掉。
- div為模板，不支援定義style類名的方式寫樣式，會被過濾掉
- 無法使用@media做自適應佈局
- 無法引入外聯樣式，比如bootstrap。
- css3樣式大部分不支援
解決思路：
先從整體佈局方式說起，常見的兩種方式就是iframe和div。 首先iframe它其實已經是一個被廢棄了，但是在163、sina等這類郵箱，它是在用iframe的。至於為什麼會用iframe……
- iframe能夠原封不動的把嵌入的網頁展現出來。
- 如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現呼叫的每一個頁面內容的更改，方便快捷。
- 網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來巢狀，可以增加程式碼的可重用。
- 如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。
第二種佈局table，為什麼要用table代替div原因如下：
- Div+css佈局不完全被郵件客戶端支援
- 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可以像如上這樣寫。 對於像字型、間距、行高，我們可寫一個公共類，到時候用前面我給予的網站去轉換一下就好了。
最後
一個郵件的樣子也是非常重要的，它也是專案的一部分，並且作為一個可研究的東西，也是非常有價值的。 奮鬥吧，猿們。