HTML & CSS：電子郵件編碼概念

已發表: 2017-08-10

如果您以前從未這樣做過，那麼進入編碼世界似乎會讓人望而生畏。 尤其是電子郵件編碼，有自己的一套規則。 如果您是編碼新手，那麼在直接研究 HTML 和 CSS 用於電子郵件之前，需要考慮以下事項。

我需要對我的電子郵件進行編碼嗎？

如果您沒有編碼經驗，從頭開始編碼電子郵件可能不是您的實際解決方案，當然也不是必需的。 VerticalResponse 提供多種適合移動設備的模板，並提供易於使用的編輯器，因此您可以使用自己的內容自定義我們的現成模板。

如果您確實有使用或學習 HTML 的經驗和一定程度的舒適度，那麼編寫自定義電子郵件模板可能是一個不錯的選擇。 與網頁編碼一樣，您仍然需要考慮瀏覽器和設備行為。 此外，請考慮 Gmail、Yahoo、Outlook 等數十個電子郵件客戶端的獨特樣式默認設置。 如果您習慣於用 HTML 編寫網頁並應用外部 CSS 樣式表，則需要習慣於在內部和內聯方式使用 CSS，這樣您的樣式就不會被這些電子郵件客戶端默認設置所覆蓋。

要知道的詞彙

如果您完全是編碼新手，以下是您需要了解的有關 HTML 和 CSS 的知識：

HTML是一種用於構建和描述內容的語言。 HTML 代表超文本標記語言。 當您在 HTML 中編碼時，您正在使用標籤標記您的內容，這些標籤告訴 Web 瀏覽器如何在網頁上顯示圖像和文字等信息。

CSS是一種影響內容呈現的語言。 使用 CSS，您可以為 HTML 元素分配樣式。 CSS 代表層疊樣式表。 級聯這個詞很重要，因為樣式聲明或規則將按照出現的順序得到尊重。 如果您對同一個元素進行兩次聲明，則後者將受到尊重，因為它會覆蓋之前的內容。

以下是將 CSS 綁定到 HTML 的方法：

外部 CSS：使用在 HTML 文件中引用的外部樣式表（通常名為 style.css 的文件）。 這對網站來說非常有用，因為如果您有 100 個通用元素跨越 100 個頁面，您可以使用單個 CSS 聲明一次更改它們。

內部 CSS，又名嵌入式 CSS：在 HTML 文件頂部的 <style> 標記中包含 CSS 代碼。 在對電子郵件進行編碼時，這對於分配適用於常見元素的一般樣式非常有用。 但是，電子郵件並不總是支持這種方法。

內聯 CSS：將 CSS 代碼附加到 HTML 代碼中的單個 HTML 元素。 在電子郵件編碼中，此方法可確保某些樣式不會被瀏覽器和電子郵件客戶端默認設置覆蓋。

如果您習慣於在外部或內部設置 CSS，您可以通過這種方式構建它，然後使用像 PutsMail 這樣的內聯工具將您的樣式轉換為內聯 CSS。

HTML與CSS的關係

為了更好地了解 HTML 和 CSS 之間的關係，以及將 CSS 與 HTML 分離如何可以釋放 HTML 的呈現方式，請訪問出色而著名的網站 CSS Zen Garden，在那裡您可以查看具有截然不同的 CSS 的相同 HTML 標記，由著名設計師編碼。

接近電子郵件編碼

從頭開始編寫電子郵件時，請使其盡可能簡單。 使用純文本編輯器，例如 TextWrangler、Notepad 或 Sublime，並遠離 Dreamweaver 等可視化編輯器，因為它們會在您的代碼中添加不必要的項目。

對於佈局，請嘗試採用移動優先的方法。 這意味著針對小屏幕進行設計並逐步提升。 隨著手機瀏覽量的不斷增加，確保您的電子郵件在手機和平板電腦上看起來不錯比以往任何時候都更加重要； 沒有理由創建僅在桌面上看起來不錯的複雜設計。 為最小的設備保持足夠簡單的信息和設計也將更容易編碼，所有設備的用戶都可以訪問它，它將使讀者的注意力集中在主要的行動號召上。

一旦您的佈局和編碼完成，請務必使用 Litmus 或 VerticalResponse 的 HTML 編輯器的收件箱預覽等工具來預覽您的電子郵件在各種瀏覽器和電子郵件客戶端中的外觀，以便您可以在點擊發送之前解決任何問題。

從哪裡開始學習

有許多在線教程，您可以在其中學習動手操作，詳細介紹如何編寫電子郵件。 深入研究電子郵件編碼的一種好方法是找到一個您喜歡的簡單模板並花一些時間檢查代碼。 首先熟悉 <body>、<head> 和 <div> 等主要標籤，然後注意標籤有時如何進一步定義為 ID 或類，例如 <div class=”half-column”>。 請注意，優質 HTML 模板中的命名將清晰且合乎邏輯，因此當它出現在 CSS 中時更容易判斷發生了什麼。

如果您已準備好逐步學習，請查找最近的教程（在過去一年內）。 編碼方法不斷被重新考慮。 例如，在過去幾年中流行的移動友好方法是流體/混合方法。 這個來自 Envato Tuts+ 的流體/混合教程非常適合那些已經對 HTML 有所了解的人。 對於初學者，Lynda.com 提供了許多特定於電子郵件的編碼課程。 一門好的課程將引導您完成編碼練習並提供可下載的示例項目文件，您可以將其用作參考。

花更少的時間接觸更多的客戶

右藍箭頭 立即嘗試垂直響應

（免費！）

編者註：這篇博文最初發表於 2016 年 3 月，經過修改和更新，以確保准確性和相關性。