HTML 郵件內(nèi)容雖然也是 HTML，但是和我們在網(wǎng)頁上使用的 HTML 不同并扇，因為安全原因去团，各大郵箱服務(wù)商及郵件客戶端都會對郵件內(nèi)容進行一定程度上的處理，不會按照你寫的原本 HTML 展示穷蛹。
在桌面和移動端渲染電子郵件大約有上百萬種不同的組合方式土陪。
尤其是鼎鼎大名的 OutLook，從 OutLook2007 開始便使用 Word HTML 引擎進行渲染肴熏，為了它的安全性從而使得整個郵件倒退回了 2000 年前鬼雀，為了郵件的兼容性你不得不使用很多廢棄的標簽、屬性蛙吏，并且這一狀況將會維持無數(shù)個
年頭源哩，因為雖然萬事終有盡頭，但 OutLook 始終存在鸦做。
因為微軟一向地特立獨行励烦，使得 OutLook 成為了最難啃的骨頭。因為 OutLook 支持的標簽和屬性少得可憐泼诱，所以只要兼容了 OutLook坛掠，其他郵箱客戶端基本都不會有什么問題。
使用tableb布局
這幾乎是 HTML 郵件與普通 HTML 頁面最大的區(qū)別治筒，因為各個郵箱對 div + css 這一套布局的解析問題很大（如 float / position 等 CSS 都會被過濾屉栓，甚至 margin: 0 auto; 都不起作用），基本各大郵箱都會解析混亂耸袜，所以老式的 table 布局是上乘之選友多。這就意味著 HTML 郵件中幾乎只有這幾個元素——table / tr / td / span / img / a，盡量避免使用 div / p 或是其他標簽堤框。
而且并不是所有郵箱都支持 colspan / rowspan 屬性域滥，所以所有布局都需要使用 table 嵌套解決纵柿。
1.Doctype
目前，兼容性最好的Doctype是XHTML 1.0 Strict骗绕，事實上Gmail和Hotmail會刪掉你的Doctype藐窄，換上這個Doctype资昧。
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML Email編寫指南</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
使用這個Doctype酬土，也就意味著，不能使用HTML5的語法格带。
2.布局
網(wǎng)頁的布局（layout）必須使用表格（table）撤缴。首先，放置一個最外層的大表格叽唱，用來設(shè)置背景屈呕。
基本html
<body style="margin: 0; padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="border-collapse: collapse; width: 100%; max-width: 750px; margin: 0 auto; text-align:center; font-size:0;">
<tr>
<td style="padding: 0;">
<a href="" target="_blank">
<img border="0" src="" alt="tuya smart" title="tuya smart" style="width:100%; display: block;"
/>
</a>
</td>
</tr>
<tr>
<td style="padding: 0;">
<img border="0" src="" alt="tuya smart" title="tuya smart" style="width:100%; display: block;"
/>
</td>
</tr>
</table>
</body>
3.圖片
圖片是唯一可以引用的外部資源。其他的外部資源棺亭，比如樣式表文件虎眨、字體文件、視頻文件等镶摘，一概不能引用嗽桩。
有些客戶端會給圖片鏈接加上邊框，要去除邊框凄敢。
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border:none;
}
<img border="0" style="display:block;">
需要注意的是碌冶，不少客戶端默認不顯示圖片（比如Gmail），所以要確保即使沒有圖片涝缝，主要內(nèi)容也能被閱讀扑庞。
4.行內(nèi)樣式
所有的CSS規(guī)則，最好都采用行內(nèi)樣式拒逮。因為放置在網(wǎng)頁頭部的樣式罐氨，很可能會被客戶端刪除√苍客戶端對CSS規(guī)則的支持情況岂昭，請看這里。
另外狠怨，不要采用CSS的簡寫形式约啊，有些客戶端不支持。比如佣赖，不要寫成下面這樣：
style="font: 8px/14px Arial, sans-serif;"
如果想表達
<p style="margin: 1em 0;">
要寫成下面這樣：
<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">
