AMP官方版

AMP简介

AMP是一个网页开发框架。该软件提供了许多HTML开发组件，可以帮助用户设计动态广告界面、动态电子邮件、网站界面效果和AMP故事。它提供了直接创建网页的功能。软件部署后，可以输入HTML代码设计网页，为用户开发HTML网页提供更多的设计组件。为满足大多数设计网站用户的需求，软件提供了高级AMPHTML广告模板，如灯箱广告、广播广告、广告、幻灯片广告等模板资源。通过直接添加模板，可以快速编辑web界面的内容，快速构建网站UI和网站内容。AMP提供了很多组件和很多交互组件来帮助用户设计网站内容！

AMP软件功能

创建持续快速的网站和广告。

可以使用CSS自定义样式。

的优化内置AMP组件

可应用于各种网络接触点。

AMP缓存

AMP故事格式具有预设但灵活的布局模板、标准化的UI控件以及用于共享和添加后续内容的组件。

AMP故事可以在不同的网站上分享和嵌入。

支持分析和账户结束功能

强大的广告支持

可以构建丰富的视觉媒体、文字、音频、动画和交互。

既支持传统广告，又支持更快更安全的AMPHTML广告。

AMP软件特色

商业利润

1.网页速度可以提升用户体验和核心业务指标。

AMP页面立即加载，使您能够在所有设备和平台上提供一致且快速的体验。

2.很容易建AMP页，减少了开发人员的开支。

您通常可以在几天内转换整个文件，尤其是当您使用流行的S(如WordPress或Drupal)时。

3.AMP可以应用于各种Web联系点。

AMP被谷歌、必应、推特等热门和全球平台使用。通过使AMP页面默认可用，您可以确保来自所有这些表面的用户获得无与伦比的、通常是即时且自然的体验。

开发商收入

1、保持灵活性和可控性，并降低代码的复杂度。

可以使用CSS自定义样式和动态数据，在需要的时候获取最新的数据，从而为客户建立最佳的用户体验。

2.确保可以构建构件。

建立一个优秀的网站需要花费大量的时间和精力。AMP组件已经过优化，以获得最佳性能。

3.在所有人的开放网络中构建可持续的未来。

AMP项目是一个开源项目，旨在保护网络的未来，帮助大家提供更好、更快、更人性化的体验。

AMP教程

制作图片广告

在AMPHTML广告文档的内，您可以包含HTML和AMP标签；但是，并非所有标签都允许。我们的广告是一个简单的图片，带有指向所宣传网站的超链接。我们将使用amp-img标签显示图像。这是代码：在AMPHTML广告文档中，可以包含HTML和AMP标签；但是，并非所有标签都是允许的。我们的广告是一个简单的图片，带有广告网站的超链接。我们将使用amp-img标签来显示图像。这是代码:

如果您在浏览器中打开html文件，您应该会看到以下图像:

如果你点击图像广告，它会带你到广告站点(即AMP项目站点)。

跟踪广告观看时间

在AMPHTML广告中，您可以使用amp-pixel或amp-ytics组件来跟踪指标。在我们的基本示例中，我们将添加使用amp-pixel组件跟踪页面视图的功能，并指向记录页面视图的L(在本例中为假想的L):

就是这样，你创建了AMPHTML广告！

在将广告上传到广告之前，您应该采取的最后一步是确保语法有效。

验证AMPHTML语法

为了确保广告的正确呈现，您应该验证AMPHTML语法。

在浏览器中，打开AMP Validator，并确保AMP4ADS是选定的HTML格式。将HTML文件中的代码复制并粘贴到验证器的窗口中:

如果您的代码有效，您将看到验证状态:p。

恭喜你！

您已经成功创建了AMP HTML广告，可以放在AMP和非AMP页面上！

处理多个事件

您可以通过用分号分隔事件来监听一个元素上的多个事件；。

示例:on = & # 8221提交-成功:lightbox1提交-错误:lightbox2 & # 8243

一个事件的多个动作

通过用逗号“，”分隔动作，可以依次执行同一事件的多个动作。

示例:on = & # 8221tap:target1.actionA，target 2 . actionb & # 8221；

全局定义的事件和操作

AMPtap全局定义了一个可以在任何HTML元素(包括AMP元素)上收听的事件。

AMP还定义了隐藏、显示和全球toggleVisibility动作，你可以在任何HTML元素上触发它们。

仅当元素先前已被隐藏或隐藏可见性或隐藏属隐藏时，才能显示该元素。show不支持CSSdisplay:none或AMP隐藏元素布局=nodisplay。

例如，在AMP中，您可以使用:

特定于元素的事件

*-所有元素

amp-视频和其他元素

以下活动由amp-video、amp-video-iframe和amp-等第三方玩家安排。

AMPHTML布局系统

摘要

系统布局的主要目标是确保AMP元素可以表达它们的布局，这样运行时就可以在完成任何远程资源(如JavaScpt和数据调用)之前推断出元素的大小。这很重要，因为它可以显著减少渲染和混叠。

考虑到这一点，AMP布局系统旨在支持少量的灵活布局，从而提供良好的性能保证。该系统依赖于一组表达式元素，如布局、宽度、高度、大小和高度。

行为

非容器AMP元素(即布局！= container)以未解析/未构造模式开始，在这种模式下，除了占位符之外，它的所有子元素都被隐藏(请参见占位符种类)。JavaScpt的和必要的、完全构造的元素仍然可以下载和初始化数据有效载荷，但是AMP运行时已经知道如何仅根据CSS类和元素布局、宽度、高度和媒体来调整大小和布局。在大多数情况下，如果占位符指定了，则其大小和位置应占据元素的所有空间。

将占位符构建为元素，它的第一个布局将立即完全隐藏。此时，预计该元素的所有子元素都已被正确构造和定位，并准备好显示和接受读者的输入。这是默认行为。例如，每个元素都可以被占位符覆盖，以便更快地隐藏或保持更长时间。

组件的大小和显示由运行时根据布局、宽度、高度和媒体来决定。所有布局规则都是通过CSS在内部实现的。如果这个元素的大小可以通过CSS样式来推断，并且不会根据它的子元素而改变，那就叫做“定义大小”:立即可用或者动态插入。这并不意味着元素的大小不能改变。布局可以是完全响应的，固定高度，填充和灵活的布局，如果是的话。这仅意味着如果没有明确的用户操作，例如在渲染或动态或后期下载期间，大小不会改变。

如果元素配置不正确，它将根本不会在PROD中呈现，而在DEV模式下，它将在运行时处于错误状态。可能的错误包括无效或不支持的布局、宽度和高度值。

布局属

宽度和高度

根据布局属的值，AMP组件元素必须具有宽度和高度属，它们包含整数像素值。的实际布局行为由布局的种类决定，如下所述。

在某些情况下，如果未指定宽度或高度，AMP运行时可以默认设置这些值，如下所示:

Amp-pixel:宽度和高度都默认为0。

Amp-dio:宽度和高度的默认值是从浏览器中推断出来的。

布局

AMP提供一组布局，用于指定文档布局中AMP组件的行为。通过将下表中指定的值之一添加到布局类别中，可以指定组件的布局。

示例:一个简单的响应图像，其中宽度和高度用于确定纵横比。

布局是受支持的值:

大小

所有支持responsive布局的AMP元素也都支持该sizes属。此属的值是img尺寸中所述的sizes表达式，但扩展到所有元素，而不仅仅是图像。简而言之，该sizes属描述了如何根据介质条件计算元素的宽度。所有支持响应式布局的AMP元素也支持sizes种类。这个属的值是img维度中描述的大小表达式，但它扩展到所有元素，而不仅仅是图像。简而言之，sizes属描述了如何根据媒体条件计算元素的宽度。

当尺寸和宽度一起指定时，高度和布局默认为响应。

示例:使用大小属

在下面的例子中，如果视口是320px宽，图像将是320px宽，否则它将是100vw宽(视口宽度的100%)。

禁用内联宽度

该sizes属本身将width在元素上设置内联样式。disable-inline-width与配对时sizes，AMP元素会将的值传播sizes到元素的基标签，就像img嵌套在内一样amp-img，而无需width像sizes在AMP中通常那样自行设置内联。sizes属本身设置元素的内联宽度样式。当disable-inline-width与size成对出现时，AMP元素会将size的值传播到元素的基本标记，就像img嵌套在其中一样。amp-img不需要像大小通常在AMP中那样，自己设置内联的宽度。

示例:使用禁用内联宽度亏格

在以下示例中，元素的宽度不受影响，大小仅用于选择源srcset。

高度

所有支持responsive布局的AMP元素也都支持该heights属。该属的值是一个基于媒体表达式的size表达式，类似于img size属，但有两个主要区别：支持响应式布局的所有AMP元素也支持heights属。该属的值是基于媒体表达的大小表达，类似于img大小属，但有两个主要区别:

1.它适用于元素的高度，但不适用于元素的宽度。

2.允许百分比值，例如86%。如果使用百分比值，则表示元素宽度的百分比。

当高度和宽度一起指定时，高度和布局默认为响应。

示例:使用高度属

在以下示例中，图像的高度默认为宽度的80%，但是如果视口大于500px，则高度限制为200px。由于heights属是用宽度和指定的高度，布局默认为响应式。

媒体

大多数AMP元素支持媒体种类。媒体的价值是媒体查询。如果查询不匹配，则根本不会呈现该元素，并且不会获得其资源以及可能的子资源。如果浏览器窗口改变大小或方向，媒体查询将根据新的结果重新评估，元素将被隐藏和显示。

示例:使用媒体种类

在下面的示例中，我们有2个带有互斥媒体查询的图像。根据屏幕宽度，将获取并渲染两幅图像中的一幅。媒体在所有AMP元素上都可用，因此它可以与广告等非图像元素一起使用。

占位符

占位符可以在任何HTML元素上设置种类，而不仅仅是AMP元素。占位符属指示用该属标记的元素充当父AMP元素的占位符。如果指定，占位符元素必须是AMP元素的直接子元素。默认情况下，即使AMP元素的资源尚未下载或初始化，也会立即显示AMP元素的占位符。准备就绪后，AMP元素通常会隐藏其占位符并显示其内容。占位符的确切行为取决于元素的实现。

撤退

回退可以在任何HTML元素上设置属，而不仅仅是AMP元素。回退是允许元素与读取器通信的约定，表示浏览器不支持该元素。如果指定，备份元素必须是AMP元素的直接子元素。关于回退的确切行为取决于元素的实现。

卸载

noloading类属指示是否应该为此元素关闭加载指示器。允许列出许多AMP元素来显示负载指示器，这是一个基本动画，表示元素尚未完全加载。元素可以通过添加这个属来退出这个行为。

(TL；Dr)布局要求和行为总结

下表描述了这种布局类型的可接受参数、CSS类和样式。注意:

1.任何带有前缀和-amp- element i-amp- with前缀的CSS类都被认为是AMP内部的，不允许在用户样式表中使用。它们仅在此显示，仅供参考。

2.即使表格中根据需要指定了宽度和高度，默认规则也可能适用，就像amp-pixel和amp-dio一样。

演示AMP布局

本页演示了AMP中的不同布局以及它们在调整屏幕大小时的工作方式。

充满/充满/充满

使用填充布局时，元素会占用其可用的空间宽度和高度。换句话说，填充元素的布局和大小与其父元素相匹配。

固定的；不变的

当使用固定布局时，元素将根据元素的宽度和高度保持其固定大小(无响应)。

固定高度

使用固定高度布局时，元素会占用可用空间，但高度保持不变。这种布局适用于需要水平放置内容的元素(例如)。

播放项目

使用flex- layout时，其元素和其父元素中的其他元素将根据flexbox模型占用可用空间。

敏感反应

使用响应布局时，元素将占用其可用空间，并自动将其高度调整到由元素的宽度和高度指定的纵横比。

固有的

使用intnsic布局时，元素将占用可用空间，并自动将其高度调整为宽度和高度给定的纵横比，直到达到元素的自然大小或CSS约束。

容器

通过容器布局，这个元素允许它的子元素定义它的大小，就像普通的HTMLdiv标签一样。假设元素本身没有特定的布局，而只是作为一个容器。

不显示

使用nodisplay布局时，不会显示元素。该元素在屏幕上占据零空间，就好像它的显示样式是相同的一样。