如何使用 Google AMP 制作简单的网站？

Google AMP 是制作具有快速加载功能的移动网站的好方法。它完全建立在最新的网络技术之上。 Google AMP 通过限制 HTML、CSS 和 JavaScript 的某些部分以尽可能快的速度加载网页而不会失去其美感，从而实现了这样的速度。这些限制导致自定义元素和规则的定义。

规则：

• doctype 声明是必需的。

• 设计者必须使用 或 或标准 标记来启动 AMP 页面代码。这告诉浏览器该文件是一个 AMP 文件。

• HEAD 标记必须包含以下链接和代码，以使 AMP 代码正常工作。

HTML

 



 

 


 


    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
        }
    

• 可以通过在 AMP CSS 标记中编写 CSS 来在 AMP 页面中添加自定义 CSS，如下所示：

HTML

可以注意到，大多数 HTML 标签可以直接在 AMP 页面中使用，而一些标签（如 img）被重新定义的 AMP 标签替换。

例子：

HTML

 


 

    
    
 
    
    
    
     
    
    
 
    
    
     
    
    
        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!Welcome to
        GeeksForGeeks
    

 

输出：

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