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

1、使用html編寫簡單的郵件模版今日，我想寫一個"低技術(shù)"問題。話說我訂閱了不少了新聞郵件（newsletter），比如javascript weekly。每周收到一封郵件，了解本周的事件。有一天，我就在想，是不是我也能做一個這樣的郵件？然后，就發(fā)覺這事不那么簡單。拋開后臺和編輯工作，單單是設(shè)計一個email樣板，就需要不少心思。由于這種帶格式的郵件，其實就是一張網(wǎng)頁，正式名稱叫做html email。它能否正常顯示，徹低取決于郵件客戶端。大多數(shù)的郵件客戶端（比如outlook和gmail），會過濾html設(shè)置，讓郵件面目全非。我發(fā)覺，編寫html email

2、的竅門，就是用法15年前的網(wǎng)頁制作辦法。下面就是我收拾的編寫指南。1. doctype目前，兼容性最好的doctype是xhtml 1.0 strict，實際上gmail和hotmail會刪掉你的doctype，換上這個doctype。xml/html code復(fù)制內(nèi)容到剪貼板 html email編寫指南 用法這個doctype，也就意味著，不能用法html5的語法。2. 布局網(wǎng)頁的布局（layout）必需用法表格（table）。首先，放置一個最外層的大表格，用來設(shè)置背景。xml/html code復(fù)制內(nèi)容到剪貼板 hello! 表格的 border 屬性等于1, 是為了便利開發(fā)。正式發(fā)布的

3、時候，再把這個屬性設(shè)為0。在內(nèi)層，放置其次個表格。用來展示內(nèi)容。其次個table的寬度定為600像素，防止超過客戶端的顯示寬度。xml/html code復(fù)制內(nèi)容到剪貼板 row 1 row 2 row 3 郵件內(nèi)容有幾個部分，就設(shè)置幾行（row）。3.是唯一可以引用的外部資源。其他的外部資源，比如樣式表文件、字體文件、視頻文件等，一概不能引用。有些客戶端會給鏈接加上邊框，要去除邊框。css code復(fù)制內(nèi)容到剪貼板 img outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; a img border:non

4、e; 需要注重的是，不少客戶端默認不顯示（比如gmail），所以要確保即使沒有，主要內(nèi)容也能被閱讀。4. 行內(nèi)樣式全部的css規(guī)章，最好都采納行內(nèi)樣式。由于放置在網(wǎng)頁頭部的樣式，很可能會被客戶端刪除。客戶端對css規(guī)章的支持狀況，請看這里。另外，不要采納css的簡寫形式，有些客戶端不支持。比如，不要寫成下面這樣： xml/html code復(fù)制內(nèi)容到剪貼板 style="font: 8px/14px arial, sans-serif;" 假如想表達 xml/html code復(fù)制內(nèi)容到剪貼板 要寫成下面這樣： xml/html code復(fù)制內(nèi)容到剪貼板 5. w3c校驗和測試工具要保證終于的代碼，能夠通過w3c的校驗，由于某些客戶端會把不合格屬性剝離。還要用法測試工具（1, 2, 3），查看在不同客戶端的顯示結(jié)果。發(fā)送html email的時候，不要遺忘mime類型不能用法 xml/html code復(fù)制內(nèi)容到剪貼板 content-type: text/plain; 而要用法 xml/html code復(fù)制內(nèi)容到剪貼板 content-type: multipart/alternative; 發(fā)送工具可以考慮用法 mailchimp 和 campaign monitor 。6. 模板用法別人已經(jīng)做好的模板，是一個不錯