以下标记可充当不错的着手点或样板。 请复制此标记并将其保存到扩展名为 .html 的文件中。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

到目前为止,正文中的内容非常简单易懂。但是,网页标头中有很多额外代码可能并不容易理解。我们来详细分析下该必需标记。

必需标记

AMP HTML 文档必须:

规则 说明
<!doctype html> doctype 开头。 适用于 HTML 的标准。
包含顶级 <html ⚡> 标记
(也可以使用 <html amp>)。
将网页标识为 AMP 内容。
包含 <head><body> 标记。 在 HTML 中是可选标记,但在 AMP 中则必须包含。
包含 <meta charset="utf-8"> 标记,以此作为其 <head> 标记的第一个子级。 标识网页的编码。
包含 <script async src="https://cdn.ampproject.org/v0.js"></script> 标记,以此作为其 <head> 标记的第二个子级。 包含并加载 AMP JS 库。
在其 <head> 内包含 <link rel="canonical" href="$SOME_URL"> 标记。 指向常规 HTML 版 AMP HTML 文档,如果不存在此类 HTML 版本,则指向其自身。有关详情,请参阅使您的网页可被轻松发现
在其 <head> 标记内包含 <meta name="viewport" content="width=device-width,minimum-scale=1"> 标记。还建议您添加 initial-scale=1 指定自适应视口。有关详情,请参阅制作自适应 AMP 网页
在其 <head> 标记内包含 AMP 样板代码 CSS 样板最初会隐藏内容,直到 AMP JS 加载完毕为止。

可选元数据

除了最基本的要求之外,我们的示例还在标头中添加了 Schema.org 定义,这对于 AMP 来说并不是一项严格的要求,但若要在特定位置(例如,在 Google 搜索“焦点新闻”轮换展示区)分发内容,则是必须满足的要求。


好消息!这就是我们制作首个 AMP 网页所需的全部内容,当然,正文中还没有添加太多内容。在下一节中,我们将介绍如何添加图片等基本元素、自定义 AMP 元素,并介绍如何设置网页样式以及如何创建自适应布局。