AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

AMP HTML 规范

AMP HTML 是 HTML 的一个子集，用于创作新闻文章等内容页面，能够保证某些基准性能特征。

作为 HTML 的一个子集，它对 HTML 中可用的完整标签和功能集施加了一些限制，但不需要开发新的渲染引擎：现有的用户代理可以像渲染所有其他 HTML 一样渲染 AMP HTML。

如果您主要对 AMP 中允许和不允许的内容感兴趣，请观看我们关于 AMP 限制的入门视频。

此外，AMP HTML 文档可以上传到网络服务器并像任何其他 HTML 文档一样提供服务；服务器不需要任何特殊配置。但是，它们还可以设计为通过专门的 AMP 服务系统（代理 AMP 文档）进行可选服务。这些文档从它们自己的来源提供服务，并且允许对文档应用转换，从而提供额外的性能优势。此类服务系统可能执行的不完整优化列表如下

  • 用适合查看器视区的图片大小替换图片引用。
  • 内联可见的图片。
  • 内联 CSS 变量。
  • 预加载扩展组件。
  • 缩小 HTML 和 CSS。

AMP HTML 使用一组贡献的但集中管理和托管的自定义元素来实现高级功能，例如可能在 AMP HTML 文档中找到的图片库。虽然它确实允许使用自定义 CSS 对文档进行样式设置，但它不允许作者编写的 JavaScript 超出通过自定义元素提供的范围，以达到其性能目标。

通过使用 AMP 格式，内容制作者可以使 AMP 文件中的内容可供第三方抓取（受 robots.txt 限制）、缓存和显示。

性能

可预测的性能是 AMP HTML 的主要设计目标。我们主要的目标是减少用户可以消费/使用页面内容的时间。具体来说，这意味着

  • 应最大程度减少呈现和完全布局文档所需的 HTTP 请求。
  • 只有当用户可能看到图像或广告等资源时才应下载它们。
  • 浏览器应该能够计算页面上每个资源所需的空格，而无需获取该资源。

AMP HTML 格式

示例文档 

<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <style amp-custom>
      h1 {
        color: red;
      }
    </style>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Article headline",
        "image": ["thumbnail1.jpg"],
        "datePublished": "2015-02-05T08:00:00+08:00"
      }
    </script>
    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
    ></script>
    <script
      async
      custom-element="amp-ad"
      src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
    ></script>
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src="sample.jpg" width="300" height="300"></amp-img>
    </p>
    <amp-ad
      width="300"
      height="250"
      type="a9"
      data-aax_size="300x250"
      data-aax_pubname="test123"
      data-aax_src="302"
    >
    </amp-ad>
  </body>
</html>

必需的标记

AMP HTML 文档必须

  • 以文档类型 <!doctype html> 开头。 🔗
  • 包含顶级 <html ⚡> 标记（<html amp> 也被接受）。 🔗
  • 包含 <head> 和 <body> 标记（它们在 HTML 中是可选的）。 🔗
  • 在其 head 中包含一个 <link rel="canonical" href="$SOME_URL"> 标记，该标记指向 AMP HTML 文档的常规 HTML 版本，或者如果不存在此类 HTML 版本，则指向自身。 🔗
  • 包含一个 <meta charset="utf-8"> 标记作为其 head 标记的第一个子标记。 🔗
  • 在其 head 标记中包含一个 <meta name="viewport" content="width=device-width"> 标记。还建议包括 minimum-scale=1 和 initial-scale=1。 🔗
  • 在其 head 标记中包含一个 <script async src="https://cdn.ampproject.org/v0.js"></script> 标记。 🔗
  • 在其 head 标记中包含 AMP 样板代码（head > style[amp-boilerplate] 和 noscript > style[amp-boilerplate]）。 🔗

元数据

建议对 AMP HTML 文档进行标准化元数据注释：开放图谱协议、Twitter 卡片 等。

我们还建议使用 schema.org/CreativeWork 或其任何更具体的类型（例如 schema.org/NewsArticle 或 schema.org/BlogPosting）对 AMP HTML 文档进行标记。

HTML 标签

HTML 标签可在 AMP HTML 中保持不变。某些标签具有等效的自定义标签（例如 <img> 和 <amp-img>），而其他标签则完全禁止使用。

标签 AMP HTML 中的状态
script 除非类型为 application/ld+json、application/json 或 text/plain，否则禁止使用。（如有需要，可添加其他不可执行值。）例外情况是加载 AMP 运行时环境的强制性脚本标签和加载扩展组件的脚本标签。
noscript 允许。可在文档中的任何位置使用。如果指定，则当用户禁用 JavaScript 时，<noscript> 元素内的内容将显示。
base 禁止。
img 已替换为 amp-img。
请注意：<img> 是 HTML5 中的空元素，因此没有结束标签。但是，<amp-img> 具有结束标签 </amp-img>。
picture 禁止。通过使用 备用属性提供不同的图像格式，或在 <amp-img> 上提供多个 srcset。
video 已替换为 amp-video。
audio 已替换为 amp-audio。
iframe 已替换为 amp-iframe。
frame 禁止。
frameset 禁止。
object 禁止。
param 禁止。
applet 禁止。
embed 禁止。
form 允许。需要包含 amp-form 扩展。
input 元素 大部分允许使用，但 某些输入类型除外，即 <input type=button>、<button type=image> 无效。还允许使用相关标签：<fieldset>、<label>
按钮 允许。
样式 amp-boilerplate 的必需样式标签。允许在 head 标签中使用一个额外的样式标签进行自定义样式设置。此样式标签必须具有属性 amp-custom。 🔗
链接 在 microformats.org 上注册的 rel 值允许使用。如果我们的允许列表中缺少某个 rel 值，请提交错误报告。stylesheet 和其他值（如 preconnect、prerender 和 prefetch）在浏览器中会产生副作用，因此不允许使用。从允许列表中的字体提供商获取样式表时，存在特殊情况。
元数据 http-equiv 属性可用于特定允许值；有关详细信息，请参阅 AMP 验证器规范。
a href 属性值不能以 javascript: 开头。如果设置，则 target 属性值必须为 _blank。否则允许使用。 🔗
svg 允许使用大多数 SVG 元素。

验证器实现应使用基于 HTML5 规范的允许列表，其中已删除上述标签。请参阅 AMP 标签附录。

注释

不允许使用条件 HTML 注释。

HTML 属性

以 on 开头的属性名称（例如 onclick 或 onmouseover）在 AMP HTML 中不允许使用。属性的字面名称为 on（无后缀）时允许使用。

在 AMP HTML 中不允许使用与 XML 相关的属性，例如 xmlns、xml:lang、xml:base 和 xml:space。

以 i-amp- 为前缀的内部 AMP 属性在 AMP HTML 中不允许使用。

类

以 -amp- 和 i-amp- 为前缀的内部 AMP 类名称在 AMP HTML 中不允许使用。

请查阅 AMP 文档，了解以 amp- 为前缀的类名称的含义。允许使用这些类，并且旨在允许自定义 AMP 运行时和扩展的某些功能。

所有其他已编写的类名均允许在 AMP HTML 标记中使用。

ID

某些 ID 名称在 AMP HTML 中不允许使用，例如以 -amp- 和 i-amp- 为前缀的 ID，它们可能与内部 AMP ID 冲突。

在使用 amp- 和 AMP ID 之前，请查阅特定扩展的 AMP 文档，以避免与这些扩展提供的功能（例如 amp-access）发生冲突。

通过在此处搜索 mandatory-id-attr 来查看不允许使用的 ID 名称的完整列表 here。

javascript: 模式不允许使用。

样式表

主要语义标记和 AMP 自定义元素带有默认样式，以便轻松编写响应式文档。将来可能会添加退出默认样式的选项。

@ 规则

样式表中允许使用以下 @ 规则

@font-face、@keyframes、@media、@page、@supports。

不允许使用 @import。将来可能会添加其他规则。

作者样式表

作者可以使用文档头部中的单个 <style amp-custom> 标记或内联样式向文档添加自定义样式。

<style amp-custom> 中允许使用 @keyframes 规则。但是，如果它们太多，建议将它们放在附加的 <style amp-keyframes> 标记中，该标记必须位于 AMP 文档的末尾。有关详细信息，请参阅本文档的 关键帧样式表 部分。

选择器

以下限制适用于作者样式表中的选择器

类和标记名称

在作者样式表中，类名、ID、标记名称和属性不能以字符串 -amp- 和 i-amp- 开头。这些字符串由 AMP 运行时内部使用。因此，用户样式表不能引用 -amp- 类、i-amp- ID 和 i-amp- 标记和属性的 CSS 选择器。这些类、ID 和标记/属性名称不应由作者自定义。但是，对于这些组件规范中明确禁止的任何 CSS 属性，作者可以覆盖 amp- 类和标记的样式。

为了防止使用属性选择器来规避类名限制，通常不允许 CSS 选择器包含以 -amp- 和 i-amp- 开头的标记和字符串。

重要

不允许使用 !important 限定符。这是 AMP 强制执行其元素尺寸不变性的一项必要要求。

属性

AMP 仅允许在常见浏览器中可以通过 GPU 加速的属性的转换和动画。我们目前允许：opacity、transform（也允许 -vendorPrefix-transform）。

在以下示例中，<property> 需要在上述允许列表中。

  • transition <property>（也允许 -vendorPrefix-transition）
  • @keyframes name { from: {<property>: value} to {<property: value>} }（也允许 @-vendorPrefix-keyframes）

最大大小

如果作者样式表或内联样式的总大小超过 75,000 字节，则会产生验证错误。

关键帧样式表

除了 <style amp-custom>，作者还可以添加 <style amp-keyframes> 标签，该标签专门允许关键帧动画。

以下限制适用于 <style amp-keyframes> 标签

  1. 只能放置在文档的 <body> 元素的最后一个子元素中。
  2. 只能包含 @keyframes、@media、@supports 规则及其组合。
  3. 不能大于 500,000 字节。

<style amp-keyframes> 标签存在的原因是，即使对于中等复杂的动画，关键帧规则通常也很庞大，这会导致 CSS 解析和首次内容绘制速度变慢。但此类规则通常会超过 <style amp-custom> 所施加的大小限制。将此类关键帧声明放在文档底部的 <style amp-keyframes> 中可以使它们超过大小限制。而且，由于关键帧不会阻止渲染，因此还可以避免阻止首次内容绘制来解析它们。

示例

<style amp-keyframes>
@keyframes anim1 {}

@media (min-width: 600px) {
  @keyframes anim1 {}
}
</style>
</body>

自定义字体

作者可以包含自定义字体的样式表。2 种受支持的方法是：指向允许字体提供商的链接标签和 @font-face 包含。

示例

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Tangerine"
/>

如果字体提供商支持仅限 CSS 的集成并通过 HTTPS 提供服务，则可以将其列入允许列表。目前允许以下来源通过链接标签提供字体

  • Fonts.com：https://fast.fonts.net
  • Google Fonts：https://fonts.googleapis.com
  • Font Awesome：https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
  • Typekit：https://use.typekit.net/kitId.css（相应替换 kitId）

实施者注意：添加到此列表需要更改 AMP 缓存 CSP 规则。

作者可以通过自定义 CSS 中的 @font-face CSS 指令自由包含所有自定义字体。通过 @font-face 包含的字体必须通过 HTTP 或 HTTPS 方案获取。

AMP 运行时

AMP 运行时是一段 JavaScript，在每个 AMP 文档中运行。它为 AMP 自定义元素提供实现，管理资源加载和优先级，并且可以选择包含用于开发期间的 AMP HTML 运行时验证器。

AMP 运行时通过 AMP 文档 <head> 中的强制性 <script src="https://cdn.ampproject.org/v0.js"></script> 标记加载。

可以将 AMP 运行时置于任何页面的开发模式。开发模式将在嵌入页面上触发 AMP 验证，该验证将向 JavaScript 开发者控制台发出验证状态和任何错误。可以通过将 #development=1 附加到页面的 URL 来触发开发模式。

资源

图像、视频、音频文件或广告等资源必须通过自定义元素（例如 <amp-img>）包含到 AMP HTML 文件中。我们称它们为“受管理资源”，因为 AMP 运行时决定是否以及何时加载和向用户显示它们。

对于 AMP 运行时的加载行为没有具体保证，但它通常应努力足够快地加载资源，以便在可能的情况下在用户希望看到它们时加载它们。运行时应优先考虑当前视口中的资源，并尝试预测视口的变化并相应地预加载资源。

AMP 运行时可以随时决定卸载当前不在视口中的资源，或重复使用资源容器（例如 iframe），以减少整体 RAM 消耗。

AMP 组件

AMP HTML 使用称为“AMP 组件”的自定义元素来替换内置资源加载标记（例如 <img> 和 <video>），并实现具有复杂交互（例如图片灯箱或轮播）的功能。

有关受支持组件的详细信息，请参阅 AMP 组件规范。

有 2 种类型的受支持 AMP 组件

  1. 内置
  2. 扩展

内置组件始终在 AMP 文档中可用，并具有专用自定义元素，例如 <amp-img>。扩展组件必须明确包含在文档中。

通用属性

layout、width、height、media、placeholder、fallback

这些属性定义元素的布局。这里的关键目标是确保在下载任何 JavaScript 或远程资源之前，可以显示元素并正确保留其空间。

有关布局系统的详细信息，请参阅 AMP 布局系统。

on

on 属性用于在元素上安装事件处理程序。支持的事件取决于元素。

语法值是特定于域的简单语言，格式为

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

示例：on="tap:fooId.showLightbox"

如果省略 methodName，则如果为元素定义了默认方法，则执行该方法。示例：on="tap:fooId"

某些操作（如果已记录）可能接受参数。参数在括号中定义，采用 key=value 表示法。可接受的值为

  • 未加引号的简单字符串：simple-value；
  • 带引号的字符串："string value" 或 'string value'；
  • 布尔值：true 或 false；
  • 数字：11 或 1.1。

可以通过用分号 ; 分隔两个事件来侦听元素上的多个事件。

示例：on="submit-success:lightbox1;submit-error:lightbox2"

详细了解 AMP 操作和事件。

扩展组件

扩展组件是并非一定随 AMP 运行时一起提供的组件。相反，它们必须显式包含在文档中。

通过像这样在文档的头部中包含 <script> 标签来加载扩展组件

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

<script> 标签必须具有 async 属性，并且必须具有引用元素名称的 custom-element 属性。

运行时实现可以使用该名称为这些元素呈现占位符。

脚本 URL 必须以 https://cdn.ampproject.org 开头，并且必须遵循 /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js 的严格模式。

URL

扩展组件的 URL 格式为

https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js
版本控制

请参阅 AMP 版本控制政策。

模板

模板根据特定于语言的模板和提供的 JSON 数据呈现 HTML 内容。

有关受支持模板的详细信息，请参阅 AMP 模板规范。

模板不会随 AMP 运行时一起提供，必须像扩展元素一样下载。通过在文档头部中包含一个 <script> 标记来加载扩展组件，如下所示

<script
  async
  custom-template="amp-mustache"
  src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
></script>

<script> 标记必须具有 async 属性，并且必须具有引用模板类型的 custom-template 属性。脚本 URL 必须以 https://cdn.ampproject.org 开头，并且必须遵循非常严格的 /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js 模式。

模板在文档中声明如下

<template type="amp-mustache" id="template1">
  Hello {{you}}!
</template>

type 属性是必需的，并且必须引用已声明的 custom-template 脚本。

id 属性是可选的。各个 AMP 元素会发现它们自己的模板。典型场景包括一个 AMP 元素在子元素中或通过 ID 引用查找 <template>。

模板元素内的语法取决于特定的模板语言。但是，模板语言可以在 AMP 中受到限制。例如，根据“template”元素，所有产品都必须位于有效的、格式良好的 DOM 上。所有模板输出还必须经过清理，以确保 AMP 有效输出。

要了解模板的语法和限制，请访问 模板文档。

URL

扩展组件的 URL 格式为

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js
版本控制

有关更多详细信息，请参阅自定义元素的版本控制。

安全性

当使用不包含关键字 unsafe-inline 和 unsafe-eval 的内容安全策略提供服务时，AMP HTML 文档不得触发错误。

AMP HTML 格式的设计始终如此。

所有 AMP 模板元素都必须通过 AMP 安全审查，然后才能提交到 AMP 存储库。

SVG

目前，允许使用以下 SVG 元素

  • 容器元素：“clipPath”、“defs”、“g”、“marker”、“mask”、“pattern”、“svg”、“switch”和“symbol”。
  • 结构元素：“defs”、“g”、“svg”、“symbol”和“use”。
  • 图形元素：“circle”、“ellipse”、“foreignObject”、“image”、“line”、“path”、“polygon”、“polyline”、“rect”、“text”、“textPath”和“tspan”。
  • 文本内容元素：“text”、“textPath”和“tspan”。
  • 绘图服务器元素：“linearGradient”、“pattern”和“radialGradient”。
  • 描述性元素：“desc”、“metadata”和“title”。
  • 滤镜基元元素：“feColorMatrix”、“feComposite”、“feGaussianBlur”、“feMerge”、“feMergeNode”和“feOffset”。
  • 未分类元素：“view”和“filter”。
  • 已弃用元素：“glyph”、“glyphRef”、“hkern”、“tref”和“vkern”。

以及以下属性

  • "xlink:href"：仅允许以“#”开头的 URI
  • "style"

AMP 文档发现

下面描述的机制为软件提供了一种标准化方式，用于发现是否存在规范文档的 AMP 版本。

如果存在一个 AMP 文档作为规范文档的替代表示，则规范文档应通过具有关系“amphtml”的link标签指向 AMP 文档。

示例

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" />

AMP 文档本身应通过具有关系“canonical”的link标签指向其规范文档。

示例

<link
  rel="canonical"
  href="https://www.example.com/url/to/canonical/document.html"
/>

（如果单个资源同时是 AMP 和规范文档，则规范关系应指向自身——不需要“amphtml”关系。）

请注意，为了与 AMP 使用系统的最广泛兼容性，应该能够在不执行 JavaScript 的情况下读取“amphtml”关系。（也就是说，该标签应出现在原始 HTML 中，而不是通过 JavaScript 注入。）