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