AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

常见属性

AMP 提供了一系列可供很多 AMP 组件(和 HTML 元素)使用的常见属性。本文档将逐一介绍每种常见属性。

fallback

fallback 是一种惯例,可让相应元素告知读者,浏览器不支持该元素或未能成功加载所需的基础资源。fallback 属性可用于任何具有以下特征的 HTML 元素:即此类元素是某个支持备用行为的 AMP 元素的直接子级。fallback 的确切行为取决于元素的实现方式,但通常情况下,备用元素会代替常规元素显示。

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

示例:

<amp-anim src="animated.gif" width="466" height="355" layout="responsive" >
  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

有关详情,请参阅占位符和备用行为

heights

所有支持 responsive 布局的 AMP 元素也都支持 heights 属性。此属性的值是一个基于媒体表达式的 sizes 表达式,类似于 img 标记中的 sizes 属性,但有以下两项主要区别:

  1. 该值适用于元素的高度,但不适用于宽度。
  2. 允许采用百分比值。百分比值表示元素的高度占宽度的百分比。例如,如果值为 80%,则表示元素的高度将是宽度的 80%。

如果同时指定了 heights 属性及 widthheight,则 layout 默认为 responsive

示例:

<amp-img src="amp.png"
    width="320" height="256"
    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="an image">
</amp-img>

有关详情,请参阅布局和媒体查询以及布局规范

media

所有 AMP 元素均支持 media 属性。media 的值是一条媒体查询。如果查询不匹配,系统便既不会呈现相应元素,也不会获取其资源和可能存在的子资源。如果浏览器窗口改变了尺寸或屏幕方向,系统则会重新评估媒体查询,并会根据所得出的新结果来隐藏和显示各元素。

示例:

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

有关详情,请参阅布局和媒体查询

noloading

noloading 属性用于表明是否应该对此元素停用“‘正在加载’指示器”。很多 AMP 元素都会显示“‘正在加载’指示器”(这是一个基本动画,旨在表明相应元素尚未加载完毕)。

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

示例:

<amp-img src="card.jpg"
    noloading
    height="190"
    width="297"
    layout="responsive">
</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 元素的占位符。该属性可用于任何具有以下特征的 HTML 元素:即此类元素是某个支持占位符的 AMP 元素的直接子级。默认情况下,即使 AMP 元素的资源尚未下载完毕或尚未完成初始化,与该 AMP 元素对应的占位符也会立即显示。一旦准备就绪,该 AMP 元素通常就会隐藏其占位符并显示所需的实际内容。placeholder 的确切行为取决于元素的实现方式。

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

示例:

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

有关详情,请参阅占位符和备用行为

sizes

所有支持 responsive 布局的 AMP 元素也都支持 sizes 属性。sizes 属性的值是一个 sizes 表达式,如 img 标记中的 sizes 属性所述,但该属性适用于所有元素,而不是仅仅适用于图片。

示例:

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

有关详情,请参阅关于 srcset、sizes 和 heights 的艺术指导

width 和 height

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

示例:

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

有关详情,请参阅布局和媒体查询以及布局规范