构建一个常规的 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 的关系。