Hello World 电子邮件

简介

了解如何创建您的第一个 AMP 电子邮件。此示例涵盖了 AMP 电子邮件的基本结构。

需要文档类型声明。

<!doctype html>

这告诉大家这是一个 AMP 电子邮件。<html amp4email> 也适用。

<html ⚡4email lang="en" data-css-strict>

头部

字符集定义必须是 <head> 标记的第一个子元素。

<meta charset="utf-8">

AMP 运行时。

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP for Email 样板。

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

在头部导入 AMP 组件，例如 amp-carousel 组件。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

允许的 CSS 属性和选择器

任何 AMP 文档中的所有 CSS 都必须包含在头部中的 <style amp-custom> 标记中，如上所示。AMP 中不允许使用内联样式属性。电子邮件消息中允许的 CSS 取决于电子邮件提供商。作为参考，可以在 Gmail 支持的 CSS 属性和媒体查询中找到 Gmail 中允许的 CSS 属性和值列表。

<style amp-custom>
  .emailbody {
    padding: 16px;
  }
  .helloworld {
    font-family: Helvetica;
    color: red;
    font-size: 24px;
    padding-bottom: 8px;
  }
  .images {
    max-width: 100%;
  }
</style>

整个 <style> 标记不能超过 75,000 字节。验证器将检查此项。

正文

就像在 AMP 网页中一样，可以直接使用大多数 HTML 标记。

你好！

<h1 class="helloworld">Hello!</h1>

某些标记（例如 <img> 标记）会被等效或略微增强的自定义 AMP HTML 标记替换（请参阅规范中的 HTML 标记）。

<amp-img src="https://amp.org.cn/static/samples/img/amp.jpg" width="800" height="600" layout="responsive"></amp-img>

URL 大多数情况下在 AMP for Email 中使用绝对路径。

由于我们在头部导入了 amp-carousel 组件作为示例，让我们在这里试一下。

<amp-carousel width="800" height="600" layout="responsive" type="slides" controls>
  <amp-img src="https://amp.org.cn/static/samples/img/image1.jpg" width="800" height="600" alt="a sample image"></amp-img>
  <amp-img src="https://amp.org.cn/static/samples/img/image2.jpg" width="800" height="600" alt="another sample image"></amp-img>
  <amp-img src="https://amp.org.cn/static/samples/img/image3.jpg" width="800" height="600" alt="and another sample image"></amp-img>
</amp-carousel>

需要进一步解释吗？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您对您特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者：@juliantoledo