以下內容有些是別人總結的，有些是自己在工作中總結的。

模板最佳尺寸：顯示寬度550px-750px，模板高度控制在一屏以內。

1、 用table css方式構建模板

　　Div css布局不完全被郵件客戶端支持，所以無法使用div css布局。

2、 可以使用editplues，或者UltraEdit等工具制作html，但務必使用可視化工具檢查嵌套情況推薦Dreamweaver

3、 插入的圖片要定義寬度，高度，針對（editplues，UltraEdit等工具更要注意這一點）

4、 嚴禁使用背景圖片

　　在outlook2007中，背景圖片將無法顯示，其他郵件客戶端可正確顯示背景圖片。

　　Gmail也不支持css里面的背景圖，

5、 嚴禁使用map標記形式

　　造成后期可視化統計困難

6、 不使用word轉換的html文件作為模板

7、 不要用外部鏈接的css文件

<link rel="stylesheet" rev="stylesheet" type="text/css" href="/css/new/common.css" media="all" /> 這樣是抓取不到css的，要寫在html，head里面

8、網站或者論壇客戶自己有服務器的涉及上傳模板文件的按照這個格式

　　http://www.abc.com/file/0902_tr/edm.html

　　http://www.abc.com/file/0902_tr/edm_online.html

　　這樣的格式系統無法抓取

　　http://www.abc.com/file/0902_tr/

9、模板中的圖片請使用絕對路徑,完整的URl

　　<img src="http://www.abc/123.jpg" width="140" height="123" border="0" ></img>

　　<img src="http://www.abc/456.jpg" width="140" height="123" border="0" ></img>

10、一個td里面不要放多個圖片，請放在不同td里面，

　　<table width="136" border="0" cellspacing="0" cellpadding="0">

? 　　<tr>

　　　　<td><img src="http://www.abc/123.jpg" width="140" height="123" border="0" ></img></td>

　　　　<td><img src="http://www.abc/456.jpg" width="140" height="123" border="0" ></img></td>

? 　　</tr>

　　</table>

11、<img src="http://444/edm1_03.jpg" width="570" height="52"????? border="0" />

12、不規范的換行會讓圖片丟失

=========================以下是我自己總結的===========================

1、 在outlook里面很多css屬性不支持（比如：margin，overflow，text-overflow等）

　　這是查看各種郵箱屬性支持情況的網站

　　https://www.campaignmonitor.com/css/

2、在outlook上不能用背景圖片，不能用網絡圖片加載。

3、在outlook上圖片設置的寬高是不管用的

4、在outlook上實現dom結構居中要用align=center

5、outlook會自動加大行距間距

6、頁面元素之間有間距可能是html里面混入了$nbsp;(也就是空格字符)

7、align=center在不同的瀏覽器的不同的郵箱解讀代碼是不一樣的，糾錯能力也不一樣，

8、 郵件里文字的居中就用text-align，dom的居中就用align=center

9、Foxmail里面要想實現超出的文本不折行，超出部分顯示省略號，建議不要直接把文本放到td下面，而是在td下面創建a標簽，把內容放到a標簽下，然后相應樣式寫在a標簽里。

10、Foxmail不支持https的圖片路徑

11、有些郵箱上頁面結構顯示不正確的問題如果和以上內容無關的話建議采用別的dom結構來試試。

12、outlook郵箱中，多個連續的” ”或&nbsp;符號不受寬度樣式的限制，會一直往后延伸。

　　目前前端沒有找到解決辦法。

?

PS:

在瀏覽器里面瀏覽正常的模板，不一定正常！！！，要用發送系統抓取模板新建任務，發送到郵箱用瀏覽或者用客戶端查看，郵件客戶端軟件和郵箱服務商的html解析水平基本停留在table布局階段，而且出于安全考慮也有很多禁忌，請使用table css布局，用Dreamweaver修改模板后還要查看html代碼部分，空連接，怪異的或者過多的alt,title值（建議不超過30個漢字），沒有寬高的圖片都會造成郵件顯示錯誤.

建議的測試環境，操作系統xp，win7，郵件客戶端outlook2007，outlookexpre，foxmail6.0以上

Ie下的qq郵箱，126郵箱，hotmail郵箱，搜狐郵箱，新浪郵箱等等

有精力的話可以再在火狐下面再用以上郵箱測試測試

很多人用outlook2007，所以要著重測試.

參考資料

1、http://blog.csdn.net/sykent/article/details/8584637

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的HTML邮件制作规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。