電子郵件 AMP 基礎知識

重要提示：本文件不適用於您目前選擇的廣告格式！

如果您熟悉 AMP，那真是太棒了！電子郵件 AMP 只是 AMP HTML 函式庫的一個子集。如果您不熟悉 AMP，那也沒關係！本指南將提供您開始撰寫有效的 AMP 電子郵件所需的一切知識！

必要標記

AMP 電子郵件看起來像傳統 HTML 電子郵件，但有一些差異。以下是使電子郵件成為有效的 AMP 電子郵件所需的最小標記量。

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  Hello, AMP4EMAIL world.
</body>
</html>

支援 AMP 電子郵件的電子郵件供應商已設置安全檢查，以確保使用者獲得愉快且安全的體驗。使用 AMP 建構的電子郵件必須符合所有要求

從 `` doctype 開始。這也是 HTML 的標準。
包含頂層的 ` amp4email>` 標籤，或者如果您的電子郵件非常酷，可以使用 `` 標籤。這將文件識別為 AMP 電子郵件，以便可以將其視為 AMP 電子郵件。
定義 `` 和 `` 標籤。這在 HTML 中是可選的，但 AMP 保持程式碼的整潔！
包含 `` 標籤導入的。沒有它，透過 AMP 獲得的所有出色且動態的功能都將無法運作！作為最佳實務，應盡可能早地將其包含在 `` 中，直接位於 `` 標籤下方。
在 `` 中放置 AMP for Email 樣板程式碼，以在 AMP 函式庫載入完成之前，先隱藏電子郵件內容。

<head>
...
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>

AMP 特定標籤取代

由於 AMP for Email 函式庫是 AMP HTML 函式庫的一個子集，因此許多相同的規則都適用；AMP 特定標籤取代了資源密集型 HTML 標籤，並且需要定義寬度和高度。這使得 AMP 樣板程式碼可以在了解內容在使用者裝置上的外觀之前，先隱藏內容。

圖片

為了有效地繪製頁面，所有 `` 標籤都將被 `` 取代。`` 標籤需要定義寬度和高度，並支援 AMP 的版面配置系統

<amp-img src="https://link/to/img.jpg"
    width="100"
    height="100"
    layout="responsive">
</amp-img>

標籤具有強大的內建方法來控制響應式設計和設定後備方案。

閱讀更多關於使用 AMP 版面配置和媒體查詢，以及如何設定圖片後備方案的資訊。

GIF 動圖

AMP 建立了一個 ``，這是一個用於 GIF 圖片的特定標籤，允許 AMP 執行階段在動畫離開螢幕時降低 CPU 使用率。與 `` 類似，寬度和高度是已定義的，並且元素必須包含結束標籤。

<amp-anim
    width="400"
    height="300"
    src="my-gif.gif">
</amp-anim>

此外，它還支援一個可選的 `placeholder` 子元素，用於在 `src` 檔案載入時顯示，並支援 AMP 版面配置系統。

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

具有樣式的電子郵件

與所有電子郵件用戶端一樣，AMP 允許使用內聯 `style` 屬性，但也支援電子郵件標頭中 `