创建广告外壳
AMPHTML 广告所需的 HTML 是 AMP 页面所需的 AMPHTML 的变体。让我们通过创建 AMPHTML 广告的外壳来熟悉所需的代码。
使用您最喜欢的文本编辑器，创建一个名为 my-amphtml-ad.html 的 HTML 文件。将以下 HTML 标记复制到该文件中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My amphtml ad</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>
此标记用于基本的有效 HTML 文件。请注意，我们包含了 meta 视口标签，以便我们拥有一个响应式视口。
现在，让我们修改 HTML 以使其成为 AMPHTML 广告。
在 <html> 标签中，添加 ⚡4ads 属性，该属性将文档标识为 AMPHTML 广告。或者，您可以指定 amp4ads 属性，该属性也有效。
<!doctype html>
<html ⚡4ads>
<head>
...
注意 – 与 AMP 页面不同，AMPHTML 广告不需要
<link rel="canonical"> 标签。AMPHTML 广告需要其自身的 AMP 运行时版本，因此请将以下 <script> 标签添加到文档的 <head> 部分
<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
AMPHTML 广告素材需要与 AMP 页面不同的、简单得多的 样板 样式行。将以下代码添加到您的 <head> 部分
<style amp4ads-boilerplate>body{visibility:hidden}</style>
为了设置 AMPHTML 广告的样式，您的 CSS 必须使用 <style amp-custom></style> 标签内联嵌入到 AMPHTML 文档的 <head> 部分中。由于我们正在渲染基本的图像广告，因此我们不需要任何 CSS，所以我们不会添加这些标签。
注意 – 对于 AMPHTML 广告，内联样式表的最大大小为 20 KB。了解有关 AMPHTML 广告规范中的 CSS 要求的更多信息。
这是 HTML 文件的完整代码
<!doctype html>
<html ⚡4ads>
<head>
<meta charset="utf-8">
<title>My amphtml ad</title>
<meta name="viewport" content="width=device-width">
<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
<style amp4ads-boilerplate>body{visibility:hidden}</style>
</head>
<body>
</body>
</html>
您现在有了一个有效的 AMPHTML 广告，尽管它相当空。让我们创建图像广告。