學習源網址：https://amp.dev/zh_cn/documentation/courses/
原文是英文版，且比較長。
筆記中簡化了一些，記錄我們常用的組件以及一些要點。

關于 AMP 加速的原因
1、Inline 的 CSS
所有的CSS都只能Inline;在本頁內的css不能>75k
2、禁用了大部分的JS
在AMP模式下是不能運行JavaScript，也是禁止運行JavaScdript的，所以所有的Script標簽都會報錯。
3、圖片
img 標簽全部要改為 amp-img
4、頁面里是不能有form標簽的，刪除所有的form。

知識要點

CSS和AMP：AMP對CSS的使用施加了一些限制：
1）樣式只能駐留在文檔的頭上。

<style amp-custom>
    body {
        font-family: sans-serif;
        line-height: 1.5rem;
        padding: 20px;
    }
    p, h2 {
        border: 1px dotted red;
    }
</style>

構建AMP站點的目標是盡可能使用AMP組件。
大多數HTML標記可以直接在AMP中使用，但是某些標記，例如標簽，必須用等效的AMP組件替換。

添加圖片 amp-img

<amp-img 
src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" 
width=”640” 
height="480">
</amp-img>

上面的圖片在頁面中的圖像不會縮小到適合較小的屏幕，它只是溢出到側面。

<amp-img 
src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" 
layout="responsive"0
 width="640" 
 height="480">
 </amp-img>

layout類型responsive以便在調整窗口大小時自動縮放。響應布局使圖像假定父容器的尺寸，同時尊重原始的高寬比。如果父容器只有320像素寬，則圖像將保持其縱橫比并被調整為320x240(而不是640x480)

嵌入視頻：
在文檔中嵌入一個YouTube視頻，需要2步：
1）在head里，添加：

<script async 
custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
</script>

2）視頻id為BlpMQ7fMCzA.

<amp-youtube 
data-videoid="BlpMQ7fMCzA" 
layout="responsive" 
width="480" 
height="270">
</amp-youtube>

旋轉木馬
AMP實現組件：
1）在head里添加：

<script async 
custom-element="amp-carousel" 
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>

2）在相應的代碼位置中添加：

<amp-carousel layout="responsive" width="412" height="309" type="slides" loop>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
             width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
             width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
             width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>

嵌入社交媒體

1）在head中添加

<script async 
custom-element="amp-social-share" 
src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js">
</script>

2）在相應的位置添加

<div class="social-bar">
  <amp-social-share type="email" width="44" height="44"></amp-social-share>
  <amp-social-share type="linkedin" width="44" height="44"></amp-social-share>
  <amp-social-share type="tumblr" width="44" height="44"></amp-social-share>
  <amp-social-share type="twitter" width="44" height="44"></amp-social-share>
</div>

標簽 AMP開始的時候，它只用于為移動設備創建網頁。一個網頁將有一個AMP版本，用于移動設備，一個版本用普通HTML編寫，用于桌面(稱為“規范”版本)。然后使用標記，這樣搜索引擎就會知道兩個文檔代表相同的網頁。

因此，非AMP文檔包含指向AMP文檔的鏈接，如下所示：

<link rel="amphtml" href="https://www.site.com/amp/document.html">

AMP文檔包含一個指向非AMP文檔的鏈接，如下所示：

<link rel="canonical" href="https://www.site.com/document.html">

現在AMP功能更全面了，除非您需要在桌面頁面上添加其他功能，否則在移動和桌面上使用AMP就更容易了。這樣，你只需要維護一頁而不是兩頁！盡管如此，仍然需要。在這種情況下，只需將頁面鏈接到自身，

<link rel="canonical" 
href="https://www.site.com/amp/document.html">

對所有設備使用單一AMP頁面稱為“規范AMP”

適用于移動設備和桌面設備。由于用戶可能在任何一種設備上體驗您的網頁，所以最好在開發時檢查這兩種設備上的網頁。
head中要增加

<meta name="viewport" 
content="width=device-width,minimum-scale=1,initial-scale=1">

AMP中的延遲加載
“延遲加載”是指資源(圖像、數據、視頻、腳本等)在需要之前不會加載。當AMP下載資源時，它會優化下載，以便首先下載當前最重要的資源。只有當用戶可能看到圖片和廣告，或者用戶可能快速滾動到圖片和廣告時，才會下載這些圖片和廣告。這些媒體資產的等價物(而不是)之所以稱為“托管資源”，是因為它們是否以及何時加載并顯示給用戶是由AMP決定的。放大器可以在任何時候決定卸載當前用戶不可見的資源。AMP的性能優化之一要求提前宣布他們的身高。這有助于計算布局將如何以更好的方式。例如，這是至關重要的，因為AMP預加載第一個視圖中所需的所有資源，用戶在訪問網站時第一次看到的所有資源。