Hello World

Introduction

An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This samples shows what's necessary to create a valid AMP HTML file.

Doctype declaration is required.

<!doctype html>

This tells everyone that this is an AMP file. <html amp> works too.

<html ⚡ lang="en">

Head

The charset definition must be the first child of the <head> tag.

<meta charset="utf-8">

The AMP runtime must be loaded as the second child of the <head> tag.

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.

<link rel="canonical" href="https://amp.dev/documentation/examples/introduction/hello_world/index.html">

AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1.

<meta name="viewport" content="width=device-width">

CSS must be embedded inline.

<style amp-custom>
  h1 {
    color: red;
  }
</style>

The AMP boilerplate.

<style amp-boilerplate>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}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Body

Most HTML tags can be used directly in AMP HTML.

Hello World!

<h1>Hello World!</h1>

Certain tags, such as the <img> tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags (see HTML Tags in the specification). You can use the AMP Validator to check if your AMP HTML file is valid AMP HTML. Simply add #development=1 to an AMP URL. Validation errors will be printed in the Javascript console. You can try it with this website which is built with AMP.

Check out the other examples to learn more about AMP.

<amp-img src="/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive"></amp-img>

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub

Written by @sebastianbenz