附錄
關閉專家模式
專家模式
使用專家模式來隱藏為初學者設計的網路開發指南。
說明 AMP HTML 的樣板
<link rel="canonical"> 標記
AMP 最初僅用於建立行動裝置的網頁。網頁會有一個 AMP 版本 (用於行動裝置)，以及一個以一般 HTML 撰寫的版本 (用於桌上型電腦，稱為「標準」版本)。接著，您會使用 <link> 標記連結這兩個版本，讓搜尋引擎知道這兩個文件代表相同的網頁。
因此，非 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> 仍然是必要的。在這種情況下，您只需要將網頁連結到自身，如下所示：
<link rel="canonical" href="https://www.site.com/amp/document.html">
針對所有裝置使用單一 AMP 網頁稱為「標準 AMP」。這就是我們為起司自行車店採用的做法！
amp-boilerplate <style> 標記
所有 AMP HTML 網頁也必須在 <head> 標記內包含一些預設樣式。這種樣式會影響網頁的外觀和風格，直到 AMP 程式庫完全載入為止。它的主要作用是在網頁準備就緒之前 (也就是網頁的所有元素都已就緒，且 AMP 知道它們的位置和佔用空間) 先隱藏內容。完成後，網頁會淡入。這樣一來，使用者會直接看到網頁的最終形式，讓他們覺得網頁是立即載入的。
為何需要 viewport <meta> 標記？
AMP 可在行動裝置和桌上型電腦裝置上運作。由於使用者可能會在任一裝置上體驗您的網頁，因此最好在開發時同時在兩種裝置上檢查您的網頁。若要在 Chrome DevTools 中模擬行動裝置體驗，請按一下此處的行動電話裝置圖示：
現在從這個選單中選取行動裝置 (例如「Nexus 5X」)：
您應該會看到瀏覽器中顯示所選裝置的網頁外觀模擬，如下所示：
請注意，內容在行動裝置的螢幕上無法完美呈現。「viewport」meta 標記會處理這個問題。這個標記會縮放我們的網頁，以便在給定的螢幕尺寸中建立最佳檢視畫面。由於我們希望 AMP 網頁針對行動裝置進行最佳化，並且具有回應性，因此不用說，AMP 驗證工具會要求使用這個標記。
因此，以下標記必須放置在 AMP 網頁的 <head> 標記內。將其新增至捷徑圖示連結下方。
<meta name="viewport" content="width=device-width">
如果您重新整理網頁，現在在小螢幕中看起來應該會好一點，如下所示：
除了標題之外，您現在不會注意到太大差異，但您可以隨著我們繼續進行，試著了解縮放的運作方式。
AMP 中的延遲載入
「延遲載入」表示資源 (圖片、資料、影片、指令碼等) 在需要時才會載入。當 AMP 下載資源時，它會最佳化下載，以便優先下載目前最重要的資源。只有在使用者可能會看到圖片和廣告，或者使用者可能會快速捲動到這些圖片和廣告時，才會下載它們。這些媒體資產的等效元件 (<amp-img> 而非 <img>) 稱為「受管理資源」，因為是否載入這些資源以及何時向使用者顯示這些資源是由 AMP 決定的。AMP 可能隨時決定卸載目前使用者看不到的資源。AMP 的效能最佳化之一要求 <amp-img> 等元素預先宣告其高度。這有助於 AMP 更好地計算版面配置的外觀。這至關重要，舉例來說，因為 AMP 會預先載入第一個視口中需要的所有資源，也就是使用者首次造訪網站時看到的所有內容。
固定版面配置與回應式版面配置
AMP 包含版面配置系統，以確保網頁版面配置在瀏覽器轉譯網頁之前盡可能保持靜態。這個系統提供我們一個 layout 屬性，可讓我們以各種方式定位和縮放元素，包括固定尺寸、回應式設計、固定高度等等。版面配置系統負責強制執行特定元素的大小宣告。
版面配置屬性適用於大多數元素，它指定 AMP 元件在網頁上的外觀。版面配置屬性的兩個常見值是「fixed」和「responsive」。如果元素具有固定版面配置，則必須存在 width 和 height 屬性。然後，無論螢幕或視口如何變更，元素都會維持這個精確的像素大小。如果元素具有回應式版面配置，則同樣地，width 和 height 屬性都必須存在。但在這種情況下，元素會自動調整大小以佔用所有可用空間，同時保持由設定的寬度和高度給定的長寬比。可用空間取決於父元素。