Google AMP - 属性

本章将讨论 amp 组件使用的所有常见属性。

公共属性列表如下 -

  • 倒退
  • 高度
  • 布局
  • 媒体
  • 空载
  • 在
  • 占位符
  • 尺寸
  • 宽度和高度

后备属性

当浏览器不支持所使用的元素或存在文件加载问题或所使用的文件有错误时，通常会使用后备属性。

例如，您正在使用 amp-video 并且媒体文件在浏览器上出现问题，因此在这种情况下，我们可以指定后备属性并显示一条消息，指出媒体文件无法播放或浏览器不支持，而不是显示页面上的错误消息。

amp-video 上使用的后备

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div> 
</amp-video>

让我们用一个例子来理解工作操作系统的后备 -

例子

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
   
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
   
      <script async custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm"type="video/webm" />
         <source src = "video/samplevideo.mp4"type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

输出

后备属性

高度属性

响应式布局基本上支持此属性。您可以对 heights 属性使用媒体表达式，它适用于元素的高度。它还采用百分比值，因此高度是根据给定的百分比宽度计算的。

例子

 
<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - heights attribute</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - heights attribute</h1>
      <amp-img src = "images/christmas1.jpg"
         width = "320" height = "256"
         heights = "(min-width:500px) 200px, 80%">
      </amp-img>
   </body>
</html>

输出

高度属性

布局属性

AMP-Layout 是 google-amp 中提供的重要功能之一。Amp 布局可确保加载页面时正确呈现 amp 组件，而不会导致任何闪烁或滚动问题。它还会在任何其他远程资源（例如图像的 http 请求、数据调用）完成之前检查页面呈现。

amp 支持的布局列表如下 -

  • 不存在
  • 容器
  • 充满
  • 固定的
  • 固定高度
  • 弹性项目
  • 固有的
  • 无显示
  • 反应灵敏

您将在本教程的Google AMP - 布局一章中详细了解相同内容。

让我们借助示例来了解layout=“responsive”的工作原理，如下所示 -

例子

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body {
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = responsive Image Example>/h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

输出

布局属性

媒体属性

此属性可用于大多数放大器组件。它需要一个媒体查询，如果值不匹配，则不会渲染组件。

让我们借助示例来了解媒体属性的工作原理 -

例子

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

我们在 <amp-img> 标签上使用了媒体属性，如下所示 -

<amp-img
   media = "(min-width: 600px)"
   src = "images/christmas1.jpg"
   width = "466"
   height = "355"
   layout = "responsive">
</amp-img>

请注意，如果屏幕宽度小于 600px，则不会显示图像。我们将使用 Google 模拟器移动模式来测试该示例。

智能手机上的输出

媒体属性

我们在设备上检查了图像不可见，因为设备的宽度小于 600 像素。如果我们检查平板电脑，我们会得到如下所示的输出 -

IPAD 上的输出

IPAD 上的输出

空载属性

<amp-img>、<amp-video>、<amp-facebook> 等 Amp 组件会在实际内容加载并显示给用户之前显示加载指示器。

要停止显示加载指示器，我们可以使用 noloading 属性，如下所示 -

<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

关于属性

on 属性用于事件处理元素和 amp 组件上的操作。属性使用的语法如下 -

语法 -

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

传递给on属性的详细信息如下 -

  • eventName - 这采用可用于 amp 组件的事件的名称。例如，对于表单，我们可以使用submit-success、submit-error eventNames。

  • elementId - 这采用需要调用事件的元素的 id。它可以是我们想要了解其成功或错误的表单的 ID。

  • methodName - 这采用事件发生时调用的方法的名称。

  • arg=value - 这采用传递给方法的 key=value 形式的参数。

还可以将多个事件传递给 On 属性，如下所示 -

on = "submit-success:lightbox;submit-error:lightbox1"

注意- 如果有多个事件，它们将被传递到 on 属性并使用分号 (;) 分隔。

动作属性

动作基本上与 on 属性一起使用，语法如下 -

on = "tab:elementid.hide;"

我们可以传递多个操作，如下所示 -

on = "tab:elementid.open;tab:elementid.hide;”

Elementid是要执行操作的元素的 ID。

Amp 有一些全局定义的事件和操作，可以在任何 amp 组件上使用，它们是点击事件，操作是hide、show和togglevisibility。

注意- 如果您想在任何 html 或 amp 组件上隐藏/显示或使用切换可见性，您可以使用on=”tap:elementid.[hide/show/togglevisibility]”

占位符属性

Placeholder 属性可以在任何 html 元素（例如 input 元素）上使用，也可以在 amp 组件上使用。占位符是页面上首先显示的内容，一旦内容加载，占位符就会被删除并被删除。变得不可见。

输入元素上的占位符

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

amp 组件上的占位符

<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive">
   <amp-img placeholder src = "images/flower.jpg" 
   layout = "fill">
   </amp-img>
</amp-anim>

尺寸属性

这就像 heights 属性一样使用。该值是一个表达式，如下所示 -

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

宽度和高度属性

它们几乎用于所有 html 元素和 amp 组件。宽度和高度用于表示 amp 元素在页面上占据的空间。

例子

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>