AMP 网站

一个放大页面体验的框架。

AMP 是一个简单而强大的 Web 组件框架，它可以轻松构建快速、以用户为中心且盈利的网站。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.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>

关于此组件的所有信息

搜索

AMP 如何为您服务

AMP 会在您所在的位置与您会面。无论您是打算从头开始构建网站、使用 CMS 还是优化内部解决方案，AMP 都能为您提供帮助！AMP 的内置验证系统将指导您的开发流程，确保您的页面性能出色且以用户为先。AMP 具有内置的可访问性和跨浏览器的兼容性。

了解 AMP 的工作原理

闪电般速度

AMP 页面几乎可以在所有设备和平台上立即加载。

轻松构建

您通常可以在几天内转换您的整个存档，尤其是在使用常见的 CMS（如 WordPress 或 Drupal）时。

保持灵活性

您可以使用 CSS 自定义样式，并使用动态数据在需要时获取最新数据。

确保性能

构建一个出色的网站需要花费大量的时间和精力。AMP 组件已经针对最佳性能进行了优化。

各种网络接触点

AMP 被 Google、必应和 Twitter 等全球平台使用，它允许用户在所有平台上获得原生体验，因为在有 AMP 页面时会默认使用 AMP 页面。

开放网络

AMP 项目是一项开源计划，旨在通过提供更出色、更快速、更用户友好的体验来保护网络的未来。

Lightning Speed

AMP pages load near instantly – across all devices and platforms.

Easy Building

You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.

Maintain flexibility

You can use CSS to customize your styling and dynamic data to fetch the freshest data where needed.

Ensure performance

It takes a lot of time and effort to build a great website. AMP components are already optimized for the best performance.

Various web touch points

Used by global platforms like Google, Bing and Twitter, AMP allows users a native-feeling experience across all platforms by defaulting to AMP pages when available.