入门代码

以下标记是一个基本的 AMP 页面。

<!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.org.cn/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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 id="hello">Hello AMPHTML World!</h1>
  </body>
</html>

在 Playground 中打开此代码段

主体内容非常简单，但是头部有一些额外的代码。下表列出了所需的标记。每个 AMP HTML 文档必须

规则	描述
以 `<!doctype html>` 文档类型开头。	HTML 标准。
包含一个顶级的 `<html ⚡>` 或 `<html amp>` 标签。	将页面标识为 AMP 内容。
包含 `<head>` 和 `<body>` 标签。	虽然在 HTML 中是可选的，但在 AMP 中是必需的。
在 `<head>` 标签后紧跟一个 `<meta charset="utf-8">` 标签。	标识页面的编码。
在 `<head>` 标签内包含一个 `<script async src="https://cdn.ampproject.org/v0.js"></script>` 标签。最佳实践是尽早包含此脚本。	包含并加载 AMP JS 库。
在其 `<head>` 中包含一个 `<link rel="canonical" href="$SOME_URL">` 标签。	`href` 属性应指向页面本身。此部分存在的原因是出于历史遗留因素。
在其 `<head>` 标签内包含一个 `<meta name="viewport" content="width=device-width" />` 标签。	指定一个响应式视口。在创建响应式 AMP 页面中了解更多信息。
在其 `<head>` 标签中包含 AMP 样板代码。	CSS 样板，用于在加载 AMP JS 之前隐藏内容。

单击上面示例下的“在 Playground 中打开此代码段”即可开始构建我们的页面！

如果您想跳过此步骤，可以在此处查看完成的教程代码！

作者： @crystalonscript