AMP

制作 AMP HTML 网页

以下标记可充当不错的着手点或样板。 请复制此标记并将其保存到扩展名为 .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="https://amp.dev/zh_cn/documentation/guides-and-tutorials/start/create/basic_markup/">
    <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 网页和内容时,强烈建议您使用 HTTPS 协议(而非 HTTP)。虽然 AMP 文档本身或者图片和字体并不需要使用 HTTPS,但是很多 AMP 功能(例如视频、iframe 等)都需要使用 HTTPS。为确保您的 AMP 网页能够充分利用所有 AMP 功能,请使用 HTTPS 协议。要详细了解 HTTPS,请参阅“为什么说 HTTPS 很重要”

必需标记

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 元素,并介绍如何设置网页样式以及如何创建自适应布局。