當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML邮件制作规范

發(fā)布時(shí)間：2023/12/2 HTML 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML邮件制作规范小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

以下內(nèi)容有些是別人總結(jié)的，有些是自己在工作中總結(jié)的。

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

1、用table css方式構(gòu)建模板

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

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

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

4、 嚴(yán)禁使用背景圖片

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

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

5、 嚴(yán)禁使用map標(biāo)記形式

　　造成后期可視化統(tǒng)計(jì)困難

6、 不使用word轉(zhuǎn)換的html文件作為模板

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

8、網(wǎng)站或者論壇客戶自己有服務(wù)器的涉及上傳模板文件的按照這個(gè)格式

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

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

　　這樣的格式系統(tǒng)無法抓取

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

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

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

? 　　<tr>

? 　　</tr>

　　</table>

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

12、不規(guī)范的換行會(huì)讓圖片丟失

=========================以下是我自己總結(jié)的===========================

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

　　這是查看各種郵箱屬性支持情況的網(wǎng)站

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

2、在outlook上不能用背景圖片，不能用網(wǎng)絡(luò)圖片加載。

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

4、在outlook上實(shí)現(xiàn)dom結(jié)構(gòu)居中要用align=center

5、outlook會(huì)自動(dòng)加大行距間距

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

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

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

9、Foxmail里面要想實(shí)現(xiàn)超出的文本不折行，超出部分顯示省略號(hào)，建議不要直接把文本放到td下面，而是在td下面創(chuàng)建a標(biāo)簽，把內(nèi)容放到a標(biāo)簽下，然后相應(yīng)樣式寫在a標(biāo)簽里。

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

11、有些郵箱上頁面結(jié)構(gòu)顯示不正確的問題如果和以上內(nèi)容無關(guān)的話建議采用別的dom結(jié)構(gòu)來試試。

12、outlook郵箱中，多個(gè)連續(xù)的” ”或 符號(hào)不受寬度樣式的限制，會(huì)一直往后延伸。

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

PS:

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

建議的測試環(huán)境，操作系統(tǒng)xp，win7，郵件客戶端outlook2007，outlookexpre，foxmail6.0以上

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

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

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

參考資料

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

更多專業(yè)前端知識(shí)，請上【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

html
邮件