AMP

通用元素屬性

AMP 提供一組通用屬性,這些屬性會擴充至許多 AMP 元件 (和 HTML 元素)。本文件說明各個通用屬性。

後備資源

當瀏覽器不支援元素或載入基礎資源失敗時,就會顯示後備資源。fallback 屬性可以放在任何 HTML 元素上,該元素是支援後備資源的 AMP 元素的直接子項。關於後備資源的確切行為取決於元素的實作方式,但通常後備元素會取代一般元素顯示。

常用於:圖片、動畫、音訊和影片

範例

<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>

如需更多資訊,請參閱預留位置和後備資源

高度

所有支援 responsive 版面配置的 AMP 元素,也都支援 heights 屬性。此屬性的值是根據媒體表示式的尺寸表示式,類似於 img 標記上的 sizes 屬性,但有兩個主要差異

  1. 此值適用於元素的高度,而非寬度。
  2. 允許使用百分比值。百分比值表示元素寬度的百分比。例如,值為 80% 表示元素的高度將為元素寬度的 80%。

當指定 heights 屬性以及 widthheight 時,layout 會預設為 responsive

範例

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

如需更多資訊,請參閱使用 srcset、sizes 和 heights 的美術指導

版面配置

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 屬性表示標記有此屬性的元素會做為父項 AMP 元素的預留位置。此屬性可以放在任何 HTML 元素上,該元素是支援預留位置的 AMP 元素的直接子項。根據預設,預留位置會立即針對 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>

如需更多資訊,請參閱預留位置和後備資源

尺寸

所有支援 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 的美術指導

寬度和高度

對於某些版面配置,AMP 元件必須具有包含整數像素值的 widthheight 屬性。

範例

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

如需更多資訊,請參閱版面配置和媒體查詢以及版面配置規格