AMP 網站

一個強化頁面體驗的框架。

AMP 是一個簡單且強大的網頁元件框架，能輕鬆建置以使用者優先且能獲利的快速網站。AMP 透過在熱門平台上的發布和降低的營運成本，為您的網路策略提供長期的成功。

隨取即用的元件

使用 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.dev.org.tw/documentation/examples/api/echo" target="_top">
    <amp-autocomplete filter="substring" src="/static/samples/json/amp-autocomplete-cities.json">
      <input>
    </amp-autocomplete>
  </form>
</amp-autocomplete>