📅 最后修改于: 2023-12-03 14:51:52.767000 🧑 作者: Mango
在现代化的互联网世界中，网站性能对于用户体验至关重要。Google推出了一项名为AMP（Accelerated Mobile Pages）技术，可以大大提高网站加载速度，提高用户满意度。本文将介绍如何使用Google AMP制作简单的网站。
首先，我们需要创建一个基本的AMP HTML文件。以下是一个例子：
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="your-page-url">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMP world.</title>
<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;}
}
@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>Hello, AMP HTML.</h1>
</body>
</html>
该文件具有以下特征：
<!doctype html> 开头的声明lang="en" 属性，指定默认的语言charset="utf-8" 属性，指定使用UTF-8编码viewport 声明，使网站在各种屏幕上正确呈现https://cdn.ampproject.org/v0.js 的 AMP库amp-boilerplate 样式，即AMP使用的样式noscript 部分，充当JavaScript不可用时的备用页面AMP组件可用于向网站添加各种元素，例如图片、视频、音频、表格等。我们可以在代码中添加以下组件：
<amp-img>：用于插入AMP格式的图像<amp-video>：用于插入AMP格式的视频<amp-audio>：用于插入AMP格式的音频<amp-ad>：用于插入AMP格式的广告<amp-analytics>：用于追踪和分析网站流量以下是一个例子：
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="your-page-url">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMP world.</title>
<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;}
}
@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>Hello, AMP HTML.</h1>
<amp-img src="https://example.com/image.jpg" width="100" height="100" layout="responsive"></amp-img>
<amp-video autoplay loop width="480" height="270" src="https://example.com/video.mp4"></amp-video>
<amp-ad layout="responsive" width="320" height="50" type="adsense" data-ad-client="ca-pub-123456"></amp-ad>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-0000000-01"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
</body>
</html>
最后，我们需要验证AMP HTML文件以确保其符合AMP规范。可以使用Google提供的验证器进行验证。
按以下格式在命令行运行：
amphtml-validator your-file-name.html
如果你的文件符合规范，则验证器将不会返回任何错误信息。
至此，我们已经学习了如何使用Google AMP制作简单的网站。在真正的应用中，我们可以使用更多的AMP组件和功能，以提升网站性能和用户体验。