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.js.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。只需将 #development=1 添加到 AMP URL 即可。验证错误将打印在 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