用于移动优化的 10 大基本 AMP 组件
Accelerated Mobile Pages或AMP是 Google 旨在加快移动网络速度的一项举措。为实现这一目标，AMP 标准限制了您使用 HTML、CSS 和 JavaScript 的方式，并通过其自身的运行时管理外部资源（例如图像、视频和广告）的加载。
这意味着您不能在 AMP 文档中使用任何自定义（作者编写或第三方）JavaScript 或任何与资源相关的 HTML 元素，例如图像和视频。
为了弥合用户需求和最佳性能实践之间的差距，AMP 提供了特定的组件，您可以使用这些组件来代替这些被排除的元素。
AMP 组件是特定的 HTML 标记。它们的行为类似于常规的 HTML 标签：它们具有开始和结束标签、属性，并且其中大部分都可以使用CSS 设置样式。它们很容易识别，因为它们总是以amp-前缀 开头。
内置 AMP 组件
内置函数内置于 AMP 的 JavaScript 运行时，因此您不必单独包含它们。
1.amp-img
<amp-img>替换<img>AMP HTML 文档中的标记。您需要像使用常规元素一样添加src和属性。alt<img>
<amp-img>还有两个其他必需属性：您始终需要以整数像素值指定width和height属性，因为这允许 AMP 运行时提前计算布局。
如果你想让图像响应，添加layout="responsive"属性。该layout属性控制 AMP 文档中的布局，并且可以将其添加到任何 AMP 组件（在AMP 布局系统上了解更多信息）。
|
1个
2个
3个
|
<amp-img src="img.jpg" width="350" height="200" layout="responsive" alt="My Image"></amp-img> |
您还可以使用标签srcset上的属性为不同的视口和像素密度指定不同的图像。它的工作方式与非 AMP 图片相同。<amp-img>
2.amp-video
<amp-video>可用于直接在 AMP HTML 文档中嵌入 HTML 视频。它取代了<video>AMP 文件中的内容。标签<amp-video>延迟加载视频以优化性能。
视频源必须通过 HTTPS 协议提供。您需要添加width和height属性，就像<amp-img>组件一样。
该<amp-video>标签有许多可选属性，例如autoplay和poster，您可以指定这些属性来微调 HTML5 视频的显示方式。
<amp-video>支持 mp4、webm、ogg 和HTML5 <video> 支持的所有其他格式 标签。
如果需要，您还可以使用属性和HTML 标记为使用不支持 HTML5 视频的浏览器的用户添加后备视频。fallback<source>
|
1个
2个
3个
4个
5个
6个
7
8个
|
<amp-video width="350" height="250" src="https://example.com/video.mp4" layout="responsive" autoplay> <div fallback> <p>Your browser doesn't support HTML5 videos.</p> </div> <source type="video/mp4" src="myvideo.mp4"> <source type="video/webm" src="myvideo.webm"></amp-video> |
3.amp-ad和amp-embed
<amp-ad>为您提供iframe 沙箱，您可以在其中展示您的广告。您必须通过 HTTPS 协议投放您的广告。
您不能自己运行广告网络提供的脚本。相反，AMP 运行时在沙箱内执行给定网络的 JavaScript。您只需要指定您使用的网络，并添加您的数据。
该<amp-ad>组件要求您使用和属性添加广告的尺寸。widthheight
您可以使用该type属性定义您使用的广告网络。查看支持的广告网络列表。
每个广告网络都有自己的data-*属性，您还需要添加这些属性。要查看您需要哪一个，请在上面的列表中单击您的广告网络。
|
1个
2个
3个
4个
5个
|
<amp-ad width="300" height="250" layout="responsive" type="adsense" data-ad-client="ca-pub-2005682797531342" data-ad-slot="7046626912"></amp-ad> |
<amp-embed>是 的别名，除了在语义上更准确的
情况<amp-ad>下可以使用它来代替之外，文档并没有说明太多。由于 Google 承诺会随着时间的推移改进与广告相关的 AMP 组件，因此这在未来可能会发生变化。<amp-ad>
4.amp-pixel
使用<amp-pixel>，您可以将跟踪像素添加到 AMP HTML 文档以计算页面浏览量。它只有一个属性，即 requiredsrc属性，您需要在该属性中指定属于跟踪像素的 URL。
该<amp-pixel>代码允许使用标准 URL 替换，这意味着您可以生成随机 URL 值来跟踪每次展示。
如果您想使用此组件，请参阅 AMP 的URL 替换指南。请注意，您不能为<amp-pixel>组件设置样式。
|
1个
|
<amp-pixel src="https://example.com/pixel?RANDOM"></amp-pixel> |
扩展 AMP 组件
由于扩展的 AMP 组件不是 JavaScript 运行时的一部分，因此您始终需要将它们导入<head>到要使用它们的 AMP 页面部分。
注意：组件版本将来可能会更改，所以不要忘记在文档中检查当前版本。
5.amp-audio
<amp-audio>取代了HTML5 标签，并使得直接在 AMP 页面中嵌入 HTML5 音频文件<audio>成为可能。
要使用它，您需要指定src,width和height属性，您还可以添加三个可选属性：autoplay,loop和muted。
为使用不支持 HTML5 的浏览器的用户添加后备音频文件也是一个好主意。您可以使用fallback属性和<source>标签来完成此操作，就像上述<amp-video>组件一样。
AMP组件<amp-audio>支持与HTML5 标记相同的音频格式<audio>。
|
1个
2个
3个
4个
5个
6个
7
8个
|
<amp-audio width="200" height="100" src="https://example.com/audio.mp3"> <div fallback> <p>Your browser doesn't support HTML5 audio.</p> </div> <source type="audio/mpeg" src="mysong.mp3"> <source type="audio/ogg" src="mysong.ogg"></amp-audio> |
要使用，请在AMP 文档的部分<amp-audio>中包含以下脚本：<head>
|
1个
2个
3个
|
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> |
6.amp-iframe
<amp-iframe> 在 AMP 文档中显示 iframe 。<amp-iframe>已经比常规的 HTML iframe 更安全。因此它们默认是沙箱化的。
有一些规则与<amp-iframe>您必须遵守才能通过验证有关。
另请阅读：
如何验证加速移动页面 (AMP)
您必须指定width、height和sandbox属性。该sandbox属性默认为空，但您可以为其指定不同的值以修改 iframe 的行为，例如sandbox="allow-scripts"让 iframe 运行 JavaScript。您也可以使用标准 iframe 的属性。
|
1个
2个
3个
4个
5个
6个
|
<amp-iframe width="350" height="250" layout="responsive" sandbox="allow-scripts allow-same-origin" allowfullscreen src="https://example.com/iframe"> </amp-iframe> |
虽然 的尺寸由和属性<amp-iframe>预定义，但有一种方法可以在运行时调整它的大小。要使用该组件，请将以下脚本添加到您的 AMP 页面：widthheight<amp-iframe>
|
1个
2个
3个
|
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> |
7.amp-accordion
手风琴构成了移动设计中常见的 UI 模式，因为它们节省空间，但仍以可访问的方式显示内容。<amp-accordion>可以快速将手风琴添加到 AMP 页面。
手风琴部分必须使用<section>HTML5 标签，并且需要是该标签的直接子元素<amp-accordion>。
每个部分必须有两个直接子级：
- 一个用于标题
- 一个用于内容（内容也可以是图像）
expanded在您要默认展开的任何部分上使用该属性。
|
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
16
17
18
19
|
<amp-accordion> <section expanded> <h3>Section 1</h3> <div>Content of Section 1</div> </section> <section> <h3>Section 2</h3> <p>Content of Section 2</p> </section> <section> <h3>Section 3</h3> <figure> <amp-img src="image.jpg" width="350" height="200" layout="responsive" alt="Image for Section 3"> </amp-img> <figcaption>Image for Section 3</figcaption> </figure> </section></amp-accordion> |
要在 AMP 文档中使用该<amp-accordion>组件，请包含以下脚本：
|
1个
2个
3个
|
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> |
8.amp-lightbox
<amp-lightbox> 为 Accelerated Mobile Pages 上的不同元素（在大多数情况下为图像）添加灯箱。
当用户与元素交互时，例如点击它，灯箱会展开并填满整个视口。您需要添加用户可以点击的按钮或其他控件。
请注意，amp-lightbox只能与布局一起使用nodisplay。
|
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
|
<button on="tap:mylightbox" role="button" tabindex="0"> Expand</button><amp-lightbox id="mylightbox" layout="nodisplay"> <div class="lightbox" on="tap:mylightbox.close" role="button" tabindex="0"> <amp-img src="full-image.jpg" width="375" height="667" on="tap:my-lightbox.close"> </div></amp-lightbox> |
要使用该<amp-lightbox>组件，您需要使用以下代码导入它：
|
1个
2个
3个
|
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
9.amp-carousel
轮播在移动设计中经常使用，因为它们允许沿水平轴显示许多相似的元素（最常见的是图像）。AMP 结果也在 Google 搜索中以轮播格式呈现。
该<amp-carousel>组件使您能够将轮播添加到您的站点。组件的直接子级将<amp-carousel>被视为轮播的项目。width您必须使用和属性定义轮播的尺寸height。
您可以使用可选type属性来确定如何显示轮播项目。如果该type属性取值"carousel"，则项目将显示为连续条带（这是默认设置），而该值将以幻灯片格式"slides"显示项目。
该<amp-carousel>标记还有其他可选属性，可以帮助您微调结果。
在下面的示例中，请注意轮播及其所有项目都使用相同的width和height值。
|
1个
2个
3个
4个
5个
6个
|
<amp-carousel width="300" height="400" layout="responsive" type="slides"> <amp-img src="image1.jpg" width="300" height="400"></amp-img> <amp-img src="image2.jpg" width="300" height="400"></amp-img> <amp-img src="image3.jpg" width="300" height="400"></amp-img></amp-carousel> |
该<amp-carousel>组件需要添加以下脚本：
|
1个
2个
3个
|
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> |
10.amp-analytics
<amp-analytics>可用于收集 AMP 页面上的分析数据。目前，<amp-analytics> 支持四种类型的跟踪事件，但将来可能会发生变化：
- 页面预览
- 锚点点击
- 计时器
- 滚动
要使用<amp-analytics>，你需要在标签内添加一个JSON配置对象<script>，你可以在其中配置你想要跟踪的内容。
幸运的是，Google 与许多分析供应商合作，他们提供预配置的 JSON 脚本，您只需将其复制粘贴到您的站点即可。查看可用分析供应商的列表。
要使用预配置的脚本，您需要在属性中添加分析供应商的名称type。
该<amp-analytics>标签还有一些可选属性，您可以使用这些属性进一步配置您跟踪网站的方式。
|
1个
2个
3个
4个
5个
6个
7
|
<amp-analytics> <script type="application/json"> { // ... } </script></amp-analytics> |
将以下脚本添加到<head>AMP HTML 页面的部分以导入<amp-analytics>组件：
|
1个
2个
3个
|
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> |
最后的话
在本文中，我们了解了所有内置 AMP 组件和一些扩展组件。由于 Accelerated Mobile Pages 仍然是新的，未来很多事情都可能发生变化，因此值得关注Github或官方 AMP 网站上的文档。
由于这些 AMP 组件是开源的，您还可以参与开发，甚至创建自己的组件。如果您想了解包含不同组件的完整 AMP 页面的外观，可以查看Github 上的这些示例。