构建一个常规 HTML 页面

在项目目录中，您将找到一个名为 article.html 的文件。这是我们正在为其创建 AMP 等效页面的新闻文章。

从 article.html 文件中复制全部代码并将其粘贴到新文件中。
将新文件保存为 article.amp.html。

注意 - 您不必将您的 AMP 文件命名为 .amp.html。实际上，AMP 文件可以使用您想要的任何扩展名。常见的做法是发布者通过使用 URL 中的参数来区分 AMP 页面和它们的规范版本。例如：http://publisher.com/article.html?amp。

您的 article.amp.html 文件应该如下所示

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

这是一个有意简化的页面，具有常见静态新闻文章元素：CSS、JavaScript 和一个图像标签。

我们文章的 AMP 版本现在只是原始文章的副本。让我们将其转换为 AMP。

首先，我们将添加 AMP 库文件。仅凭这一点不会使您的新文件成为有效的 AMP 页面，但我们将在下面看到 AMP 库如何帮助我们找出我们需要做些什么来修复它。

要包含 AMP 库，请将此行添加到 <head> 标签的底部

<script async src="https://cdn.ampproject.org/v0.js"></script>

在您的浏览器中以 https://127.0.0.1:8000/article.amp.html 加载新的 article.amp.html 页面，然后，在 Chrome (或您首选的浏览器) 中打开开发者控制台。

当您检查开发者控制台中的 JavaScript 输出（确保您选择了控制台选项卡）时，您应该看到此日志条目

Powered by AMP ⚡ HTML

AMP 库包含一个 AMP 验证器，它会告诉您是否有任何内容阻止您的页面成为有效的 AMP 文档。通过将此片段标识符添加到您的文档 URL 来启用 AMP 验证器

#development=1

例如

https://127.0.0.1:8000/article.amp.html#development=1

在开发者控制台中，您应该会收到几个验证错误（您可能需要在浏览器中手动刷新页面才能看到这些错误）

我们示例的 AMP 验证错误

为了使其成为有效的 AMP 文档，我们将不得不修复所有这些错误，这正是我们将在本代码实验室中执行的操作。

在我们这样做之前，让我们在浏览器的开发者工具中模拟移动设备体验，因为我们正在使用移动新闻文章。例如，在 Chrome DevTools 中，单击手机图标，然后从菜单中选择一个移动设备。

您应该会在浏览器中看到类似这样的移动模拟分辨率

我们的 AMP 页面的移动模拟

现在我们准备开始工作了！让我们逐个浏览验证错误，并解决它们与 AMP 的关系。