郵件模板css及html設計規範

時間 2019-12-11

原文原文鏈接

郵件模板規範
郵件模板，請嚴格按照下面的規則執行。郵件客戶端和Web頁面的需求不一樣，在編寫代碼的時候，考慮的方向也不同。

任何同窗，有什麼問題，能夠在下面提出。

!Doctype聲明
爲了向前兼容和避免某些瀏覽器的怪癖，使用html5的!doctype聲明，格式以下：
<!DOCTYPE HTML>

原則，及思惟出發點
1. 不須要考慮DOM節點的精簡和結構的優化。
    以完成設計樣式爲最優先。必要時，沒必要吝嗇使用表格嵌套，沒必要吝嗇使用空的表格元素來佔據空間。

2. 寧肯冗餘，也不可缺乏必要定義。

3. 充分利用表格的私有屬性來佈局。width, height, bgcolor, background, align, valign等

4. 可替代性：
    在編寫html的時候，請思考當你頁面的全部圖片都被屏蔽時，是否用戶還能瞭解頁面的主要內容。
    請務必在全部要設置背景圖片的元素上，定義背景顏色。

5. 可利用Dreamweaver等工具來協助編寫html，但切記，必定要時候作好每行代碼的檢查。

Mackup
1. 主體頁面，包括細節處理，儘可能使用<table>佈局。

2. 不容許在<tr>元素上定義CSS樣式，請將樣式儘可能定義在<td>元素上。（Gmail等郵件客戶端會過濾<tr>上的屬性）

3. 禁止使用<style type="text/css">來處理主要樣式，全部的Web郵件系統都會過濾該標籤。所以郵件模板中不能使用僞類（pseudo class）和僞元素（pseudo elements），以及高級選擇符。

可是，

咱們仍然可使用<style>來提高一些比較先進的郵件PC客戶端的體驗，好比僞類。
但，必須使用表格和元素樣式來完成全部基本樣式和佈局。

4. 禁止使用<link>來加載外聯CSS

5. 可使用<div>來實現細節的，具備典型塊級元素(block)的佈局樣式。而儘可能避免使用<p>，由於咱們不容易清除<p>在不一樣瀏覽器的默認樣式

6. 注意定義圖片的替換文字（alt），及替換文字的顏色。

樣式

1. 文字的處理。
font-* 族的CSS屬性不容許使用縮寫，請分別定義 font-size, font-weight, line-height, font-family(font-family有可能被過濾)

2. 繼承性
注意表格不會繼承外部的font等屬性，請務必，在每一個<td>元素上都定義字體屬性和顏色。

3. 背景的處理

    不容許使用style="background:url(http://...)"，請使用<td>的屬性(attribute) background=「http://...」。（因爲CSS背景圖片是一種會影響頁面渲染速度的定義，所以大多數Web郵件系統會過濾它。）

    背景顏色，也請使用表格的bgcolor屬性。

4. 對於複雜樣式的處理，能夠大膽地、大塊地切圖。

5. 避免嘗試讓兩個table-cell的元素對齊，若是, 一個元素是用具體的寬度定義（width="100"），另外一個元素是用百分比來定位( width="50%")

6. 避免使用list-style來處理列表樣式，請使用「 • 」字符來替代。

7. 避免使用<img>元素拼接的方式，來實現背景大圖的分割，儘可能使用表格的background
    咱們知道，在<img>元素下4px空白的問題。

禁用的，和不建議使用的CSS樣式（見參考文獻1）
這些樣式，大都是可能引發元素偏移到容器外的樣式

禁止使用 position, background, float

特別說明：
margin: margin的使用要很是謹慎，不容許使用margin做爲重要的佈局依據，不容許使用負margin，避免使用非零和非auto的margin屬性。

圖片版本控制（點評網業務需求）
    若是郵件模板中的圖片，使用 CDN 網絡地址——如 http://i3.dpfile.com/.../abc.png——那麼，更新這張圖片的時候，請聯繫DBA（數據庫工程師）刷新該圖片的版本號。
    而且，在新的郵件模板中，將該圖片的版本號加1，好比：

    將  http://i1.dpfile.com/.../edm/top.png 更新爲 http://i1.dpfile.com/.../edm/top.v1.png
    將  http://i1.dpfile.com/.../edm/bot.v12.png 更新爲 http://i1.dpfile.com/.../edm/top.v13.png

常見問題
1. 如何讓郵件在Gmail等Web頁面中居中
有幾種方式：
    a> 在 body上定義style="width:apx; margin:auto"。注意，在Web郵件中，會自動爲你生成一個<div style="width:apx; margin:auto"> 的元素在最外層。(能夠有效利用這一特性，定義背景顏色等樣式，和實現其餘可能的事情)

        而不要嘗試本身在郵件模板最外層添加一個帶有margin:auto的<div>元素。

    b> 使用<center>

2. 如何在郵件的佈局中佔據空白
請使用空白的<td>元素，設置height屬性來起到站位的做用。css