构建一个常规 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>

在浏览器中加载新的 article.amp.html 页面，地址为 https://127.0.0.1:8000/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 的关系。