事情的起因是運(yùn)營需要給用戶推送各類活動(dòng)郵件，產(chǎn)品便把實(shí)現(xiàn)郵件模板的需求交由我來完成，得，有需求咱實(shí)現(xiàn)便是了。一開始想的確實(shí)挺好，不就是個(gè)靜態(tài)頁面嘛，刷的一下就搞定了，然后郵件發(fā)送出去各種兼容性問題，所幸只是測試郵件，不然就炸鍋了。果然事情沒有想象中的簡單，網(wǎng)上查了一下發(fā)現(xiàn)HTML郵件模板的編寫還是有點(diǎn)學(xué)問在的（文末附有HTML郵件相關(guān)資源推薦）
編寫前提
HTML郵件模板的編寫，先排出以下前提條件
1. 郵件內(nèi)容展示于第三方平臺(tái)
2. 郵件的解析器比較老舊
以上兩點(diǎn)前提是我們?cè)诰帉慔TML郵件時(shí)需要認(rèn)識(shí)到的，根據(jù)這兩點(diǎn)前提加網(wǎng)上的總結(jié)，我有以下注意點(diǎn)：
1. 采用table布局方式
根據(jù)前提條件2，在不知道郵件最終會(huì)在哪個(gè)第三方郵件平臺(tái)上展示時(shí)，確保布局不能亂的情況下只能用最保守的布局方式，就是table布局。這個(gè)布局方法是早期的網(wǎng)頁比較流行的方式，優(yōu)點(diǎn)很明顯，兼容性無敵
2. 注意兼容性，盡量有替代方案
還是前提條件2，盡量避免使用css3的語法，很大可能性會(huì)失效，那么要如何確定兼容性呢，文末有附上鑒別工具。在某些情況下，在與設(shè)計(jì)和產(chǎn)品反饋說兼容性不太好的情況下仍要采用當(dāng)前設(shè)計(jì)（沒錯(cuò)，這種情況也有很多），這時(shí)候就要盡量采用一些備用方案了。比如以下所示：
/* 失效情況下的補(bǔ)救方案 */
background: #00A9BA;
/* 漸變背景，有可能會(huì)失效 */
background: linear-gradient(90deg, #52D6CE 0%, #00A9BA 100%);
4. 行內(nèi)樣式優(yōu)先
為什么說行內(nèi)樣式優(yōu)先，是因?yàn)榈谌洁]件平臺(tái)展示郵件內(nèi)容的時(shí)候，有可能會(huì)去除郵件模板的head,style等標(biāo)簽，如果樣式是統(tǒng)一存放與style標(biāo)簽內(nèi)的，則模板也就亂了。所以，在編寫郵件模板時(shí)，盡量使用行內(nèi)樣式實(shí)現(xiàn)。如果存在一些特殊的情況如需要處理響應(yīng)式郵件時(shí)，就不得不用到style標(biāo)簽來做class的處理，這時(shí)候也得要有備用的兼容方案，比如移動(dòng)端樣式優(yōu)先顯示，通過媒體查詢?cè)亠@示PC端的內(nèi)容。當(dāng)然了，最好在設(shè)計(jì)前和設(shè)計(jì)師溝通一下（大霧
5. 不要存在定位
通過兼容性的查詢可知，position屬性基本不被主流郵件客戶端支持，這東西最好不用就是了。具體的原因是什么沒查到，這里可以猜測的是，如果開放position，那么有可能會(huì)將郵件客戶端的內(nèi)容給遮擋住，這也是很尷尬的
6. No JavaScript！
這個(gè)自不必說了，所有的郵件無法執(zhí)行Javascript代碼，為了安全性。所以如果產(chǎn)品有要求對(duì)郵件進(jìn)行一些腳本操作，最好的辦法就是跳轉(zhuǎn)至自用的網(wǎng)站下再進(jìn)行相應(yīng)地操作。
7. 將元素放置于body中
將布局的內(nèi)容及樣式放置于body標(biāo)簽中，是為了防止第三方客戶端刪除頭部、只保留body標(biāo)簽的情況出現(xiàn)。這里要注意的一點(diǎn)是，如果存在特殊情況下的style標(biāo)簽，那么留在body中存在的概率會(huì)大一些。
End
存手工編寫是最靠譜也是最麻煩的方法，看實(shí)際情況而定，郵件的實(shí)現(xiàn)必要時(shí)也需要和產(chǎn)品以及設(shè)計(jì)溝通，切忌讓設(shè)計(jì)天馬行空的去搞，不然麻煩的還是前端（扯皮麻煩）。
以下是一些郵件資源，這里需要說明的是，這一類的框架優(yōu)點(diǎn)是比較省事，不用寫太多，那缺點(diǎn)也很明顯，就是得學(xué)多一門幾乎是新的語言
- MJML: https://mjml.io/
- emailframe http://emailframe.work/
- Foundation for Emails 2: https://foundation.zurb.com/e...
- responsive HTML email template: https://github.com/leemunroe/responsive-html-email-template
- campaignmonitor：https://www.campaignmonitor.com/a/
