網頁設計工作中常常會有需求向用戶發送電子郵件，需要前端工程師來製作html格式的email郵件，但是由於郵件客戶端對樣式的支持有限，要兼容很多種瀏覽器，所以需要注意很多原則：
1.郵件基本上只能使用table+css佈局
2.郵件主要部分在body內部，所以樣式一定要寫成內嵌(inline css)的，不能在head標籤中寫style，也不能外聯(external link)。
如：
<!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 name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table class="wrapper layout-system" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="content" width="100%" cellpadding="0" cellspacing="0">
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0">
<!-- Body content -->
<tr>
<td class="content-cell">
<p style="margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;margin-bottom:
20px"><br>尊敬的開發者：<br></p>
<p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;">
<br>「xxx」在此次的‘網絡友好度測試’評級：<span style="color:#F44336;">4顆星</span>（最高5顆星）。<br>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>收到的email效果：
3.不能用浮動的方式定位。position：absolute;float:left;等都不行，float在部分郵箱客戶端中可以識別，但是在outlook中無法識別。
4.表格的border，使用table上的border屬性，可以在部分瀏覽器中兼容，但是在outlook中打開是沒有邊框的，這種情況，只能給每一個td加一個border，在table中使用border-collapse:collapse;來合併重復的邊框。
如：
<table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微軟雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
這樣設置border會在outlook中顯示不出border；
5.為了保證兼容性，需要把郵件的寬度設置為600px，最大600px；
6.少用img，因為很多郵箱客戶端默認不顯示圖片（安全等原因），所以，如果需要圖片的話，一定要寫好alt和title看不到圖片也知道想表達什麼；
7.背景圖片，盡量用background-color使用純色背景，如果一定要用背景圖片，使用background屬性，
<div background=”https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png”></div>8.郵件不支持javascript，flash以及一些特殊的標籤。
由於郵件客戶端(Mail client)對css支持各有不同，所以一定要多測試再發送，保證樣式的正確。如果出現了不兼容的情況，一定要耐心的使用最簡單的方式進行兼容，盡量少用特殊標籤及比較複雜的css屬性。
以上就是用HTML寫Email的教學，如有不清楚可留言。
