谷歌 AMP |介绍

简介： Google AMP 是一个开源 HTML 框架，其中 AMP 是 Accelerated Mobile Pages 的首字母缩写。它由 Google 创建，现在由 AMP Open Source Project 开发。它针对移动网页进行了优化，旨在帮助网页更快地加载。

要使用 Google AMP，您必须具备 HTML、CSS 和 JavaScript 的先验知识。建议在开始学习 Google AMP 之前学习前面提到的主题。

官网： https ://amp.dev/

官方编码场： https ://playground.amp.dev/

为什么要使用 AMP？

好吧，您网站的任何用户都希望网站加载速度快，另一方面，希望网站管理网站流量，Google AMP 解决了这两个问题。它的编程方式不仅可以高速加载网站，还可以管理网站流量。

谷歌 AMP 的优势：

• Google AMP 页面是轻量级的，加载速度也更快。
• 谷歌优先考虑谷歌搜索中的 AMP 页面，从而获得更多用户。它们在页面顶部以轮播格式列出。
• 谷歌 AMP 页面具有响应性并适应浏览器，从而使其适合移动设备。

Google AMP 的缺点：众所周知，没有什么是纯粹的优点，Google AMP 也是如此。它们具有以下缺点 -

• 发布者必须为其页面 amp 和 non-amp 维护两个版本，这可以增加存储空间。
• 用户必须付出额外的努力才能将非 amp 页面转换为 amp。 As amp 不支持自定义 JavaScript 或加载外部 JavaScript。

基本程序：要在 AMP 中编写程序，您必须在代码中使用 或 标记而不是 标记，因为当浏览器读取此代码时，它会理解以下是 AMP 代码。

HTML

  


  

    
    
     Hello World
    
    
    
      
    
    
      
    
    
      
    
    
        h1 {
            color: forestgreen;
        }
    
  
    
        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
            }
        }
    
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    

  

    Hello World!

  

输出：

此输出适用于 iPhone 6/7/8