發送html內容的email（轉）

時間 2019-11-11

標籤發送 html 內容 email 欄目 HTML 简体版

原文原文鏈接

html中沒法使用css, js。你發送一個<div>片段就行了，不用寫整個html頁面，由於即便寫了，郵件客戶端也會刪除body以外（包括<body>這個標籤）的內容，只留下<body>標籤內部的東西php

原文：http://www.jb51.net/web/23842.htmlcss

參考：https://segmentfault.com/q/1010000000115371html

http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters/前端

https://litmus.com/blog/html-email-coding-101-infographic/email-coding-101web

因爲HTML郵件不是獨立的HOST在本站的頁面，是寄人籬下的。因此編寫HTML郵件與編寫HTML頁面有很大的不一樣。由於，各面向網民的主流郵箱都或多或少的會對它們接收到的HTML郵件在後臺進行過濾。毫無疑問，JS代碼是被嚴格過濾掉的，包括全部的事件監聽屬性，如onclick、onmouseover，這是基於郵件安全性的考慮。不只如此，CSS代碼也會被部分過濾。本人要講的就是如何編寫不被各大主流郵箱過濾的，能正常顯示的HTML郵件。算法

首先，咱們先來看看郵箱是如何展示HTML郵件的。我本人沒有作過郵件系統，何況各大郵箱後臺的過濾算法也不是那麼容易可讓外人知道的。因此，咱們只能經過前端展示，來推測哪些是被郵箱接受的寫法，而哪些又是會被過濾掉的。經過對gmail、hotmail、16三、sohu、sina幾個郵箱的分析，我把郵箱分爲兩類：canvas

第一類包括gmail、hotmail、sohu，這類郵箱，郵件內容是被佈局在整個郵箱頁面中的某個div中。如圖：segmentfault

第二類，包括16三、sina，這類郵箱，郵件內容被佈局在獨立的iframe中。如圖：安全

熟悉HTML的朋友都知道，iframe內容是做爲獨立的document，與父頁面的元素和CSS是互不相干的，幾乎能夠做爲一個獨立的頁面來對待。而若是若是郵件內容是在div中，那麼郵件內容是做爲整個郵箱頁面的一個組成部分。顯然，以iframe做爲展示方式的郵箱，對郵件內容就會寬允許多，由於它給了你一個足夠獨立的表現空間。而div就不是那麼客氣了。試想一下，若是你在你的郵件裏寫上這麼一句CSS，是否是整個郵箱的展示頁面上字體都變成20px而所以亂了套：
<style type=」text/css」>
body {font-size:20px}
</style>
咱們須要寫兼容各郵箱的統一郵件模板，那麼必然就要避開以上這種外聯CSS寫法，另外相似於float、position等成非正常內容流的style也會被過濾，假如你寫了，極可能會影響到外部郵箱的表現。app

下面我列出一些編寫原則：
一、全局規則之一，不要寫<style>標籤、不要寫class，全部CSS都用style屬性，什麼元素須要什麼樣式就用style寫內聯的CSS。

二、全局規則之二，少用圖片，郵箱不會過濾你的img標籤，可是系統每每會默認不載入陌生來信的圖片，若是用了不少圖片的郵件，在片沒有載入的狀況下，醜陋無比甚至看不清內容，沒耐心的用戶直接就刪除了。圖片上務必加上alt。

三、不要在style裏面寫float、position這些style，由於會被過濾。那麼如何實現左右佈局或者更復雜的佈局呢？用table。

四、style內容裏面background能夠設置color，可是img會被過濾，就是說不能經過CSS來設置背景圖片了。可是有一個頗有意思的元素屬性，也叫background，裏面能夠定義一個圖片路徑，這是個不錯的替代方案，雖然這樣功能有限，好比沒法定位背景圖片了，有總比沒有好。例如要給一個單元格加一個背景，必須這樣寫：
<td background=」http://image1.koubei.com/images/common/logo_koubei.gif」></td>

五、div模式的郵箱不支持flash，iframe模式的有待驗證。

最後提一句，sohu的郵箱很怪異，會在每一個文本段後面加一個空格，致使本來正常的排版一行放不下而換行，從而使某些佈局錯亂。因此，若是你要兼容sohu郵箱的話，遇到一些緊湊的佈局就要格外當心了，儘可能減小文本段的數量，留足寬度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。