用HTML5开发移动网站 - 移动网站性能技术白皮书

02-01 – 用HTML5开发移动网站

第二部分 – 第01章

HTML5

要开发移动网站，第一步是要使用HTML5进行为网站页面进行编码。

什么是HTML5?

HTML一直是一种用于组织并显示网站页面的标记语言。HTML5是继HTML4之后的版本，也是HTML的最新版本。

如今，用户可以在台式电脑、平板、移动设备上浏览访问网站。HTML5与之前的所有版本都不同，因为它正是为开发跨设备网站而准备的。

HTML5拥有HTML4及其他之前版本所没有的新特性。这些新特性旨在使处理网站页面上的多媒体和图片内容更为便捷，而不需要安装浏览器插件。

构件：HTML，CSS和JavaScript

一个典型的网站由多个网页组成，每个单一网页内容有：

Website Building Blocks

HTML

在一个网站页面上，HTML就是控制所有内容（例如文本、图片、超级链接中的视频，等），CSS，以及JavaScript的支柱。

例如，网站页面可以完全采用HTML5编写，而不需要任何CSS或者JavaScript。

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
</head>
<body>
  <h1></h1>
  <p></p>
  </body>
</html>

CSS

CSS提供了网站页面的视觉呈现部分。

JavaScript

JavaScript负责网站页面的交互特性（或者行为）。

一个例子：HTML5页面

一个典型的HTML5网站页面应具备如下结构。

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://www.example.com/css/stylesheet.css">
  <script src=" http://www.example.com/js/scripts.js"></script>
  </head>
<body>
  <h1></h1>
  <p></p>
  </body>
</html>

第一行明确了网站页面的文件类型。

<!doctype html>

页面的窗体变量是由META字符集标签指定的。utf-8支持在网站页面上使用英文单词和其他语言的字符（例如简体中文、繁体中文，等等）。

<meta charset="utf-8">

所有网页都需要给用户提供一个适合的视觉界面。CSS提供了页面的视觉呈现。link标签内的ref属性从外部文件stylesheet.css中检索CSS内容。

<link rel="stylesheet" href="http://www.example.com/css/stylesheet.css">

网站页面使用JavaScript进行用户交互。script标签内的src属性从外部文件scripts.js中检索JavaScript内容。

<script src="http://www.example.com/js/scripts.js"></script>

上一章：部署Google加速移动网页（AMP）
下一章：配置Viewport

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Develop Mobile Websites in HTML5 – 繁体中文版：用HTML5开发移动网站

移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book