用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>


移動網站性能技術白皮書在2017年3月正式出版。

英文版:Develop Mobile Websites in HTML5 – 簡體中文版:用HTML5開發移動網站







移動網站性能技術白皮書上的內容按下列許可協議發布: CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book