AMP 基础
AMP HTML 必须结构
<!doctype html>
<html amp lang="zh">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>页面标题</title>
<link rel="canonical" href="https://example.com/page">
<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;...}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none}</style></noscript>
<style amp-custom>
/* 自定义 CSS（最大 75KB） */
</style>
</head>
<body>
<!-- AMP 内容 -->
</body>
</html>
受限 / 禁止使用的元素
以下 HTML 标签在 AMP 页面中不可使用：
<img><video><audio><iframe><script>（自定义）<form method="GET">（用 amp-form）<style>（仅 amp-custom）<base><link>（字体除外）
常用 AMP 组件
| 组件 | 替代 | 示例 |
|---|---|---|
amp-img | <img> | <amp-img src="img.jpg" width="800" height="600" layout="responsive" alt="..."></amp-img> |
amp-video | <video> | <amp-video src="video.mp4" width="640" height="360" controls layout="responsive"></amp-video> |
amp-audio | <audio> | <amp-audio src="audio.mp3" controls></amp-audio> |
amp-iframe | <iframe> | <amp-iframe src="https://..." width="500" height="300" layout="responsive" sandbox="allow-scripts"></amp-iframe> |
amp-carousel | 轮播/滑块 | <amp-carousel type="slides" layout="responsive" width="600" height="400">...</amp-carousel> |
amp-accordion | 折叠面板 | <amp-accordion><section><h2>标题</h2><p>内容</p></section></amp-accordion> |
amp-form | <form> | <form method="post" action-xhr="/submit" target="_top">...</form> |
amp-analytics | 分析脚本 | <amp-analytics type="googleanalytics">...</amp-analytics> |