AMP 网站

一个增强页面体验的框架。

AMP 是一个简单而强大的 Web 组件框架，可以轻松构建快速、用户至上且能盈利的网站。AMP 通过在热门平台上的分发和降低运营成本，为您的 Web 策略提供长期成功。

即取即用的组件

使用 AMP 丰富的组件库快速构建页面。这些组件可直接复制粘贴，并满足广泛的 UI 和功能需求。它们可以通过属性和 CSS 在行为和样式上进行自定义。最重要的是，它们背后有一个全职工程师团队，以保证出色的性能。

只想要组件而不要 AMP 生态系统？查看 Bento AMP！

<amp-carousel layout="fill" type="slides" role="region" aria-label="Basic carousel">
  <amp-img src="/static/inline-examples/images/image1.jpg" layout="fill"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg" layout="fill"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg" layout="fill"></amp-img>
</amp-carousel>

关于此组件的一切

<div class="scale-image-window">
  <amp-img id="animatedImage" width="450" height="300" layout="responsive" src="/static/samples/img/elephant.jpg"
    alt="Picture of an elephant"></amp-img>
</div>
<button on="tap:scaleUpAnimation.restart" class="ap-button anim-button">Click to scale up the image'</button>
<amp-animation id="scaleUpAnimation" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "0.5s",
      "fill": "both",
      "direction": "normal",
      "animations": [
        {
          "selector": "#animatedImage",

          "keyframes": [
            { "transform": "scale(1)" },
            { "transform": "scale(1.2)" },
            { "transform": "scale(1)" }
          ]
        }
      ]
    }
  </script>
</amp-animation>

关于此组件的一切

<amp-accordion disable-session-states>
  <section expanded>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Content in section 2.</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <p>Content in section 3.</p>
  </section>
</amp-accordion>

关于此组件的一切

第 1 部分

第 1 部分的内容。

第 2 部分

第 2 部分的内容。

第 3 部分

第 3 部分的内容。

<amp-autocomplete filter="substring" id="myAutocomplete">
  <p>Search for</p>
  <form class="sample-form" method="post" action-xhr="https://amp.org.cn/documentation/examples/api/echo" target="_top">
    <amp-autocomplete filter="substring" src="/static/samples/json/amp-autocomplete-cities.json">
      <input>
    </amp-autocomplete>
  </form>
</amp-autocomplete>