使用HTML編寫簡單的郵件模版

2020-03-24 19:03:20

字體：大中小

來源：轉載

供稿：網友

今天，我想寫一個低技術問題。話說我訂閱了不少了新聞郵件（Newsletter），比如JavaScript Weekly。每周收到一封郵件，了解本周的大事。
有一天，我就在想，是不是我也能做一個這樣的郵件？然后，就發現這事不那么容易。拋開后臺和編輯工作，單單是設計一個Email樣板，就需要不少心思。
因為這種帶格式的郵件，其實就是一張網頁，正式名稱叫做HTML Email。它能否正常顯示，完全取決于郵件客戶端。大多數的郵件客戶端（比如Outlook和Gmail），會過濾HTML設置，讓郵件面目全非。我發現，編寫HTML Email的竅門，就是使用15年前的網頁制作方法。下面就是我整理的編寫指南。 1. Doctype 目前，兼容性最好的Doctype是XHTML 1.0 Strict，事實上Gmail和Hotmail會刪掉你的Doctype，換上這個Doctype。XML/HTML Code復制內容到剪貼板
!DOCTYPEhtmlPUBLIC -//W3C//DTDXHTML1.0Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd htmlxmlns= http://www.w3.org/1999/xhtml head metahttp-equiv= Content-Type content= text/html;charset=UTF-8 / title HTMLEmail編寫指南 /title metaname= viewport content= width=device-width,initial-scale=1.0 / /head /html
2. 布局網頁的布局（layout）必須使用表格（table）。首先，放置一個最外層的大表格，用來設置背景。XML/HTML Code復制內容到剪貼板
body > 表格的 border 屬性等于1, 是為了方便開發。正式發布的時候，再把這個屬性設為0。在內層，放置第二個表格。用來展示內容。第二個table的寬度定為600像素，防止超過客戶端的顯示寬度。XML/HTML Code復制內容到剪貼板
tablealign= center border= 1 cellpadding= 0 cellspacing= 0 width= 600 > 郵件內容有幾個部分，就設置幾行（row）。 3. 圖片圖片是唯一可以引用的外部資源。其他的外部資源，比如樣式表文件、字體文件、視頻文件等，一概不能引用。有些客戶端會給圖片鏈接加上邊框，要去除邊框。CSS Code復制內容到剪貼板
img{outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;} aimg{border:none;} imgborder= 0 > 需要注意的是，不少客戶端默認不顯示圖片（比如Gmail），所以要確保即使沒有圖片，主要內容也能被閱讀。 4. 行內樣式所有的CSS規則，最好都采用行內樣式。因為放置在網頁頭部的樣式，很可能會被客戶端刪除。客戶端對CSS規則的支持情況，請看這里。另外，不要采用CSS的簡寫形式，有些客戶端不支持。比如，不要寫成下面這樣： XML/HTML Code復制內容到剪貼板
p > 5. W3C校驗和測試工具要保證最終的代碼，能夠通過W3C的校驗，因為某些客戶端會把不合格屬性剝離。還要使用測試工具（1, 2, 3），查看在不同客戶端的顯示結果。發送HTML Email的時候，不要忘記MIME類型不能使用 XML/HTML Code復制內容到剪貼板
6. 模板使用別人已經做好的模板，是一個不錯的選擇（這里和這里），網上還可以搜到更多。自己開發的話，可以參考HTML Email Boilerplate和Emailology。
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html5 viewport總結講述

下一篇：html的標簽的應該怎樣嵌套