当前位置：首页 > news >正文

AMP by Example入门教程：如何在5分钟内创建你的第一个AMP页面

news 2026/7/6 20:25:54

AMP by Example入门教程：如何在5分钟内创建你的第一个AMP页面

【免费下载链接】amp-by-exampleDEPRECATED: AMP by Example has been merged into amp.dev项目地址: https://gitcode.com/gh_mirrors/am/amp-by-example

想要构建快速加载的移动网页吗？✨ AMP（Accelerated Mobile Pages）正是您需要的解决方案！AMP by Example是一个完整的AMP学习平台，通过实际示例帮助您快速掌握AMP技术。本文将为您提供完整的AMP入门指南，让您在短短5分钟内创建第一个AMP页面。🚀

什么是AMP技术？

AMP（Accelerated Mobile Pages）是Google推出的开源框架，专门用于创建快速加载的移动网页。AMP页面通常比传统网页快4倍以上，这要归功于其严格的性能优化规则和组件系统。AMP by Example项目提供了大量实用的示例代码，是学习AMP的最佳起点。

AMP页面核心结构解析

每个有效的AMP页面都包含几个关键部分。让我们从最简单的Hello World示例开始：

1. 基础AMP页面结构

AMP页面的基本骨架包含以下元素：

<!doctype html>文档类型声明
<html ⚡>或<html amp>标签
必需的元标签和脚本
内联CSS样式
AMP样板代码

2. 必需的头部配置

AMP页面的头部必须包含以下内容：

<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>您的页面标题</title> <script async src="https://cdn.ampproject.org/v0.js"></script> <link rel="canonical" href="您的页面URL"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> /* 您的自定义CSS */ </style> <style amp-boilerplate>/* AMP样板代码 */</style> </head>

3. AMP图片组件使用

AMP使用特殊的amp-img组件代替传统的img标签，这提供了更好的性能控制和响应式支持：

<amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive" alt="AMP示例图片"> </amp-img>

5分钟快速创建AMP页面指南

第一步：设置项目环境

首先克隆AMP by Example项目仓库：

git clone https://gitcode.com/gh_mirrors/am/amp-by-example cd amp-by-example npm install

第二步：创建您的第一个AMP页面

使用项目提供的工具快速创建AMP示例：

gulp create --name "我的第一个AMP页面" --dest src/10_Introduction

第三步：编写AMP页面内容

编辑新创建的AMP文件，添加基本内容：

<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>我的第一个AMP页面</title> <script async src="https://cdn.ampproject.org/v0.js"></script> <link rel="canonical" href="<%host%>/introduction/hello_world/"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; } h1 { color: #005AF0; } </style> <style amp-boilerplate>/* AMP样板代码 */</style> </head> <body> <h1>🎉 欢迎来到AMP世界！</h1> <p>这是一个简单的AMP页面示例。</p> <amp-img src="/img/landscape_mountains_1280x657.jpg" width="1280" height="657" layout="responsive" alt="美丽的山景"> </amp-img> </body> </html>

第四步：运行本地服务器

启动本地开发服务器查看效果：

gulp

现在您可以在浏览器中访问 http://localhost:8000 查看您的AMP页面！

AMP核心组件快速入门

响应式图片处理

AMP的amp-img组件支持srcset属性，可以根据不同设备提供合适的图片尺寸：

<amp-img src="/img/amp.jpg" srcset="/img/amp.jpg 1080w, /img/amp-900.jpg 900w, /img/amp-800.jpg 800w" width="1080" height="610" layout="responsive" alt="AMP多尺寸图片"> </amp-img>

视频组件使用

AMP提供了专门的视频组件，支持YouTube、Vimeo等多种视频平台：

<amp-youtube ><form method="post" action-xhr="https://example.com/subscribe" target="_top"> <input type="email" name="email" placeholder="输入您的邮箱" required> <input type="submit" value="订阅"> </form>