HTML Email的編寫

蝸牛的北極星之旅發表於2019-12-12
HTMLAI

總結回顧

一、HTML Email的編寫開發場景

  • 你下單 可能 電商會給你發一份 詳情郵件
  • 招行可能給你發下你的賬單郵件
  • 生日了給你發個郵件
  • 轉正了給你發個郵件
  • 入職週年郵件

二、遇到的問題

Email的相容性很差

郵件內容所在上下文或者說所在外部容器（以下簡稱環境）都是由郵箱服務商決定的，不同的郵件服務商對前端樣式佈局支援都存在在一些差別。這就要求郵件內容需要在任何一種情況下都要正常相容顯示。

Email容器不同

你寫的郵件前端程式碼可能被放在一個iframe中，那你的內容是被放在body裡面的；可能放在一個div中，你的內容就被放在這個div裡面。

Email自帶設定

郵箱軟體本身設定設定了些css，他可能對你產生未知的影響。可能根本沒有申明doctype，即使申明瞭，也不是你想要的doctype。

避免被巢狀在不正確的容器裡

因為容器可能是body或div，我們郵件內容不應該是一個完整的html。所以郵件內容應該是以div為根節點的html片段。

三、環境（外部容器）

我們寫的郵件程式碼在不用的郵件服務商下，對應的外部容器不太一樣。

QQ郵箱：自己編寫的內容被巢狀在一個div中

HTML Email的編寫
outlook郵箱：自己編寫的內容不知道被巢狀什麼元素裡了，它本身的元素加上我編寫的元素被混在一起了
HTML Email的編寫
其他的郵箱你們可以自己測試一下

四、開發的Doctype

一個文件型別標記是一種標準通用標記語言的文件型別宣告，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文件型別定義（DTD）來解析文件。

相容性最好的Doctype是XHTML 1.0 Strict，事實上Gmail和Hotmail會刪掉你的Doctype，換上這個Doctype。使用這個Doctype，也就意味著，不能使用HTML5的語法。

HTML Email的編寫
HTML Email的編寫

五、開發的佈局

  • 網頁的佈局（layout）推薦使用表格（table）
  • css內嵌，不能在head標籤中寫style，也不能外聯。
  • 不能用浮動的方式定位。position：absolute;float:left;等都不行，float在qq郵箱客戶端中可以識別，但是在outlook中無法識別。
  • 為了保證相容性，需要把郵件的寬度設定為600px，最大600px；
    HTML Email的編寫

網頁的佈局（layout）必須使用表格（table）。首先，放置一個最外層的大表格，用來設定背景。 在內層，放置第二個表格。用來展示內容。第二個table的寬度定為600畫素，防止超過客戶端的顯示寬度。

六、開發的樣式

  • 避免css衝突或被覆蓋
  • 儘量使用div、span等無語義標籤。
  • 儘量避免CSS屬性值的簡寫形式
  • font-size:0; 很重要，否則qq郵箱 會自動填寫很多空格，影響佈局
  • 減少不必要的間隙和空格等存在，影響頁面美感
錯誤的寫法
<div style="font: 8px/14px Arial, sans-serif; margin: 1px 0;"> 

推薦寫法
<div style="margin-top: 1px; margin-bottom: 1px; margin-left: 0; margin-right: 0;">
複製程式碼

所有的CSS規則，最好都採用行內樣式。因為放置在網頁頭部的樣式，很可能會被客戶端刪除。客戶端對CSS規則的支援情況 另外，不要採用CSS的簡寫形式，有些客戶端不支援。因為環境中可能已經設定了css，比如一些reset、一些.class。 所以我們只能使用行內style來確保我們的效果，並且在內容根節點上設定基礎style，並且儘量使用div、span等無語義標籤。

七、開發圖片

  • 少用img，郵箱不會過濾你的img標籤，但是系統往往會預設不載入陌生來信的圖片
  • 需要img的話，一定要寫好alt和title；
  • Outlook中img最高1728px，超過1728 的部分會被截掉
  • Outlook可能自動縮小img，使其最高位1728px，（上次測試沒縮放，直接裁了）
  • 建議剪裁img，堆疊在一起
  • 有些客戶端會給img連結加上邊框，要去除邊框。
<img border="0" style="display:block;
                    outline:none; 
                    text-decoration:none; 
                    -ms-interpolation-mode: bicubic;
                    border:none;"> 
複製程式碼

圖片是唯一可以引用的外部資源。其他的外部資源，比如樣式表檔案、字型檔案、視訊檔案等，一概不能引用。 有些客戶端會給圖片連結加上邊框，要去除邊框。 需要注意的是，不少客戶端預設不顯示圖片（比如Gmail），所以要確保即使沒有圖片，主要內容也能被閱讀。

八、開發的background

  • 少用background 推薦儘可能使用切割的img
  • Gmail也不支援css裡面的背景圖
  • 在outlook2007、Outlook2010中，背景圖片將無法顯示
    HTML Email的編寫

圖片是唯一可以引用的外部資源。其他的外部資源，比如樣式表檔案、字型檔案、視訊檔案等，一概不能引用。 有些客戶端會給圖片連結加上邊框，要去除邊框。 需要注意的是，不少客戶端預設不顯示圖片（比如Gmail），所以要確保即使沒有圖片，主要內容也能被閱讀。

九、email相容總結

  • 最好使用TABLE標籤佈局 ，通過tr td來控制距離 空白區域等
  • 每個標籤設定：margin:0;padding:0;font-size:0;（注意拆開寫）
  • 設定 width, height
  • 少用img ,少用background
  • 郵件不支援js，a標籤慎用
  • 在使用行高前建議新增mso-line-height-rule:exactly
  • margin:0; padding: 0;colspan="1" height="375" 順序不可換

客戶端：foxmail outlook QQ郵箱 為了應付Email的怪癖，花了很多時間測試，確保搞定了所有Outlook的坑窪溝洄 但是....還是不可避免有相容問題 如果你只要相容 Foxmail and qq郵箱，那你幾乎可以像寫web一樣寫郵件。 由於郵件客戶端對css支援各有不同，所以一定要多測試再傳送，保證樣式的正確。如果出現了不相容的情況，一定要耐心的使用最簡單的方式進行相容，儘量少用特殊標籤及比較複雜的屬性。

來源：團隊日常總結分享

相關文章