Hello World

简介

一个 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 中使用。

Hello World!

<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