首页 » AMP » 基本的AMP页面html示例和标签

基本的AMP页面html示例和标签

以下标记是基本的 AMP 页面html代码。

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
</body>
</html>

基本的AMP页面html示例和标签

正文内容非常简单,但头部有一些额外的代码。下表列出了所需的标记。每个 AMP HTML 文档必须:

规则 描述
<!doctype html>从文档类型开始。 HTML 的标准。
包含顶级<html ⚡>或<html amp> tag. 将页面标识为 AMP 内容。
包含<head>和<body>标记。 虽然在 HTML 中是可选的,但在 AMP 中是必需的。
<meta charset="utf-8">在标签之后包含一个<head>标签。 标识页面的编码。
<script async src="https://cdn.ampproject.org/v0.js"></script>在标签内包含一个<head>标签。作为最佳实践,您应该尽早包含脚本。 包含并加载 AMP JS 库。
在<link rel="canonical" href="$SOME_URL">他们的<head>. 该href属性应指向页面本身。本节存在是出于遗留原因。
<meta name="viewport" content="width=device-width" />在他们的标签内包含一个<head>标签。 指定响应式视口。在创建响应式 AMP 页面中了解更多信息。
在其标记中包含AMP 样板代码<head>。 在加载 AMP JS 之前最初隐藏内容的 CSS 样板。

发表评论

您的电子邮箱地址不会被公开。