創建第一個AMP頁面【ytkah英譯AMP-1】-有解無憂

想創建您的第一個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="https://www.cnblogs.com/ytkah/p/$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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21621.html

標籤：Html/Css

上一篇：weblogic受管節點無法啟動，求大神幫我看看。

下一篇：CSS基礎之簡單介紹