你好，世界

简介

AMP HTML 教程 - 了解 AMP HTML 文件的不同构建块。AMP HTML 完全基于现有的 Web 技术构建。它通过限制 HTML、CSS 和 JavaScript 的某些部分来实现可靠的性能。为了弥补这些限制，AMP HTML 为基本 HTML 之外的丰富内容定义了一组自定义元素。此示例显示了创建有效的 AMP HTML 文件所必需的内容。

需要文档类型声明。

<!doctype html>

这告诉所有人这是一个 AMP 文件。<html amp> 也可以。

<html ⚡ lang="en">

头部

字符集定义必须是 <head> 标签的第一个子元素。

<meta charset="utf-8">

AMP 运行时必须作为 <head> 标签的第二个子元素加载。

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP HTML 文件需要一个指向常规 HTML 的规范链接。如果没有 HTML 版本，它应该指向自身。

<link rel="canonical" href="https://amp.org.cn/documentation/examples/introduction/hello_world/index.html">

AMP HTML 文件需要一个视口声明。建议包含 initial-scale=1。

<meta name="viewport" content="width=device-width">

CSS 必须内嵌。

<style amp-custom>
  h1 {
    color: red;
  }
</style>

AMP 样板。

<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>

主体

大多数 HTML 标签可以直接在 AMP HTML 中使用。

你好，世界！

<h1>Hello World!</h1>

某些标签，例如 <img> 标签，会被替换为等效或略微增强的自定义 AMP HTML 标签（请参阅规范中的 HTML 标签）。你可以使用 AMP 验证器来检查你的 AMP HTML 文件是否是有效的 AMP HTML。只需在 AMP URL 中添加 #development=1 即可。验证错误将打印在 Javascript 控制台中。你可以使用此网站尝试一下，该网站是用 AMP 构建的。

查看其他示例以了解更多关于 AMP 的信息。

<amp-img src="/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive"></amp-img>

需要进一步解释吗？

如果此页面上的解释没有涵盖你所有的问题，请随时与其他 AMP 用户联系，讨论你的确切用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你能成为我们开源社区的长期参与者，但我们也欢迎你为自己特别关注的问题做出一次性的贡献。

在 GitHub 上编辑示例

由 @sebastianbenz 编写