入门代码

以下标记是一个基本的 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 中打开此代码段

主体内容非常简单，但 head 中有一些额外的代码。下表中分解了所需的标记。每个 AMP HTML 文档都必须

规则	描述
以 `<!doctype html>` doctype 开头。	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