附录
专家模式关闭
专家模式
使用专家模式来隐藏针对初学者的 Web 开发指导。
解释样板 AMP HTML
<link rel="canonical"> 标签
当 AMP 刚开始时，它仅用于创建移动设备的网页。网页将具有一个为移动设备提供的 AMP 版本，以及一个为桌面编写的常规 HTML 版本（称为“规范”版本）。然后，您可以使用 <link> 标记链接这两个版本，以便搜索引擎知道这两个文档代表同一个网页。
因此，非 AMP 文档包含一个指向 AMP 文档的链接，如下所示
<link rel="amphtml" href="https://www.site.com/amp/document.html">
AMP 文档包含一个指向非 AMP 文档的链接，如下所示
<link rel="canonical" href="https://www.site.com/document.html">
现在 AMP 的功能更加完善，除非您需要在桌面页面上使用其他功能，否则在移动设备和桌面上使用 AMP 会更容易。这样，您只需维护一个页面，而不是两个页面！尽管如此，仍然需要 <link> 标记。在这种情况下，您只需将页面链接到自身，如下所示
<link rel="canonical" href="https://www.site.com/amp/document.html">
为所有设备使用单个 AMP 页面称为“规范 AMP”。这就是我们为奶酪自行车店所做的事情！
amp-boilerplate <style> 标签
所有 AMP HTML 页面还必须在 <head> 标记中包含一些默认样式。此样式会影响页面的外观，直到 AMP 库完全加载。它的本质是，它最初会隐藏内容，直到页面准备就绪，即页面的所有元素都准备就绪，并且 AMP 知道它们的位置以及它们占用了多少空间。完成后，页面会逐渐显示。这样，用户会立即看到页面的最终形式，从而让他们觉得页面是瞬间加载的。
为什么使用视口 <meta> 标记？
AMP 可以在移动设备和桌面设备上工作。由于用户可能会在任一设备上体验您的网页，因此最好在开发时检查这两种设备上的网页。要在 Chrome DevTools 中模拟移动设备体验，请单击此处的移动电话设备图标
现在，从此菜单中选择一个移动设备（例如“Nexus 5X”）
您应该看到一个模拟，显示页面在浏览器中对于所选设备的外观，如下所示
请注意，内容不太适合移动设备的屏幕。“视口”meta 标记解决了这个问题。此标记会缩放我们的页面，以在给定的屏幕尺寸中创建最佳视图。由于我们希望我们的 AMP 页面针对移动设备进行优化，并且具有响应性，因此不用说 AMP 验证器需要此标记。
因此，必须将以下标记放在我们 AMP 页面的 <head> 标记内。将其添加到快捷方式图标链接下方。
<meta name="viewport" content="width=device-width">
如果您刷新页面，它在小屏幕上现在看起来应该会好一些，如下所示
现在您不会注意到太大的差异，除了标题之外，但是随着我们进一步的推进，您可以尝试一下以了解缩放的工作原理。
AMP 中的延迟加载
“延迟加载”意味着在需要之前不会加载资源（图像、数据、视频、脚本等）。当 AMP 下载资源时，它会优化下载，以便首先下载当前最重要的资源。仅当用户可能看到图像和广告时，或者如果用户可能会快速滚动到它们时，才会下载它们。这些用于媒体资产的等效组件（<amp-img> 而不是 <img>）称为“托管资源”，因为它们是否以及何时加载并显示给用户由 AMP 决定。AMP 随时可能决定卸载用户当前不可见的资源。AMP 的性能优化之一要求 <amp-img> 等元素提前声明其高度。这有助于 AMP 更好地计算布局的外观。例如，这至关重要，因为 AMP 会预加载第一个视口中需要的所有资源，即用户访问网站时首先看到的所有内容。
固定布局与响应式布局
AMP 包含一个 布局系统，以确保在浏览器渲染页面之前页面布局尽可能固定。此系统为我们提供了一个 layout 属性，该属性允许我们以各种方式定位和缩放元素——固定尺寸、响应式设计、固定高度等等。布局系统负责强制执行某些元素的大小声明。
布局属性适用于大多数元素，它指定 AMP 组件在页面上的显示方式。布局属性的两个常见值是“fixed”和“responsive”。如果元素具有固定的布局，则必须存在 width 和 height 属性。然后，无论屏幕或视口如何变化，元素都将保持此精确的像素大小。如果元素具有响应式布局，则同样必须存在 width 和 height 属性。但是，在这种情况下，元素将自动调整大小以占用所有可用空间，并保持由设置的 width 和 height 给定的纵横比。可用空间取决于父元素。