常见元素属性
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标签上的尺寸属性，但有两个主要区别
- 该值适用于高度，而不是元素的宽度。
- 允许使用百分比值。百分比值表示元素宽度的百分比。例如，值
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、尺寸和高度进行艺术指导。
布局
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属性表示是否应为该元素关闭“加载指示器”。许多 AMP 元素会显示“加载指示器”，这是一个基本的动画，表示元素尚未完全加载。
通常与以下内容一起使用：图片、动画、视频和广告
示例
<amp-img src="card.jpg"
noloading
height="190"
width="297"
layout="responsive"
alt="...">
</amp-img>
打开
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 元素的占位符。该属性可放置在作为支持占位符的 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>
如需了解更多信息，请参阅占位符和后备。
大小
所有支持 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、尺寸和高度进行艺术指导。
宽度和高度
对于某些 布局，AMP 组件必须具有包含整数像素值的 width 和 height 属性。
示例
<amp-anim width="245"
height="300"
src="/img/cat.gif"
alt="...">
</amp-anim>