AMP

通用元素属性

AMP 提供了一组通用的属性,这些属性被扩展到许多 AMP 组件(和 HTML 元素)。本文档描述了每个通用属性。

fallback

当浏览器不支持该元素或加载底层资源失败时,会显示回退内容。`fallback` 属性可以放置在任何支持回退的 AMP 元素的直接子级的任何 HTML 元素上。关于回退的确切行为取决于元素的实现,但通常回退元素会显示在常规元素的位置。

常用场景:图片、动画、音频和视频

示例

<amp-img src="invalid.jpg" height="400" width="300" layout="responsive" alt="...">
  <div fallback style="background-color: #ccc; display: flex; justify-content: center; align-items: center;">
    Could not load image
  </div>
</amp-img>

有关更多信息,请参阅占位符 & 回退

heights

所有支持 `responsive` 布局的 AMP 元素也支持 `heights` 属性。此属性的值是基于媒体表达式的大小表达式,类似于`img` 标签上的 sizes 属性,但有两个关键区别

  1. 该值应用于元素的高度,而不是宽度。
  2. 允许使用百分比值。百分比值表示元素宽度的百分比。例如,值 `80%` 表示元素的高度将是元素宽度的 80%。

当指定 `heights` 属性以及 `width` 和 `height` 时,`layout` 默认设置为 `responsive`。

示例

<amp-img src="amp.png"
    width="320" height="256"
    alt="..."
    heights="(min-width:500px) 200px, 80%">
</amp-img>

有关更多信息,请参阅使用 srcset、sizes & heights 进行艺术指导

layout

AMP 提供了一组布局,用于指定 AMP 组件在文档布局中的行为。您可以通过添加具有该元素支持的布局值之一的 `layout` 属性来为组件指定布局(有关支持的值,请参阅该元素的文档)。

示例

<amp-img src="/img/amp.jpg"
    width="1080"
    height="610"
    layout="responsive"
    alt="...">
</amp-img>

有关更多信息,请参阅布局 & 媒体查询布局规范

媒体

大多数 AMP 元素都支持 `media` 属性。`media` 的值是一个媒体查询。如果查询不匹配,则不会渲染该元素,并且不会提取其资源以及可能存在的子资源。如果浏览器窗口的大小或方向发生变化,则会重新评估媒体查询,并根据新结果隐藏和显示元素。

示例

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width="466"
    height="355"
    layout="responsive"
    alt="..."></amp-img>
<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width="527"
    height="193"
    layout="responsive"
    alt="..."></amp-img>

有关更多信息,请参阅布局 & 媒体查询

noloading

`noloading` 属性指示是否应为该元素关闭“加载指示器”。许多 AMP 元素会显示“加载指示器”,这是一个基本动画,表明该元素尚未完全加载。

常用场景:图片、动画、视频和广告

示例

<amp-img src="card.jpg"
    noloading
    height="190"
    width="297"
    layout="responsive"
    alt="...">
</amp-img>

on

`on` 属性用于在元素上安装事件处理程序。支持的事件取决于该元素。

常用场景:灯箱、侧边栏、实时列表和表单

语法

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

示例

<button on="tap:my-lightbox">Open lightbox</button>
<amp-lightbox id="my-lightbox" layout="nodisplay">
  ...
</amp-lightbox>

有关更多信息,请参阅AMP 中的操作和事件

placeholder

`placeholder` 属性指示用此属性标记的元素充当父 AMP 元素的占位符。该属性可以放置在任何支持占位符的 AMP 元素的直接子级的任何 HTML 元素上。默认情况下,即使 AMP 元素的资源尚未下载或初始化,也会立即显示 AMP 元素的占位符。准备就绪后,AMP 元素通常会隐藏其占位符并显示内容。关于占位符的确切行为取决于元素的实现。

常用场景:图片、动画、视频和广告

示例

<amp-anim src="animated.gif" width="466" height="355" layout="responsive" alt="...">
  <amp-img placeholder src="preview.png" layout="fill" alt="..."></amp-img>
</amp-anim>

有关更多信息,请参阅占位符 & 回退

sizes

所有支持 `responsive` 布局的 AMP 元素也支持 `sizes` 属性。AMP `sizes` 属性的值是一个大小表达式,它基于当前窗口大小选择与媒体查询对应的定义大小。此外,AMP 为元素的 `width` 设置了内联样式

示例

<amp-img src="amp.png"
    width="400" height="300"
    layout="responsive"
    alt="..."
    sizes="(min-width: 320px) 320px, 100vw">
</amp-img>

将生成以下嵌套的 `img` 标签

<img decoding="async"
    src="amp.png"
    alt="..."
    sizes="(min-width: 320px) 320px, 100vw"
    class="i-amphtml-fill-content i-amphtml-replaced-content">

有关更多信息,请参阅使用 srcset、sizes & heights 进行艺术指导

width and height

对于某些布局,AMP 组件必须具有包含整数像素值的 `width` 和 `height` 属性。

示例

<amp-anim width="245"
    height="300"
    src="/img/cat.gif"
    alt="...">
</amp-anim>

有关更多信息,请参阅布局 & 媒体查询布局规范