入門程式碼

以下標記為基本的 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 中開啟此程式碼片段

主體內容非常簡單明瞭，但在 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