HTML Email的編寫

總結回顧

• 這樣回答繼承，面試官可能更滿意
• 箭頭函數和普通函數的10個區別
• html 空白漢字佔位符
• 我想了解更多判斷數組的方式

1、HTML Email的編寫開發場景

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

2、遇到的問題

Email的兼容性不好

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

Email容器不一樣

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

Email自帶設置

郵箱軟件自己設置設置了些css，他可能對你產生未知的影響。可能根本沒有申明doctype，即便申明瞭，也不是你想要的doctype。

避免被嵌套在不正確的容器裏

由於容器多是body或div，咱們郵件內容不該該是一個完整的html。因此郵件內容應該是以div爲根節點的html片斷。

3、環境（外部容器）

咱們寫的郵件代碼在不用的郵件服務商下，對應的外部容器不太同樣。

QQ郵箱：本身編寫的內容被嵌套在一個div中

outlook郵箱：本身編寫的內容不知道被嵌套什麼元素裏了，它自己的元素加上我編寫的元素被混在一塊兒了

其餘的郵箱大家能夠本身測試一下

4、開發的Doctype

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

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

5、開發的佈局

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

  

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

6、開發的樣式

• 避免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等無語義標籤。

7、開發圖片

• 少用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），因此要確保即便沒有圖片，主要內容也能被閱讀。

8、開發的background

• 少用background 推薦儘量使用切割的img
• Gmail也不支持css裏面的背景圖
• 在outlook200七、Outlook2010中，背景圖片將沒法顯示

  

圖片是惟一能夠引用的外部資源。其餘的外部資源，好比樣式表文件、字體文件、視頻文件等，一律不能引用。 有些客戶端會給圖片連接加上邊框，要去除邊框。 須要注意的是，很多客戶端默認不顯示圖片（好比Gmail），因此要確保即便沒有圖片，主要內容也能被閱讀。

9、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支持各有不一樣，因此必定要多測試再發送，保證樣式的正確。若是出現了不兼容的狀況，必定要耐心的使用最簡單的方式進行兼容，儘可能少用特殊標籤及比較複雜的屬性。

來源：團隊平常總結分享