本文最初於2006年首次發表，然後於2015年更新。
> 自從本文於2006年首次發表以來，
如果您認為很難確保網站的跨瀏覽器兼容性，請注意這是一個全新的遊戲 - 這些電子郵件軟件工具中的每一個都可以以截然不同的方式顯示相同的電子郵件。即使這些工具確實正確顯示了HTML電子郵件，例如，在閱讀電子郵件時，讀者在窗口大小的寬度中考慮了寬度。
您是選擇手工編碼HTML電子郵件（我的個人喜好）還是使用現有模板，在創建HTML電子郵件時，有兩個基本概念要牢記：>
> CSS樣式聲明出現在主體標籤下方，而不是頭標籤之間。
>
因此，將符合標準的最佳實踐和精益標記技能放在一邊：我們即將弄髒手！>
單列佈局通常包括：
>>兩列電子郵件還使用標頭和頁腳。像兩列網頁一樣，他們通常使用狹窄的側列來容納功能並鏈接到更多信息，而較寬的列則包含電子郵件的身體內容。要獲取兩列電子郵件佈局以在手機或平板電腦上很好地顯示需要一些代碼FU，正如您在本文稍後會看到的。
>促銷電子郵件遵循類似的規則，但內容和鏈接的包含更少。它們通常包括一兩個消息，有時會使用一個帶有小解釋性文本的大圖像和圖像下方的一些鏈接。>所有這些電子郵件佈局的可能性都可以輕鬆創建，使用HTML表將空間劃分為行和列。實際上，使用HTML表是實現將在不同郵件客戶端中持續呈現的佈局的唯一方法。
>無論您的電子郵件是如何設計的，重要的是要記住最重要的內容應該出現在電子郵件頂部或附近，因此當讀者打開您的電子郵件時，可以立即可見。電子郵件的左上角通常是人們打開電子郵件時首先要看的地方。
>這是我用來創建HTML電子郵件的方法： >
>
>
>
> div似乎幾乎沒有用，但跨度幾乎每次都起作用，因為它們是內聯元素。在某些情況下，跨度不僅可以用於著色或尺寸文本：它們可用於將文本放置在內容上方或下方。
>
第一個使用的測試工具是Firefox和Internet Explorer Web瀏覽器。如果電子郵件在兩個瀏覽器中都很好地顯示，則很有可能在Outlook，Yahoo！ ，Google Mail和其他服務中測試電子郵件，並且只會顯示次要問題。如果可能的話，我還建議您在Internet Explorer 6中測試您的電子郵件- 這應該可以很好地指出您的電子郵件將如何在Outlook 2003中呈現（請參閱本文末尾的資源列表，以獲取有關運行Internet的信息資源管理器6）。最後，要測試電子郵件在iPhone或iPad上的外觀，請在Safari Web瀏覽器中查看您的HTML電子郵件。 >一旦電子郵件出現在這兩個網絡瀏覽器中，請使用電子郵件交付服務將電子郵件發送到一系列測試電子郵件帳戶。理想情況下，這應該包括使用Yahoo！ ，Hotmail和Google Mail Services的帳戶。
當然，您使用的測試帳戶應由會收到電子郵件的人的郵件列表中的域名確定。例如，如果此列表中沒有AOL訂閱者，則可能是浪費時間和金錢要設置，並與AOL電子郵件帳戶進行測試。 這是我在此測試階段發現必要的最常見的代碼調整：
>
一方面，Google郵件刪除了任何樣式標籤之間包含的CSS樣式，無論它們在電子郵件中出現如何。 HTML表中顯示的字體（使用樣式的唯一替代方案）具有比預期更大的奇怪習慣，無論HTML電子郵件如何結構。
但是，好消息是，如果您為這三個電子郵件應用程序的奇怪性進行編碼，那麼您的HTML電子郵件代碼可能在大多數（如果不是全部）電子郵件客戶端中顯示得很好。以下是一些在Google郵件和其他較舊的電子郵件軟件中效果很好的技術： 也就是說，Lotus的筆記很可能會介紹您的HTML電子郵件怪癖，這些怪癖幾乎是不可信的。例如，舊版本的筆記可以將圖像轉換為其專有格式，或者簡單地忽略一封電子郵件中完美無瑕的基本HTML，但在另一封電子郵件中顯示其他html。
步驟5：編碼手機和平板電腦 >有很多人在智能手機和平板電腦以及桌面電子郵件軟件上閱讀HTML電子郵件。調整您的HTML表以在這些設備上很好地顯示，這一點很容易。它可以幫助CSS支持非常適合用於新手機和平板電腦上使用的HTML渲染引擎。 >這是一組@Media定義的示例，用於顯示手機和平板電腦的單列佈局HTML表：
>將此@media代碼直接放在您的身體標籤下方，並將其放在表格定義和TD單元格上。當您的HTML電子郵件使用設備（或Web瀏覽器水平重新尺寸）查看小於480像素時，這些定義將激活。 >編碼兩列HTML電子郵件以適應小手機和平板電腦屏幕的秘訣？將每一列放入自己的表中。接下來，對於每個HTML表，請使用內聯CSS進行浮動：左和HTML Align =“左”以浮動並對齊每個內容列表，向左對齊。然後添加到您的表定義和TD單元格中。 >使用上面的@Media代碼，對於寬度小於480像素的屏幕，這將設置列表，左右列，寬度與左側列列相同，並在主列下面滑動。 該方法可用於針對任何佈局設計更改以與手機和/或平板電腦一起使用。
>從本文中獲取的最佳主意是什麼？如果在簡單的電子郵件設計和更複雜的解決方案之間可以選擇，那麼簡單始終是最安全的賭注。 進一步閱讀
電子郵件標準項目可能是確切理解HTML和CSS的最佳起點。該網站還維護了一個酸測試，可用於比較跨電子郵件軟件的合規性，並且您可以通過幾種方式參與來幫助改善網絡標準的電子郵件支持。 >
>
這兩種電子郵件交付服務都隨著時間的推移與不同的電子郵件客戶端積極測試模板。但是，每種方法都存在細微的差異 - 廣告系列監視器將樣式聲明放置在Head Tag中，而MailChimp則沒有。請務必使用電子郵件列表的收件人使用的任何電子郵件客戶端使用任何電子郵件客戶端測試您的最終html代碼。 > 純文本電子郵件設計指南 測試HTML電子郵件 >關於 mailChimp：html電子郵件模板入門指南
有關HTML電子郵件的各個方面的許多重要信息，包括垃圾郵件過濾器的工作方式。包括一些可以使過程更容易的工具。 >
>
其中一些信息是古老的，但提供了蓮花筆記的好文章。 >
>
這種僅CSS的HTML電子郵件的方法是由列表分開發布的。注意：作者寫了本文的更新，該文章發佈在活動監視器博客上，優化了HTML電子郵件中的CSS演示文稿。
>
一個不錯的概述，描述了不同的電子郵件服務如何查看您在HTML電子郵件中包含的HTML。您無法直接解決每個問題（例如，在電子郵件的html和電子郵件版本之間創建一個明確的邊界是您的電子郵件服務提供商的問題，如果您使用一個問題），但它有助於知道發生了什麼。
>初學者的6步電子郵件營銷指南
以下是電子郵件營銷指南，該指南比可訪問的標題所建議的更完全涵蓋了主題，它包括一部分良好的信息，以從構建電子郵件模板時將從您將做出的設計決策中獲得最佳結果。它是從2020年底開始的 >>如何在2020年創建博客（並賺錢）：立即開始博客的輕鬆指南 >我可以在我的HTML電子郵件通訊中使用Web字體嗎？ 如何將圖像添加到我的HTML電子郵件通訊中？ > >我可以在我的HTML電子郵件新聞通訊中使用JavaScript嗎？ JavaScript在您的HTML電子郵件通訊中。這是因為許多電子郵件客戶端不支持JavaScript，或者出於安全原因默認情況下將其禁用。相反，請堅持使用您的電子郵件設計的HTML和CSS。 我如何在HTML電子郵件通訊中添加背景顏色？ 🎜>可以在HTML電子郵件通訊中添加背景顏色，可以使用CSS完成。您可以使用背景色屬性為整個電子郵件設置背景顏色，也可以為表或表單元格（如表或表單元格）設置背景顏色。但是，請記住，並非所有電子郵件客戶都支持背景顏色。對於那些不這樣的人，您應該使用html中的bgcolor屬性提供後備顏色。 可以使用標籤完成新聞通訊。您可以鏈接到網站，電子郵件地址或電話號碼。要鏈接到網站，請使用網站的完整URL使用HREF屬性。要鏈接到電子郵件地址，請在HREF屬性中使用MailTo：協議。要鏈接到電話號碼，請使用TEL：協議中的HREF屬性中的協議。 >在您的HTML電子郵件中添加社交媒體圖標可以使用圖像和鏈接完成新聞通訊。您將對圖像圖像使用
>這種方法可能會冒犯更喜歡使用最新標準編碼的純粹主義者，但這是目前唯一可行的方法。但是，我們正在使用表進行佈局的事實並不意味著我們需要完全求助於老式的方法。例如，無論Lotus Notes顯示HTML電子郵件多麼糟糕，您都不必求助於使用字體標籤。雖然Outlook 2007的HTML渲染引擎並不完美，但它確實顯示了基本的HTML桌子。
但是，有一些警告。讓我們看一下下一個文本樣式。
首先，使用內聯樣式存儲您的所有樣式信息，如下所示：下一步是在各種電子郵件客戶端中測試您的HTML電子郵件。通常，這將確定需要解決方法的問題。
>
>一旦對HTML電子郵件進行了調整，以使其在您的測試電子郵件帳戶中很好地顯示，下一步就是瀏覽清單。例如，驗證以下內容：
>許多電子郵件交付服務都可以查看您的HTML電子郵件如何在各種電子郵件軟件中顯示。它可以幫助您在發送之前確定需要進行哪些代碼調整。 >的代碼
Google Mail，Lotus Notes和Outlook 2007提出了自己獨特的編碼挑戰。信不信由你，Outlook 2007對CSS的支持明顯少於Outlook的先前版本！
的可能性就越大，即使不是完美的可能性也越好。
正如我們之前討論的那樣，使用包含所有內部佈局表的容器表（例如，對於標題，內容和頁腳）。這將電子郵件保留在一大塊的HTML中，因此在註釋中顯示時，佈局的一部分不太可能徘徊。
>解決方案是使用CSS @Media定義來定位HTML表TD單元格，並提高顯示屏所需的字體大小。例如，iPhone上的字體必須為13像素才能清晰。最好的部分？網絡郵件和桌面電子郵件軟件將剝離或忽略您的@Media定義，而您的手機和平板電腦將讀取代碼並完美顯示所有內容。
>
<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>
許多收到電子郵件的人喜歡HTML而不是文本，原因有很多。但是，對於程序員而言，創建HTML電子郵件的任務將始終顯示出來既簡單又非常複雜。本文描述了創建標記的許多問題和策略。
這些資源提供有價值的信息，如果您想了解有關編碼HTML電子郵件的更多信息，可以為您提供幫助。
>
電子郵件標準項目
>
本文列出了許多用於使文本電子郵件更易於掃描的簡單技術。
本文探討了多個電子郵件客戶端的測試程序。 其他相關文章包括創建HTML電子郵件佈局和了解多元測試。
的有關封鎖電子郵件圖像的文章
“> clickz和廣告系列監視
從2004年開始，ClickZ文章顯示了主要的電子郵件軟件如何比較何時阻止圖像或何時在預覽窗格中查看內容。廣告監視器的文章更加詳細，列出了實際示例和想法如何對抗電子郵件的默認映像渲染，以及設計電子郵件以在預覽窗格中看起來還可以。
> Word 2007 HTML和CSS在Outlook 2007中渲染功能
Microsoft的官方描述2007年Outlook將為HTML和CSS呈現什麼。包括指向Dreamweaver工作的驗證器以及Microsoft編輯工具的鏈接。
>“ HTML電子郵件的秘密”系列
CSS和電子郵件，在樹上接吻
> HTML代碼如何影響電子郵件可傳遞性
增長郵件列表的最佳方法之一是運行一個一致的博客。本指南是一個罕見的發現 - 它向您展示瞭如何快速運行有效的博客並產生結果，並削減了博客建議界的許多噪音。它還涵蓋了使用您的電子郵件新聞通訊來增加您的博客受眾，為您的整個操作創造了一個良性週期。
編碼HTML電子郵件新聞通訊的最佳實踐是什麼？ >編碼HTML電子郵件新聞通訊可能會有些棘手，但是遵循最佳實踐可以使過程變得更加順暢。首先，始終使用表進行佈局。與現代網絡設計不同，電子郵件設計仍然在很大程度上依賴桌子。其次，內聯CSS是必經之路。這是因為並非所有電子郵件客戶端都支持嵌入或鏈接的CSS。第三，將HTML屬性用於寬度，高度等。這樣可以確保您的電子郵件在不同的電子郵件客戶端中正確顯示。最後，在發送電子郵件之前，請務必測試您的電子郵件。有多種在線可用的工具可讓您測試您的電子郵件在不同的電子郵件客戶端中的外觀。 >如何使我的HTML電子郵件通訊響應迅速嗎？ >使您的HTML電子郵件新聞通訊響應式響應率意味著從台式計算機到手機，確保在所有設備上看起來都不錯。為此，您可以在CSS中使用媒體查詢。媒體查詢使您可以根據設備的屏幕尺寸應用不同的樣式。但是，並非所有電子郵件客戶都支持媒體查詢，因此使用移動優先方法設計您的電子郵件很重要。這意味著首先為最小的屏幕設計，然後添加媒體查詢以適應較大的屏幕。
是的，您可以在您的HTML電子郵件通訊。但是，請記住，並非所有電子郵件客戶端都支持Web字體。對於那些沒有的人，您應該始終提供後備字體。這通常是標準字體，如Arial或Times New Roman。要使用Web字體，您將使用 @font-face規則在CSS中包含字體文件。
> HTML電子郵件通訊可以使用
標籤完成。但是，有幾件事要牢記。首先，始終在您的標籤中包含寬度和高度屬性。這樣可以確保圖像正確顯示。其次，將絕對URL用於圖像。這意味著圖像源應該是完整的URL，而不是相對路徑。最後，始終包含圖像的alt文本。這是圖像的描述，如果無法加載圖像，則會顯示。 >如何確保我的HTML電子郵件通訊在所有電子郵件客戶端中看起來都不錯？但是，您可以使用一些策略。首先，始終將表用於佈局和內聯CSS。這些在電子郵件客戶端中得到了廣泛的支持。其次，在發送發送之前，請在各種電子郵件客戶端中測試您的電子郵件。有一些在線工具可讓您這樣做。最後，保持設計簡單。您的設計越複雜，在某些電子郵件客戶端中斷的可能性就越大。
>如何在我的html電子郵件通訊中添加一個呼叫式操作按鈕？您的HTML電子郵件通訊可以使用HTML和CSS完成。最簡單的方法是使用帶有CSS的標籤將其像按鈕一樣樣式。但是，要獲得跨電子郵件客戶端的更好兼容性，您可以使用具有單個單元格的表格和样式看起來像按鈕。
>如何將鏈接添加到我的HTML電子郵件通訊？
>如何將社交媒體圖標添加到我的html電子郵件通訊中？
>
以上是如何編碼HTML電子郵件通訊和電子郵件模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！
