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