- 02-01 – 用HTML5開發移動網站
第二部分 – 第01章
要開發移動網站,第一步是要使用HTML5進行為網站頁面進行編碼。
什麼是HTML5?
HTML一直是一種用於組織並顯示網站頁面的標記語言。 HTML5是繼HTML4之後的版本,也是HTML的最新版本。
如今,用戶可以在台式電腦、平板、移動設備上瀏覽訪問網站。 HTML5與之前的所有版本都不同,因為它正是為開發跨設備網站而準備的。
HTML5擁有HTML4及其他之前版本所沒有的新特性。這些新特性旨在使處理網站頁面上的多媒體和圖片內容更為便捷,而不需要安裝瀏覽器插件。
構件:HTML,CSS和JavaScript
一個典型的網站由多個網頁組成,每個單一網頁內容有:
- HTML
- CSS
- JavaScript
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