创建第一个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的文件中。

  
    
    
    
    
    
    
    
  
  
    
Welcome to the mobile web
  

　　

　　body正文中的内容非常简单。但是在页面的头部有很多额外的代码，这些代码可能不会立即显示出来。让我们来分析一下所需的标记。 

　　使用HTTPS:在创建AMP页面和内容时，应该强烈考虑使用HTTPS协议。虽然AMP文档本身或图像和字体不需要HTTPS，但有许多AMP特性需要HTTPS(例如，视频、iframes等)。要确保您的AMP页面充分利用所有AMP功能，请使用HTTPS协议。

　　必需的标记：

• 以为开始标注html文档类型
• 用或作为最外层标签，标识页面为AMP内容
• 包含和标签，(在普通html是可选，但amp中必须包含head 和 body)
• 包含一个标签作为head标签的第一个子标签。表示标识页面的编码。
• 包含一个标签在head标签中。作为一种最佳实践，您应该尽可能早地将该脚本引入其中。作用是引入和加载AMP JS库。
• 在head中包含一个标签，指向AMP HTML文档的常规HTML版本，或指向自身(如果没有这样的HTML版本存在)。ytkah的理解：canonical是唯一页面url标识，防止因为url中带参数而引起的重复页面
• 在head中包含标签，我们建议包含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