想創建您的第一個AMP頁面又不知道如何開始?在本教程中，您將學習如何創建一個基本的AMP HTML頁面，如何對其進行設置並驗證它是否與AMP相容，以及如何為發佈和分發做好準備。 Create your first AMP pageNot sure how to get started? In thi ...
想創建您的第一個AMP頁面又不知道如何開始?在本教程中，您將學習如何創建一個基本的AMP HTML頁面，如何對其進行設置並驗證它是否與AMP相容，以及如何為發佈和分發做好準備。
Create your first AMP page
Not sure how to get started? In this tutorial, you’ll learn how to create a basic AMP HTML page, how to stage it and validate that it’s AMP compliant, and finally how to get it ready for publication and distribution.
下麵的代碼是一個不錯的amp樣板，可以做為學習的開始。複製並將其保存到擴展名為.html的文件中。
<!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/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>Welcome to the mobile web</h1>
</body>
</html>
body正文中的內容非常簡單。但是在頁面的頭部有很多額外的代碼，這些代碼可能不會立即顯示出來。讓我們來分析一下所需的標記。
使用HTTPS:在創建AMP頁面和內容時，應該強烈考慮使用HTTPS協議。雖然AMP文檔本身或圖像和字體不需要HTTPS，但有許多AMP特性需要HTTPS(例如，視頻、iframes等)。要確保您的AMP頁面充分利用所有AMP功能，請使用HTTPS協議。
必需的標記：
- 以<!doctype html>為開始標註html文檔類型
- 用<html ⚡>或<html amp>作為最外層標簽，標識頁面為AMP內容
- 包含<head>和<body>標簽，(在普通html是可選，但amp中必須包含head 和 body)
- 包含一個<meta charset="utf-8">標簽作為head標簽的第一個子標簽。表示標識頁面的編碼。
- 包含一個<script async src="https://cdn.ampproject.org/v0.js"></script>標簽在head標簽中。作為一種最佳實踐，您應該儘可能早地將該腳本引入其中。作用是引入和載入AMP JS庫。
- 在head中包含一個<link rel="canonical" href="$SOME_URL">標簽，指向AMP HTML文檔的常規HTML版本，或指向自身(如果沒有這樣的HTML版本存在)。ytkah的理解：canonical是唯一頁面url標識，防止因為url中帶參數而引起的重覆頁面
- 在head中包含<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">標簽，我們建議包含initial-scale=1。表示頁面自適應。
- 在head中包含AMP樣板代碼。CSS樣板，最初隱藏內容，直到AMP JS載入。
可選的標記
除了基本的需求之外，我們的示例還在頭部包含一個Schema.org定義，這不是AMP的嚴格要求，但如果想要將內容分發到某些位置(例如，在谷歌搜索頭部的花燈切換故事)則需要加這些標記。
很好!這就是我們創建第一個AMP頁面所需要的一切，但是當然，在body中還沒有進行很多工作。在下一節中，我們將介紹如何添加基本的像圖像，自定義AMP元素，如何自定義樣式你的頁面和作出一個響應式佈局。引入圖片amp-img【英譯AMP】
參考資料https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/?format=websites
