入門程式碼

以下標記是一個基本的 AMP 頁面。

<!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.org.tw/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>

在 Playground 中開啟此程式碼片段

body 內容非常簡單，但在 head 中有一些額外的程式碼。下表詳細說明了必要的標記。每個 AMP HTML 文件必須

規則	說明
以 `<!doctype html>` doctype 開頭。	HTML 的標準。
包含一個頂層的 `<html ⚡>` 或 `<html amp>` 標籤。	將頁面識別為 AMP 內容。
包含 `<head>` 和 `<body>` 標籤。	雖然在 HTML 中是可選的，但在 AMP 中是必需的。
在 `<head>` 標籤後方緊接著包含一個 `<meta charset="utf-8">` 標籤。	識別頁面的編碼。
在 `<head>` 標籤內包含一個 `<script async src="https://cdn.ampproject.org/v0.js"></script>` 標籤。最佳實踐是儘早包含此腳本。	包含並載入 AMP JS 函式庫。
在 `<head>` 中包含一個 `<link rel="canonical" href="$SOME_URL">` 標籤。	`href` 屬性應指向頁面本身。此部分因歷史原因而存在。
在 `<head>` 標籤內包含一個 `<meta name="viewport" content="width=device-width" />` 標籤。	指定響應式視窗。在建立響應式 AMP 頁面中了解更多資訊。
在 `<head>` 標籤中包含 AMP 樣板程式碼。	CSS 樣板，用於在 AMP JS 載入之前初始隱藏內容。

點擊上方範例下方的「在 Playground 中開啟此程式碼片段」以開始建構我們的頁面！

如果您想跳過，可以在此處查看完成的教學程式碼！

作者： @crystalonscript