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 撰写