入门代码

以下标记是一个基本的 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>

在游乐场中打开此代码段

正文内容非常简单，但在头部中有一些额外的代码。必需的标记在下面的表格中进行了细分。每个 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 加载之前最初隐藏内容。

点击上面示例中的“在游乐场打开此代码段”开始构建我们的页面！

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

由 @crystalonscript 撰写